PHP程序设计与微信小程序案例教程304

第第1章章 微信小程序入微信小程序入门 PHP程序设计程序设计1.1什么是微信小程序微信小程序（WechatMiniProgram），是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用。微型小程序应用的领域非常多，微型小程序应用的领域非常多，包括教育、媒体、交通、房地产、包括教育、媒体、交通、房地产、生活服务，旅游、电商、餐饮，生活服务，旅游、电商、餐饮，民政民生，科技等多个领域。民政民生，科技等多个领域。微信小程序以快捷、低成本优势，微信小程序以快捷、低成本优势，为电商行业实现了更多的盈利，为电商行业实现了更多的盈利，为消费者带来更好的服务。为消费者带来更好的服务。1.2 微信小程序开发流程1.1.微信小程序运行流程微信小程序运行流程微信小程序运行流程微信小程序运行流程1.2 微信小程序开发流程2.2.微信小程序开发流程微信小程序开发流程微信小程序开发流程微信小程序开发流程打开微信公众平台官网打开微信公众平台官网https:/依次完成账号信息、邮箱依次完成账号信息、邮箱激活、信息登记激活、信息登记选择注册的账号类型：选择注册的账号类型：小程序小程序1.3注册微信小程序账号1.1.注册微信小程序账号注册微信小程序账号注册微信小程序账号注册微信小程序账号1232.查找自己的小程序id和AppSecret登录微信公众平台官网在左侧菜单中单击开发-开发管理，在中间窗口单击开发设置。1.3注册微信小程序账号小小程序程序id即小程序的身份证号，即小程序的身份证号，AppSecret即小程序的密钥。即小程序的密钥。1.4 微信开发者工具1.下载微信开发者工具微信开发者工具是微信小程序专用开发集成环境。代码写在微信开发者工具中，可直接看到代码运行的结果、直接进行调试、上传。打开微信公众平台网站单击“工具”-“下载”单击小程序开发文档下载步骤1.5 新建和导入项目1.新建项目打开微信开发者工具单击管理-单击+号，创建新项目。单击目录（提前创建一个空目录）-粘贴自己的AppID-单击不使用云服务-单击新建。1.5 微信开发者工具2.导入项目“单击导入”选择项目所在的文件夹单击新建1.6 微信开发者工具的使用3.微信开发者工具界面（1）菜单栏项目：用于新建项目、关闭项目、导入项目、查看所有项目。文件：用于新建、保存、关闭文件。编辑：用于查找替换编辑代码、格式化代码。工具：用于访问一些辅助工具。界面：用于显示和隐藏开发者界面的各个窗口。设置：用于设置外观、快捷键、编辑器等。微信开发者工具：用于切换账号、更换开发模式、调试等操作。1.6 微信开发者工具（3）模拟器可以模拟手机环境，在模拟器的底部状态栏会显示当前的页面路径。（4）编辑器编辑器包括左右两部分。左侧用于浏览项目目录结构，单击某个文件，在右侧对这个文件进行编写代码。（5）调试器：对小程序序进行调试。Console:“控制台”面板，用于输出代码中console.log()的调试信息，也可以直接编写代码执行。Sources:“源代码”面板，可以查看或编辑源代码，并支持代码调试。Wxml:Wxml面板，查看和调试WXML和WXSS。1.6 微信开发者工具（2）工具栏个人中心：左侧第一个按钮，显示当前登录用户的头像和用户名。模拟器、编辑器和调试器按钮：用于切换显示或隐藏对应的工具。编译下拉菜单：默认为普通编译。可以添加其它编译模式。编译：编写小程序代码后，要单击“编译”按钮，或者按下ctrl+s快捷键，才能在模拟器看到显示效果，在调试器中进行调试。预览：单击该按钮，会生成一个二维码，用手机微信扫一扫，可在手机微信中预览小程序的实际运行效果。真机调试：通过网络连接对手机上运行的小程序进行调试，可以在手机上更好地定位和查找出现的问题。切后台：模拟在手机中小程序切换后台的效果。清缓存：清除数据缓存或文件缓存。上传：当小程序代码调试成功后，单击上传按钮，可以将代码上传到小程序管理后台，做为体验版本。2.常用操作1.6 微信开发者工具（1）搜索：打开一个代码文件，按下快捷键CTRL+F，弹出搜索框，输入需要查找的内容。搜索结果会以特殊颜色标识出来。如下图2-19所示。（2）替换：在搜索框中，单击查找框左边箭头，会显示替换框，在替换中输入替换的内容，进行替换，2.常用操作1.6 微信开发者工具2.常用操作1.6 微信开发者工具（3）撤消：可以用CTRL+Z撤销最近的操作。（4）格式化代码：对代码进行格式调整，查看代码更直观，不会有格式混乱。快捷键是ALT+SHIFT+F。（5）清除缓存启动小程序时，会保存一些登录信息，如果后面需要重新修改这些登录信息并调试，就需要清除缓存。（6）小程序的调试方法Console:编写完代码，单击工具栏中编译，或者ctrl+s,在调试区的Console中可以看到打印输出的信息。2.常用操作1.6 微信开发者工具console调试窗口2.常用操作1.6 微信开发者工具（7）小程序开发者文档是微信小程序的开发教程。2.1微信小程序代码框架介绍 PHP程序设计程序设计2.1微信小程序代码框架介绍1.微信小程序前端与网站前端网页的相同点与区别2.1微信小程序代码框架介绍1.微信小程序前端的开发技术使用wxml、js、wxss三种开发语言组合使用，见表3-2所示。表3-2微信小程序前端的开发技术2.微信小程序前端的开发技术2.1微信小程序代码框架介绍3.微信小程序的文件类型2.1微信小程序代码框架介绍4.小程序的目录结构新建一个小程序项目2.1微信小程序代码框架介绍4.小程序的目录结构2.2微信小程序JSON文件 PHP程序设计程序设计主主讲人：人：谭丽君君2.2 微信小程序JSON文件JSON是一种数据格式，不是编程语是一种数据格式，不是编程语言。言。Json文件的语法格式：包含在一文件的语法格式：包含在一个大括号中，通过个大括号中，通过key：value 键值对键值对的方式来描述数据。的方式来描述数据。key必须放在一必须放在一对双引号中。最后特别强调，对双引号中。最后特别强调，JSON文件中不能使用注释。文件中不能使用注释。2.2 微信小程序JSON文件（1）全局配置文件在项目的根目录有一个app.json，它是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。2.2 微信小程序JSON文件（2）页面JSON文件在第2章新建项目目录中，pages/index和pages/logs目录下的index.json和logs.json文件，就是页面JSON文件。在页面JSON文件中可以设置顶部导航栏的背景颜色、文字。PHP程序设计程序设计主主讲人：人：谭丽君君2.3 微信小程序代码微信小程序代码WXMLWXML2.3.1 WXML基本语法WXML 是从是从HTML（超文本标签语言）（超文本标签语言）衍生而来的一种衍生而来的一种在小程序前端页面使用的语言在小程序前端页面使用的语言，WXML 仍然仍然是标签语言，是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内使用标记标签来描述页面的结构，页面内容写在标签内部部.2.3.1 WXML基本语法双标签：双标签：成对出现的标签。成对出现的标签。格式：格式：内容内容例如：视图容器例如：视图容器 单标签：不成对出现的标签。单标签：不成对出现的标签。格式：格式：例如：输入框例如：输入框1.标签：标签由一对尖括号包围关键词。标签：标签由一对尖括号包围关键词。2.3.1 WXML基本语法通用属性通用属性大部分标签都有的属性。大部分标签都有的属性。例如：例如：class、id、style等等专用属性专用属性不同标签有自己独特属性。不同标签有自己独特属性。例如：例如：password作用：输入框中作用：输入框中输入内容以小圆点显示输入内容以小圆点显示2.标签属性标签属性:给给组件设置参数用的。组件设置参数用的。2.3.1 WXML基本语法3.常用组件常用组件2.3.2 制作第一个小程序pages:pages/test/test,pages/index/index,pages/logs/logs,第一个小程序HelloWorld新建一个微信小程序运行效果步骤一app.json文件步骤二test.wxml文件2.3.3 制作“景区名片”页面1.“景区名片”页面框架大框大标题框图片内容框小标题框段落框2.3.3 制作“景区名片”页面1.“景区名片”页面代码pages:pages/jqmp/jqmp,pages/index/index,pages/logs/logs,荔波小七孔简介小七孔风景区位于贵州省荔波县城南部30余公里的群峰之中，景区全长7公里，面积约10平方公里，有百多个游览景点。是集山、水、林、洞、湖、瀑为一体的原始奇景。1988年被列为国家级自然保护区。步骤一app.json文件步骤二jqmp.wxml文件2.3.4 制作“比较成绩”页面1.“比较成绩”页面框架框框按钮框框框按钮框文本输入框文本输入框文本2.3.4 制作“比较成绩”页面2.“比较成绩”页面WXML代码请输入语文成绩请输入数学成绩比较成绩比较结果：pages:pages/bjcj/bjcj,pages/index/index,pages/logs/logs步骤一app.json步骤二bjcj.wxml2.3.5数据绑定1.数据绑定：就是通过双重花括号变量名的语法格式，将一个变量绑定到页面上。小程序上的大部分数据都是后端服务器返回给小程序的，也就是说这些数据是动态的，每次加载小程序都要先访问服务器，服务器处理数据后，再返回小程序显示数据绑定2.3.5数据绑定2.数据绑定的操作方法wxml文件js文件12在标签内容或者属性需要数据绑定的地方写入变量名对该变量进行定义，把变量的值放在下面所示代码data:中。2.3.5数据绑定3.数据绑定示例：nameindex.js代码Page(/*页面的初始数据*/data:name:贵州黄果树)index.wxmlindex.js运行结果2.3.5数据绑定4.数据绑定的使用位置：wxml中数据绑定的位置除了放在内容中，还可以放在其它位置。2.3.6列表渲染列表渲染：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for是标签的一种特殊属性，称为控制属性。默认数组的当前项的下标变量名默认为index，步骤一index.wxml默认数组当前项的变量名默认为item。步骤二index.js运行效果2.3.7 制作“轮播图”一、轮播组件二、swiper常用属性.父级儿子级2.3.7 制作“轮播图”步骤1：App.json文件步骤步骤2 2：在项目根目录：在项目根目录下创建下创建imagesimages文件夹，文件夹，粘贴粘贴4 4张图片张图片2.3.7 制作“轮播图”步骤步骤步骤步骤3 3：lx.wxml文件2.3.7 制作“轮播图”使用列表渲染写轮播组件使用列表渲染写轮播组件注意：1.wx:for写在需要循环的组件里2.item是数组里每一项3.注意在wxml中数组和变量一定要写在里。步骤1：lx.wxml文件步骤2：lx.js文件2.3.8条件渲染在wxml中，使用wx:if=“条件来判断是否需要渲染该组件。示例：成绩大于80，显示良好，否则大于60，显示及格80良好60及格Page(/*页面的初始数据*/data:cj:70,步骤步骤步骤步骤1 1：lx.wxml文件步骤步骤步骤步骤2 2：lx.js文件 PHP程序设计程序设计主主讲人：人：谭丽君君2.42.4微信小程序微信小程序WXSSWXSS2.4 微信小程序wxss全局样式app.wxss对当前小程序的所有页面样式生效。当前小程序的所有页面样式生效。页面样式:文件名.wxss对当前页面样式生效。例如index.wxss12 选择器选择器 样式样式属性名：属性值；属性名：属性值；样式样式属性名属性名：属性值；：属性值；.2.4.1 WXSS的基本语法WXSS是样式语言，用于描述WXML的