微信小程序开发图解案例第2章课件.pptx

1、2.2 微信小程序注册程序应用2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.9 沙场大练兵：仿香哈菜谱微信小程序2.1 微信小程序目录结构介绍2.1 微信小程序目录结构介绍微信小程序目录结构可以分为3个部分：框架全局文件、框架页面文件和工具类文件，如图所示。2.1.1框架全局文件一个小程序的主体部分由3个文件组成，作为全局文件，必须放在项目的根目录中。框架全局文件包括3个文件：App.wxss小程序公共样式表、App.json小程序公共设置和App.

2、js小程序逻辑（定义全局数据以及定义函数文件），它们对所有页面都有效，如表所示。2.1.1框架全局文件App.js文件用来定义全局数据和函数的使用，它可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段、不同场景可以使用不同的生命周期函数。此外，App.js中还可以定义一些全局的函数和数据，其他页面引用App.js文件后就可以直接使用全局函数和数据，如图所示。1App.js小程序逻辑2.1.1框架全局文件App.json文件可以对5个功能进行设置：配

3、置页面路径配置窗口表现配置标签导航配置网络超时配置debug模式2App.json小程序公共设置01OPTION02OPTION03OPTION04OPTION05OPTION2.1.2工具类文件在微信小程序框架目录里有一个“utils”文件夹，它用来存放工具栏的js函数，如可以放置一些日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后，要通过module.exports将定义的函数名称注册进来，在其他的页面才可以使用，如图所示为时间格式化工具类文件。2.1.3框架页面文件一个小程序框架页面文件由4个文件组成，分别是js页面逻辑、wxml页面结构、wxss页面样式表和json

4、页面配置，如表所示。2.1.3框架页面文件微信小程序的框架页面文件都是放置在“pages”文件夹下面的，如图所示。每个页面都有一个独立的文件夹，就像日志页面的“logs”文件夹， 它的下面放置4个文件：logs.js可进行业务路径处理；logs.json是页面的配置，可以覆盖全局App.json配置；logs.wxml是页面结构，负责渲染页面； logs.wxss是针对logs.wxml页面的样式文件。小试牛刀：制作猫眼电影底部标签导航2.4.5小试牛刀：天气微信小程序猫眼电影底部标签导航分为4个标签导航：电影、影院、发现、我的，如图所示。2.1 微信小程序目录结构介绍2.3 微信小程序注册页

5、面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.9 沙场大练兵：仿香哈菜谱微信小程序2.2 微信小程序注册程序应用2.2 微信小程序注册程序应用App.js文件不仅可以定义全局函数和数据，还可以注册一个小程序。在App()函数里可以完成小程序的注册以及指定其生命周期函数。如表所示为生命周期函数的定义。2.2 微信小程序注册程序应用onLaunch生命周期函数。它用来监听小程序初始化，一旦初始化完成，就会触发该函数，这个生命周期函数只会触发一次。onShow生命周期函数。它用来

6、监听小程序显示。微信小程序有前后台定义。当用户单击左上角的“关闭”按钮或者按“Home”键关闭或者突然来电话时，微信小程序都没有销毁，而是进入后台；当再次进入微信或者小程序的时候才会触发onShow生命周期函数。只要程序启动或者从后台进入到前台都会触发该函数。onHide生命周期函数。它用来监听小程序隐藏，一旦微信小程序从前台进入到后台，就会触发该函数。onError生命周期函数。它用来监听小程序脚本或者API是否发生错误，发生错误时返回错误信息。12342.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表

7、渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.9 沙场大练兵：仿香哈菜谱微信小程序2.2 微信小程序注册程序应用2.3微信小程序注册页面的使用在每个页面文件夹里，都有一个页面对应的js文件，就像日志“logs”文件夹，对应的就是logs.js文件。在这个文件里的Page() 函数用于注册一个页面。接受一个object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里。object参数说明如表所示。2.3.1页面初始化数据data页面初始化数据：初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由

8、逻辑层传至渲染层，所以其数据必须可以转换成 JSON 的格式字符串、数字、布尔值、对象或数组。渲染界面可以通过 WXML 对数据进行绑定。2.3.2生命周期函数onLoad页面加载。一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。onShow页面显示。每次打开页面都会调用一次。onReady页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互，对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。onHide页面隐藏。当navigateTo或底部Tab切换时调用。

9、onUnload页面卸载。当redirectTo或navigateBack时调用。123452.3.3页面相关事件处理函数onPullDownRefresh下拉刷新。监听用户下拉刷新事件，需要在config的window选项中开启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。onShareAppMessage用户分享。只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮，用户单击“分享”按钮的时候会调用，此事件需要 return 一个 Object，用于自定义分享内容。分享参数说明如表所示。122.3

10、.4页面路由管理微信小程序的页面路由都是有微信小程序框架来管理的，路由的触发方式及页面生命周期函数如表所示。2.3.5自定义函数除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。 click me Page( clickMe: function() console.log(view tap) )2.3.6setData设值函数n Page.prototype.setData()设值函数：setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.dat

11、a 的值。n setData() 参数格式：接受一个对象，以 key、value 的形式表示将 this.data 中的 key 对应的值改变成 value。n 其中， key 可以非常灵活，以数据路径的形式给出，如 array2.message，a.b.c.d，并且不需要在this.data 中预先定义。2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.9 沙场大练兵：仿香哈菜谱微信小程序2.2 微信小程序注册程序应用2.

12、4微信小程序如何绑定数据WXML页面里的动态数据都是来自js文件Page的data，数据绑定就是通过双大括号（）将变量包起来，在WXML页面里将数据值显示出来。index.wxml message index.jsPage( data: message: Hello MINA! )2.4.1组件属性绑定组件属性绑定是将data里的数据绑定到微信小程序的组件上。 Page( data: id: 0 )2.4.2控制属性绑定控制属性绑定用来进行if语句条件判断，如果满足条件，则执行，否则不执行，示例代码如下。 Page( data: condition: true )2.4.3关键字绑定关键字绑定

13、常用于组件的一些关键字，像复选框组件一样。checked关键字如果等于true则代表选中复选框，false则代表不选中复选框。 2.4.4运算01OPTION02OPTION03OPTION04OPTION05OPTION三元运算数学运算逻辑判断字符串运算数据路径运算可以在 内进行简单的运算，支持以下几种方式的运算。小试牛刀：天气微信小程序2.4.5小试牛刀：天气微信小程序天气微信小程序用来显示天气的温度、最低温度、最高温度及天气情况，下面通过数据绑定的方式来显示天气情况，如图所示。2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条

14、件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.2 微信小程序注册程序应用2.9 沙场大练兵：仿香哈菜谱微信小程序2.5.1wx:if 判断单个组件在微信小程序框架里，使用 wx:if=”condition” 来判断是否需要渲染该代码块，示例代码如下。使用 wx:elif 和 wx:else 来添加一个 else 块，示例代码如下。 True 5” 1 2” 2 3 2.5.2block wx:if 判断多个组件因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是，如果我们想一次性判断多个组件标签，则可以使用一个 标签将

15、多个组件包装起来，并在其上使用 wx:if 控制属性。 view1 view2 2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.2 微信小程序注册程序应用2.9 沙场大练兵：仿香哈菜谱微信小程序2.6.1wx:for 列表渲染单个组件在组件上使用wx:for控制属性绑定一个数组，即可使用数组中的各项数据重复渲染该组件。默认数组当前项的下标变量名默认为index，数组当前项的变量名默认为item，示例代码如下。 index:

16、 item.messagePage( data: array: message: foo, , message: bar )2.6.1wx:for 列表渲染单个组件使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名，示例代码如下。 idx: itemName.message2.6.2block wx:for 列表渲染多个组件wx:for应用在某一个组件上，但是如果想渲染一个包含多节点的结构块，wx:for就需要应用在标签上，示例代码如下。 index: item 2.6.3wx:key 指定唯一标识符1.字符串。字符串代表在

17、 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。2.保留关键字。 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容、 的选中状态），需要使用 wx:key 来指定列表

18、中项目的唯一标识符。wx:key 的值有以下两种形式。2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.2 微信小程序注册程序应用2.9 沙场大练兵：仿香哈菜谱微信小程序2.7.1定义模板在内定义代码片段，使用name属性作为模板的名字，示例代码如下。 index: msg Time: time 2.7.2使用模板在WXML文件里，使用is属性，声明需要使用的模板，然后将模板所需要的data传入，示例代码如下。Page( d

19、ata: item: index: 0, msg: this is a template, time: 2016-09-15 )2.7.2使用模板is 属性可以使用三元运算语法来动态地决定具体需要渲染哪个模板，示例代码如下。 odd even 2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.2 微信小程序注册程序应用2.9 沙场大练兵：仿香哈菜谱微信小程序2.8.1import引用import可以在该文件中使用目标文件定义

20、的template。假如在 item.wxml 中定义了一个叫item的template，则示例代码如下。text在 index.wxml 中引用了 item.wxml，就可以使用item模板，示例代码如下。2.8.2include引用include可以将目标文件除了之外的整个代码引入，相当于是复制到include位置，示例代码如下。 body header footer 2.1 微信小程序目录结构介绍2.3 微信小程序注册页面的使用2.4 微信小程序如何绑定数据2.5 微信小程序条件渲染2.6 微信小程序列表渲染2.7 微信小程序定义模板2.8 微信小程序的引用功能目录contents2.2

21、 微信小程序注册程序应用2.9 沙场大练兵：仿香哈菜谱微信小程序沙场大练兵/香哈菜谱是围绕美食而做的一款小程序，在这里可以查看各式各样的菜谱以及制作方法。对于菜谱类App软件，用户使用的频次不高。当用户碰到不会做的菜式或者想做一些新的菜式时，才会去App软件查看，而微信小程序就可以满足这种低频使用的需要，如图所示。仿香哈菜谱微信小程序2.9.1底部标签导航设计仿香哈菜谱微信小程序的底部有5个导航标签：学做菜、头条、美食圈、消息、我的，标签导航选中时导航图标和导航文字都会变为红色，如下图所示。2.9 沙场大练兵：仿香哈菜谱微信小程序2.9.2宫格导航设计“学做菜”界面中海报轮播的图片，在微信小程

22、序里有专门的swiper滑块视图组件来实现这个效果，在以后的章节中我们会介绍它的使用。宫格导航有菜谱分类、视频、美食养生、闪购4个导航，如右图所示。2.9.3香哈头条初始化数据微信小程序作为客户端，它的数据来源于服务端。下面模拟一下服务端提供的香哈头条列表的数据，有了数据，页面才能动态地进行渲染。2.9沙场大练兵：仿香哈菜谱微信小程序2.9.4香哈头条列表渲染及绑定数据香哈头条里有菜谱的图片、美食名称、分类、浏览数量以及评论数量，如图右图所示。2.9.5香哈头条模板的引用如果香哈头条列表信息在很多页面都是同样的展现方式，就可以把它制作成模板，达到一次制作、多次使用的效果。2.9沙场大练兵：仿香哈菜谱微信小程序2.9.4香哈头条列表渲染及绑定数据