微信小程序开发图解案例教程第2章-微信小程序框架分析课件.pptx

1、微信小程序开发图解案例教程（附精讲视频）（第2版）刘刚刘刚 著著微信小程序目录结构介绍微信小程序目录结构介绍 微信小程序注册程序应用微信小程序注册程序应用 微信小程序注册页面的使用微信小程序注册页面的使用 微信小程序如何绑定数据微信小程序如何绑定数据 微微信小程序条件渲染信小程序条件渲染 微微信小程序列表渲染信小程序列表渲染 微微信小程序定义模板信小程序定义模板 微信小程序的引用功能微信小程序的引用功能 WXS小程序脚本语言小程序脚本语言 沙场大练兵：仿香哈菜谱微信小程序沙场大练兵：仿香哈菜谱微信小程序 小结小结 第第2 2章章 微微信小程序框架分析信小程序框架分析 微微信小程序目录结构可以分

2、为信小程序目录结构可以分为3 3个部分个部分框架全局文件、工具类框架全局文件、工具类文件和框架页面文件，如图文件和框架页面文件，如图2.12.1所示。所示。2.12.1微信小程序目录结构介绍微信小程序目录结构介绍图图2.1微信小程序框架目录微信小程序框架目录 框架框架全局文件必须放在项目的根目录中。全局文件必须放在项目的根目录中。框架全局文件包括框架全局文件包括4 4个文件：个文件：APP.JSAPP.JS小程序逻小程序逻辑文件（定义辑文件（定义全局全局数据以及定义函数文件）、数据以及定义函数文件）、APP.JSONAPP.JSON小程序公共设置文件、小程序公共设置文件、APP.WXSSAPP

3、.WXSS小小程序公共样式表、程序公共样式表、PROJECT.CONFIG.JSONPROJECT.CONFIG.JSON小程小程序项目个性化配置文件。它们对所有页面都有序项目个性化配置文件。它们对所有页面都有效，如表效，如表2.12.1所示。所示。2.1.12.1.1框架全局文件框架全局文件表表2.1框架全局文件框架全局文件1 1APP.JSAPP.JS小程序逻辑文件小程序逻辑文件 APP.JS APP.JS文件用来定义全局数据和函数的使用，它可以指定微信小程序文件用来定义全局数据和函数的使用，它可以指定微信小程序的生命周期函数的生命周期函数。生命周期生命周期函数可以理解为微信小程序自己定义

4、的函数，例如函数可以理解为微信小程序自己定义的函数，例如ONLAUNCHONLAUNCH（监听小程序初始化）、（监听小程序初始化）、ONSHOWONSHOW（监听小程序显示）、（监听小程序显示）、ONHIDEONHIDE（监听小程（监听小程序隐藏）等，在不同阶段不同场景可以使用不同的生命周期函数序隐藏）等，在不同阶段不同场景可以使用不同的生命周期函数。此外。此外，APP.JSAPP.JS中还可以定义一些全局的函数和数据，其他页面引用中还可以定义一些全局的函数和数据，其他页面引用APP.JSAPP.JS文件后文件后就可以直接使用，如图就可以直接使用，如图2.22.2所示。所示。图图2.2app.

5、js小程序逻辑小程序逻辑2 2APP.JSONAPP.JSON小程序公共设置文件小程序公共设置文件 APP.JSONAPP.JSON文件可以对文件可以对5 5个功能进行设个功能进行设置：配置页面路径、配置窗口表现、配置：配置页面路径、配置窗口表现、配置标签导航、配置网络置标签导航、配置网络超时超时、配置、配置DEBUGDEBUG模式。具体如图模式。具体如图2.32.3所示。所示。图图2.3app.json的的5个功能个功能（1 1）配置页面路径。页面路径定义了一个数组，存放多个页面的访）配置页面路径。页面路径定义了一个数组，存放多个页面的访问路径，它是进行页面访问的问路径，它是进行页面访问的必

6、要条件必要条件。如果在这里没有配置页面访。如果在这里没有配置页面访问路径，页面被访问时就会报错；在这里定义了页面访问路径，微信问路径，页面被访问时就会报错；在这里定义了页面访问路径，微信小程序框架就可以在页面文件夹下建立相应名称的文件夹以及文件，小程序框架就可以在页面文件夹下建立相应名称的文件夹以及文件，免去用户手动添加文件夹和文件的免去用户手动添加文件夹和文件的痛苦痛苦，如图，如图2.42.4所示。所示。图图2.4自动创建页面自动创建页面（2 2）配置窗口表现）配置窗口表现。如。如图图2.52.5所示。所示。图图2.5窗口表现窗口表现（3 3）配置标签导航。标签导航是很多移）配置标签导航。标

7、签导航是很多移动动APPAPP都会采用的一种导航方式，微信小都会采用的一种导航方式，微信小程序同样可以实现程序同样可以实现这样这样的效果，如图的效果，如图2.62.6所示。所示。图图2.6猫眼电影猫眼电影App标签导航标签导航 怎么怎么制作标签导航呢？我们需要在制作标签导航呢？我们需要在APP.JSONAPP.JSON文件里配置文件里配置TABBARTABBAR属属性性。TABBARTABBAR是一个对象，它可以是一个对象，它可以配置标签配置标签导航文字的默认颜色、选中导航文字的默认颜色、选中颜色，标签导航背景色以及上边框颜色颜色，标签导航背景色以及上边框颜色。上上边框颜色可以配置两种颜色边框

8、颜色可以配置两种颜色：BLACK/WHITEBLACK/WHITE。标签标签导航存放到导航存放到LISTLIST数组里面，数组里面，LISTLIST里的每个对象对应一个标签里的每个对象对应一个标签导航，每个对象里可以配置导航，每个对象里可以配置标签导航标签导航的路径、导航名称、默认图标以的路径、导航名称、默认图标以及选中图标，如图及选中图标，如图2.72.7所示。所示。图图2.7猫眼电影微信小程序标签导航配置猫眼电影微信小程序标签导航配置（4 4）配置网络超时。可以配置网络请求、文件上传、文件下载时最）配置网络超时。可以配置网络请求、文件上传、文件下载时最大的请求时间，超过这个时间，大的请求时

9、间，超过这个时间，则不再则不再请求。请求。（5 5）配置）配置DEBUGDEBUG模式。配置模式。配置DEBUGDEBUG模式可方便微信小程序开发者调试模式可方便微信小程序开发者调试开发程序，如图开发程序，如图2.82.8和图和图2.92.9所示所示为没有为没有开启开启DEBUGDEBUG模式和开启模式和开启DEBUGDEBUG模模式的调试信息对比。式的调试信息对比。图图2.8没有开启没有开启debug模式模式图图2.9开启开启debug模式模式 从从图图2.82.8和图和图2.92.9可以看出，开启可以看出，开启DEBUGDEBUG模式后，可以看到每一步模式后，可以看到每一步的调用情况、访问

10、路径以及错误信息的调用情况、访问路径以及错误信息，这样，这样更加方便开发者进行调试更加方便开发者进行调试工作。工作。APP.JSONAPP.JSON作为全局配置文件就是提供配置页面路径、配置窗口的作为全局配置文件就是提供配置页面路径、配置窗口的表现、配置底部标签导航、配置网络表现、配置底部标签导航、配置网络连接连接超时、配置超时、配置DEBUGDEBUG模式这些模式这些功能，配置也比较容易。功能，配置也比较容易。3 3APP.WXSSAPP.WXSS小程序公共样式表小程序公共样式表 APP.WXSSAPP.WXSS文件对文件对CSSCSS样式进行了扩展，和样式进行了扩展，和CSSCSS的使用方

11、式一样，类的使用方式一样，类选择器和行内样式的写法兼容大部分选择器和行内样式的写法兼容大部分CSSCSS样式，有一些样式，有一些CSSCSS样式在这里样式在这里是不起作用的。是不起作用的。APP.WXSSAPP.WXSS还形成了自己的风格，是对所有页面定义的还形成了自己的风格，是对所有页面定义的一个全局样式。一个全局样式。只要只要页面有全局样式里的页面有全局样式里的CLASSCLASS，就可以渲染全局样式里的效果；，就可以渲染全局样式里的效果；但如果页面又重新定义了这个但如果页面又重新定义了这个CLASSCLASS样式，则会把全局的覆盖掉，使样式，则会把全局的覆盖掉，使用自己的样式，如图用自己

12、的样式，如图2.102.10所示。所示。图图2.10小程序公共样式表小程序公共样式表4 4PROJECT.CONFIG.JSONPROJECT.CONFIG.JSON小程序项目个性化配置文件小程序项目个性化配置文件 在在使用微信小程序开发者工具时，开发者都会针对各自喜好做一使用微信小程序开发者工具时，开发者都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等。当换了另外一台计算机些个性化配置，例如界面颜色、编译配置等。当换了另外一台计算机重新安装工具的时候，用户还要重新配置。因此，小程序开发者工具重新安装工具的时候，用户还要重新配置。因此，小程序开发者工具在每个项目的根目录都会生成一个在

13、每个项目的根目录都会生成一个PROJECT.CONFIG.JSONPROJECT.CONFIG.JSON文件，用户文件，用户在工具上做的任何配置都会写入这个文件在工具上做的任何配置都会写入这个文件。重新安装重新安装工具或者换计算机工作时，工具或者换计算机工作时，用户用户只要载入同一个项目的只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。在在微信小程序框架目录里有一个微信小程序框架目录里有一个UTI

14、LSUTILS文件夹，它用来存放工具文件夹，它用来存放工具栏的栏的JSJS函数，例如可以放置一些日期函数，例如可以放置一些日期格式化格式化的函数、时间格式化的函的函数、时间格式化的函数等一些常用的函数数等一些常用的函数。定义定义完这些函数后，要通过完这些函数后，要通过MODULE.EXPORTSMODULE.EXPORTS将定义的将定义的函数名称函数名称注注册进来，在其他的页面才可以使用，图册进来，在其他的页面才可以使用，图2.112.11所示为时间格式化工具类所示为时间格式化工具类文件。文件。2.1.22.1.2工具类文件工具类文件图图2.11utils.js工具类文件工具类文件 一一个小程

15、序框架页面文件由个小程序框架页面文件由5 5个个文件组成，分别是文件组成，分别是JSJS页面逻辑、页面逻辑、JSONJSON页面配置、页面配置、WXMLWXML页面结构、页面结构、WXSWXS小程小程序序脚本语言、脚本语言、WXSSWXSS页面样式表，如表页面样式表，如表2.22.2所示。所示。2.1.32.1.3框架页面文件框架页面文件表表2.2框架页面文件框架页面文件 微微信小程序的框架页面文件，信小程序的框架页面文件，都放置在都放置在PAGESPAGES文件夹下面，如图文件夹下面，如图2.122.12所示。所示。图图2.12页面文件页面文件 每个每个页面都有一个独立的文件夹，比如日志页面

16、页面都有一个独立的文件夹，比如日志页面LOGSLOGS文件夹，它文件夹，它的下面放置的下面放置5 5个文件：个文件：LOGS.JSLOGS.JS进行进行业务业务路径处理；路径处理；LOGS.JSONLOGS.JSON进行页面进行页面配置，可以覆盖全局配置，可以覆盖全局APP.JSONAPP.JSON配置；配置；LOGS.WXMLLOGS.WXML配置页面结构，负责渲配置页面结构，负责渲染染页面页面；WXSWXS（WEIXIN?SCRIPTWEIXIN?SCRIPT）是小程序的一套脚本语言，）是小程序的一套脚本语言，LOGS.WXSLOGS.WXS结合结合WXMLWXML文件，可以构建出页面的结

17、构文件，可以构建出页面的结构；LOGS.WXSSLOGS.WXSS是针对是针对LOGS.WXMLLOGS.WXML页面的样式文件。页面的样式文件。猫眼猫眼电影底部标签导航有电影底部标签导航有4 4个标签：个标签：电影、影院、发现、我的，如图电影、影院、发现、我的，如图2.132.13所所示。示。2.1.42.1.4小试牛刀：制作猫眼电影底部标签导航小试牛刀：制作猫眼电影底部标签导航图图2.13猫眼电影底部标签导航猫眼电影底部标签导航（1 1）新建一个）新建一个MOVIEMOVIE项目，如图项目，如图2.142.14所示。所示。图图2.14添加项目添加项目（2 2）将准备好的底部标签导航图标拷贝

18、到）将准备好的底部标签导航图标拷贝到MOVIEMOVIE项目下面。项目下面。（3 3）打开）打开APP.JSONAPP.JSON配置文件，在配置文件，在PAGESPAGES数组里添加数组里添加4 4个页面路径个页面路径电影电影“PAGES/MOVIE/MOVIE”PAGES/MOVIE/MOVIE”、影院影院“PAGES/CINEMA/CINEMA”PAGES/CINEMA/CINEMA”、发现、发现“PAGES/FIND/FIND”PAGES/FIND/FIND”、我的、我的“PAGES/ME/ME”PAGES/ME/ME”，保存后会自动生成相，保存后会自动生成相应的页面文件夹；删除应的页面

19、文件夹；删除“PAGES/INDEX/PAGES/INDEX/INDEX”“PAGESINDEX”“PAGES/LOGS/LOGS”/LOGS/LOGS”页面路径以及对应的文件夹，如图页面路径以及对应的文件夹，如图2.152.15所示。所示。图图2.15配置页面路径配置页面路径（4 4）在）在WINDOWWINDOW数组里配置窗口导航背景颜色为红色（数组里配置窗口导航背景颜色为红色（#D53E37#D53E37），），导航栏文字为电影，字体颜色导航栏文字为电影，字体颜色设置设置为白色（为白色（WHITEWHITE），具体配置如），具体配置如图图2.162.16所示。所示。图图2.16窗口及导航

20、栏配置窗口及导航栏配置（5 5）在）在TABBARTABBAR对象里配置底部标签导航背景对象里配置底部标签导航背景色为灰色（色为灰色（#F5F5F5#F5F5F5），文字默认颜色为白色），文字默认颜色为白色（WHITEWHITE），文字），文字选中时为红色（选中时为红色（#D53E37#D53E37），），在在LISTLIST数组里配置底部标签导航对应的页面、数组里配置底部标签导航对应的页面、导航名称、默认时图标、导航名称、默认时图标、选中选中时图标，具体时图标，具体配置如图配置如图2.172.17所示。所示。图图2.17底部标签导航配置底部标签导航配置 这样这样就完成了猫眼电影底部标签导航的

21、就完成了猫眼电影底部标签导航的配置，单击不同的导航标签，可以切换显示配置，单击不同的导航标签，可以切换显示不同的页面，同时不同的页面，同时导航导航图标和导航文字会呈图标和导航文字会呈现为选中状态，如图现为选中状态，如图2.182.18所示。所示。图图2.18电影界面电影界面 APP.JSAPP.JS文件不仅可以定义全局函数和数据，还可以注册小程序文件不仅可以定义全局函数和数据，还可以注册小程序。在在APP()APP()函数里函数里可以完成可以完成小程序的注册，并指定其生命周期函数小程序的注册，并指定其生命周期函数。表表2.32.3所示为生命周期函数的定义。所示为生命周期函数的定义。2.22.2

22、微信小程序注册程序应用微信小程序注册程序应用表表2.3生命周期函数生命周期函数续表续表（1 1）ONLAUNCHONLAUNCH生命周期函数，用来监听小程序初始化，一旦初始化生命周期函数，用来监听小程序初始化，一旦初始化完成，就会触发该函数，这个生命周期函数只会触发一次。完成，就会触发该函数，这个生命周期函数只会触发一次。（2 2）ONSHOWONSHOW生命周期函数，用来监听小程序显示，微信小程序有前生命周期函数，用来监听小程序显示，微信小程序有前后台定义，当用户单击左上角关闭、按后台定义，当用户单击左上角关闭、按HOMEHOME键关闭或者突然来电话，键关闭或者突然来电话，微信小程序都没有销

23、毁，而是进入后台，当再次进入微信或者小程序微信小程序都没有销毁，而是进入后台，当再次进入微信或者小程序的时候就会触发的时候就会触发ONSHOWONSHOW这个函数。只要程序启动或者从后台进入前台这个函数。只要程序启动或者从后台进入前台都会触发该函数。都会触发该函数。（3 3）ONHIDEONHIDE生命周期函数，用来监听小程序隐藏，一旦微信小程序生命周期函数，用来监听小程序隐藏，一旦微信小程序从前台进入后台，就会触发该函数。从前台进入后台，就会触发该函数。（4 4）ONERRORONERROR生命周期函数，用来监听小程序脚本或者生命周期函数，用来监听小程序脚本或者APIAPI是否发生是否发生错

24、误，发生错误时返回错误信息。错误，发生错误时返回错误信息。（5 5）ONPAGENOTFOUNDONPAGENOTFOUND生命周期函数，当要打开的页面不存在时，会生命周期函数，当要打开的页面不存在时，会回调这个监听函数。回调这个监听函数。在在每个页面文件夹里，都有一个页面对应的每个页面文件夹里，都有一个页面对应的JSJS文件，比如日志文件，比如日志LOGSLOGS文件夹，对应的就是文件夹，对应的就是LOGS.JSLOGS.JS文件，这个文件里的文件，这个文件里的PAGE()PAGE()函数用函数用来注册页面来注册页面。接受接受一个一个OBJECTOBJECT参数，其指定页面的初始数据、生命周

25、期函数、参数，其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里事件处理函数等页面的所有业务逻辑处理都放在这个文件里。OBJECT OBJECT参数如表参数如表2.42.4所示。所示。2.32.3微信小程序注册页面的使用微信小程序注册页面的使用表表2.4object参数说明参数说明 DATADATA为页面初始化数据，初始化数据将作为页面的第一次渲染为页面初始化数据，初始化数据将作为页面的第一次渲染。DATA DATA将会以将会以JSONJSON的形式由逻辑层传至渲染层，所以其数据必须是的形式由逻辑层传至渲染层，所以其数据必须是可以转成可以转成JSONJSO

26、N的格式：字符串、数字、布尔值、对象或数组的格式：字符串、数字、布尔值、对象或数组。渲染渲染界面可以通过界面可以通过WXMLWXML对数据进行绑定。对数据进行绑定。2.3.12.3.1页面初始化数据页面初始化数据示例代码：示例代码：MOTTO=USER-MOTTOMOTTOPAGE(PAGE(DATA:DATA:MOTTO:HELLOMOTTO:HELLO WORLD,WORLD,USERINFOUSERINFO:)（1 1）ONLOADONLOAD页面加载：一个页面只会调用一次，接收页面参数可以页面加载：一个页面只会调用一次，接收页面参数可以获取获取WX.NAVIGATETOWX.NAVIG

27、ATETO和和WX.REDIRECTTOWX.REDIRECTTO及及中中的的QUERYQUERY。（2 2）ONSHOWONSHOW页面显示：每次打开页面都会调用一次。页面显示：每次打开页面都会调用一次。2.3.22.3.2生命周期函数生命周期函数（3 3）ONREADYONREADY页面初次渲染完成：一个页面只会调用页面初次渲染完成：一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交一次，代表页面已经准备妥当，可以和视图层进行交互，对界面的设置如互，对界面的设置如WX.SETNAVIGATIONBARTITLEWX.SETNAVIGATIONBARTITLE请在请在ONREAD

28、YONREADY之后设置。之后设置。（4 4）onHideonHide页面隐藏：当调用页面隐藏：当调用navigateTonavigateTo或底部或底部tabtab切换时调用。切换时调用。（5 5）onUnloadonUnload页面卸载：当调用页面卸载：当调用redirectToredirectTo或或navigateBacknavigateBack的时的时候调用。候调用。（1 1）ONPULLDOWNREFRESHONPULLDOWNREFRESH下拉刷新：监听用户下拉刷新事件，需要在下拉刷新：监听用户下拉刷新事件，需要在CONFIGCONFIG的的WINDOWWINDOW选项中选项中开

29、启开启ENABLEPULLDOWNREFRESHENABLEPULLDOWNREFRESH。当处理完数据。当处理完数据刷新后，刷新后，WX.STOPPULLDOWNREFRESHWX.STOPPULLDOWNREFRESH可以停止当前页面的下可以停止当前页面的下拉刷新拉刷新。（2 2）ONSHAREAPPMESSAGEONSHAREAPPMESSAGE用户分享：只有定义了此事件处理函数，右用户分享：只有定义了此事件处理函数，右上角菜单才会显示上角菜单才会显示“分享分享”按钮，用户点击按钮，用户点击“分享分享”按钮的时候会调按钮的时候会调用此函数，此事件需要返回一用此函数，此事件需要返回一个个O

30、BJECTOBJECT参数，用于自定义分享内容。参数，用于自定义分享内容。OBJECTOBJECT参数说明如表参数说明如表2.52.5所示。所示。2.3.32.3.3页面相关事件处理函数页面相关事件处理函数表表2.5分享参数分享参数 微微信小程序的页面路由都是由微信小程序框架来管理的，框架以栈信小程序的页面路由都是由微信小程序框架来管理的，框架以栈的形式维护了所有页面的形式维护了所有页面。栈栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表殊线性表。它它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后按照后进先出的

31、原则存储数据，先进入的数据被压入栈底，最后进入的数据在栈顶，需要读数据的时候从栈顶开始弹出数据（最后一个进入的数据在栈顶，需要读数据的时候从栈顶开始弹出数据（最后一个数据被第一个读出来）。数据被第一个读出来）。2.3.42.3.4页面路由管理页面路由管理 微微信小程序页面交互也是通过栈来完成的，微信小程序初始化时，信小程序页面交互也是通过栈来完成的，微信小程序初始化时，新页面入栈；打开新页面时，新页面入栈；页面重定向时，当前页面新页面入栈；打开新页面时，新页面入栈；页面重定向时，当前页面出栈，新页面入栈；页面返回时，页面不断出栈，直到新页面入栈；出栈，新页面入栈；页面返回时，页面不断出栈，直到

32、新页面入栈；TABTAB切换时，页面全部出栈，只留下新的切换时，页面全部出栈，只留下新的TABTAB页面；重新加载时，页面页面；重新加载时，页面全部出栈，只留下新的页面。全部出栈，只留下新的页面。对于对于路由的触发方式以及页面生命周期函数如表路由的触发方式以及页面生命周期函数如表2.62.6所示。所示。表表2.6路由的触发方式及页面生命周期函数路由的触发方式及页面生命周期函数 除了除了初始化数据和生命周期函数，初始化数据和生命周期函数，PAGE?PAGE?中还可以定义一些特殊中还可以定义一些特殊的函数：事件处理函数的函数：事件处理函数。在在渲染层的渲染层的组件组件中可以加入事件绑定，当达到触发

33、事件时，就会中可以加入事件绑定，当达到触发事件时，就会执行执行PAGEPAGE中中定义的事件处理函数。定义的事件处理函数。2.3.52.3.5自定义函数自定义函数 PAGE.PROTOTYPE.SETDATAPAGE.PROTOTYPE.SETDATA()()设值函数用于将数据从逻辑层发送到视设值函数用于将数据从逻辑层发送到视图层，同时改变对应的图层，同时改变对应的THIS.DATATHIS.DATA的值。的值。SETDATASETDATA()()参数格式：接受一个对象，以参数格式：接受一个对象，以KEYKEY，VALUEVALUE的形式表示将的形式表示将THIS.DATATHIS.DATA中

34、的中的KEYKEY对应的值改变成对应的值改变成VALUEVALUE。其中其中KEYKEY非常灵活，以数据路径的形式给出，如非常灵活，以数据路径的形式给出，如ARRAY2.MESSAGEARRAY2.MESSAGE，A.B.C.DA.B.C.D，并且不需要在，并且不需要在THIS.DATATHIS.DATA中预先定义。中预先定义。2.3.62.3.6SETDATASETDATA设值函数设值函数 WXMLWXML页面里的动态数据，都是来自页面里的动态数据，都是来自JSJS文件文件PAGEPAGE的的DATADATA，数据绑定，数据绑定就是通过双大括号（就是通过双大括号（）将变量包起来，在）将变量包

35、起来，在WXMLWXML页面里将数据值显页面里将数据值显示出来。示出来。2.42.4微信小程序如何绑定数据微信小程序如何绑定数据示例代码如下：示例代码如下：INDEX.WXMLINDEX.WXMLMESSAGEMESSAGEINDEX.JSINDEX.JSPAGE(PAGE(DATA:DATA:MESSAGE:HELLOMESSAGE:HELLO MINA!MINA!)组件组件属性绑定，是将属性绑定，是将DATADATA里的数据绑定到微信小程序的组件上，里的数据绑定到微信小程序的组件上，示例代码如下：示例代码如下：PAGE(PAGE(DATA:DATA:ID:0ID:0)2.4.12.4.1组

36、件属性绑定组件属性绑定 控制控制属性绑定用来进行属性绑定用来进行IFIF语句条件判断，如果满足条件，则执行，语句条件判断，如果满足条件，则执行，否则不执行，示例代码如下：否则不执行，示例代码如下：VIEW=CONDITIONPAGE(PAGE(DATA:DATA:CONDITION:TRUECONDITION:TRUE)2.4.22.4.2控制属性绑定控制属性绑定 关键字关键字绑定常用于组件的一些关键字，像复选框组件一样，绑定常用于组件的一些关键字，像复选框组件一样，CHECKEDCHECKED关关键字如果等于键字如果等于TRUETRUE，则代表复选框选中；如果等于，则代表复选框选中；如果等于

37、FALSEFALSE，则代表不选中复，则代表不选中复选框，示例代码如下：选框，示例代码如下：不要不要直接写直接写CHECKED=FALSECHECKED=FALSE，其计算结果是一个字符串，转成，其计算结果是一个字符串，转成BOOLEANBOOLEAN类型后代表真值。类型后代表真值。2.4.32.4.3关键字绑定关键字绑定 可以可以在在内进行简单的运算，小程序支持以下几种方式进行运算：内进行简单的运算，小程序支持以下几种方式进行运算：1 1三元运算三元运算 HIDDENHIDDEN2.4.42.4.4运算运算2 2数学运算数学运算A+BA+B+C+D+C+DPAGE(PAGE(DATA:DAT

38、A:A:1,A:1,B:2,B:2,C:3C:3)VIEWVIEW中的内容为中的内容为3+3+D3+3+D。3 3逻辑判断逻辑判断VIEW 5=LENGTH54 4字符串运算字符串运算HELLO+NAMEHELLO+NAMEPAGE(PAGE(DATA:DATA:NAME:MINANAME:MINA )5 5数据路径运算数据路径运算OBJECT.KEYOBJECT.KEYARRAY0ARRAY0PAGE(PAGE(DATA:DATA:OBJECT:OBJECT:KEY:HELLOKEY:HELLO,ARRAY:MINAARRAY:MINA)天气天气微信小程序，用来显示温度、微信小程序，用来显示

39、温度、最低温度、最高温度以及其他天气情况，最低温度、最高温度以及其他天气情况，下面通过数据绑定的方式下面通过数据绑定的方式，来，来显示天气显示天气情况，如图情况，如图2.192.19所示。所示。2.4.52.4.5小试牛刀：天气微信小程序小试牛刀：天气微信小程序图图2.19天气微信小程序天气微信小程序（1 1）创建一个）创建一个WEATHERWEATHER项目，如图项目，如图2.202.20所示。所示。图图2.20weather项目项目（2 2）进入）进入INDEX.WXMLINDEX.WXML、INDEX.JSINDEX.JS、INDEX.WXSSINDEX.WXSS文件，清空所有的内容，文

40、件，清空所有的内容，进入进入APP.JSONAPP.JSON，修改导航栏标题为，修改导航栏标题为“中国天气网中国天气网”。（3 3）进入）进入INDEX.WXMLINDEX.WXML，进行当天天气情况的界面布局，包括温度、最，进行当天天气情况的界面布局，包括温度、最低温度和最高温度、天气情况、城市、星期、风向情况，代码如下：低温度和最高温度、天气情况、城市、星期、风向情况，代码如下：VIEW CLASS=（4 4）进入）进入INDEX.JSINDEX.JS，在，在DATADATA里提供天气的数据，让这些数据在界面里提供天气的数据，让这些数据在界面里显示出来，代码如下：里显示出来，代码如下：PA

41、GE(PAGE(DATA:DATA:TEMP:4,TEMP:4,LOW:-1,LOW:-1,HIGH:10,HIGH:10,TYPE:TYPE:晴晴,CITY:CITY:北京北京,WEEK:WEEK:星期二星期二,WEATHER:WEATHER:无持续风向微风级无持续风向微风级 )（5 5）进入）进入INDEX.WXMLINDEX.WXML，将，将DATADATA里提供的天气数据绑定到页面里，代里提供的天气数据绑定到页面里，代码如下：码如下：TEMPTEMPVIEW CLASS=LOW/HIGHLOW/HIGHTYPETYPECITYCITYWEEKWEEK WEATHER=WEATHERWE

42、ATHER 界面界面效果如图效果如图2.212.21所示。所示。图图2.21天气界面天气界面（6 6）进入）进入INDEX.WXSSINDEX.WXSS，为，为INDEX.WXMLINDEX.WXML添添加样式，美化页面。加样式，美化页面。添加添加样式后界面效果如图样式后界面效果如图2.222.22所示。所示。图图2.22添加样式添加样式2.5.12.5.1WX:IFWX:IF判断单个组件判断单个组件 在在微信小程序框架里，使用微信小程序框架里，使用WX:IFWX:IF=CONDITION=CONDITION来判断是否来判断是否需要渲染该代码块，示例代码如下：需要渲染该代码块，示例代码如下：V

43、IEW TRUE=CONDITIONTRUE使用使用WX:ELIFWX:ELIF和和WX:ELSEWX:ELSE来添加一个来添加一个ELSEELSE块：块：VIEW 51=LENGTH51VIEW 22=LENGTH22VIEW 332.52.5微信小程序条件渲染微信小程序条件渲染 WX:IFWX:IF是一个控制属性，需要将它添加到一个标签上。但是如果是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，就我们想一次性判断多个组件标签，就可以可以使用一个使用一个标签将多标签将多个组件包装起来，并在上面使用个组件包装起来，并在上面使用WX:IFWX:IF控制属性，示例代

44、码如下：控制属性，示例代码如下：BLOCK=TRUEVIEW1VIEW1VIEW2VIEW2 BLOCK/不是一个组件，它仅仅是一个包装元素，不会在页面中不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。做任何渲染，只接受控制属性。2.5.22.5.2BLOCK BLOCK WX:IFWX:IF 判断多个组件判断多个组件2.6.12.6.1WX:FORWX:FOR 列表渲染单个组件列表渲染单个组件 在在组件上使用组件上使用WX:FORWX:FOR控制属性绑定一个数组，即可使用数组中各控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件项的数据重复渲染该组件。数

45、组数组当前项的下标变量名默认为当前项的下标变量名默认为INDEXINDEX，数组当前项的变量名默，数组当前项的变量名默认为认为ITEMITEM。2.62.6微信小程序列表渲染微信小程序列表渲染 WX:FORWX:FOR应用在某一个组件上，如果想渲染一个包含多节点的结构应用在某一个组件上，如果想渲染一个包含多节点的结构块，这时块，这时WX:FORWX:FOR需要应用在需要应用在BLOCK/标签标签上，示例代码如下：上，示例代码如下：BLOCK=1,2,3INDEX:INDEX:ITEMITEM2.6.22.6.2BLOCK BLOCK WX:FORWX:FOR 列表渲染多个组件列表渲染多个组件

46、如果如果列表中项目的位置会动态改变或者有新的项目添加到列表中，列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如并且希望列表中的项目保持自己的特征和状态（如中的输入中的输入内容，内容，的选中状态），需要的选中状态），需要使用使用WX:KEYWX:KEY来来指定列表中项目指定列表中项目的唯一标识符。的唯一标识符。WX:KEYWX:KEY的值以以下两种形式提供。的值以以下两种形式提供。2.6.32.6.3WX:KEYWX:KEY 指定唯一标识符指定唯一标识符（1 1）字符串：代表在）字符串：代表在FORFOR循环的循环的ARRAYARRAY中中ITE

47、MITEM的某个的某个PROPERTYPROPERTY，该，该PROPERTYPROPERTY的值需要是列表中唯一的字符串或数字，且不能动态改变。的值需要是列表中唯一的字符串或数字，且不能动态改变。（2 2）保留关键字：）保留关键字：*THISTHIS代表在代表在FORFOR循环中的循环中的ITEMITEM本身，这种表示本身，这种表示需要需要ITEMITEM本身是一个唯一的字符串或者数字，当数据改变触发渲染本身是一个唯一的字符串或者数字，当数据改变触发渲染层重新渲染的时候，会校正带有层重新渲染的时候，会校正带有KEYKEY的组件，框架会确保它们被重的组件，框架会确保它们被重新排序，而不是重新创

48、建，以确保组件保持自身的状态，并且提高新排序，而不是重新创建，以确保组件保持自身的状态，并且提高列表渲染时的效率。列表渲染时的效率。WXMLWXML提供模板（提供模板（TEMPLATETEMPLATE）功能，可以把一些共用的、复用的代）功能，可以把一些共用的、复用的代码，在模板中定义代码片段，然后在不同的地方调用，以达到一次编码，在模板中定义代码片段，然后在不同的地方调用，以达到一次编写，多次直接使用的效果。写，多次直接使用的效果。2.72.7微信小程序定义模板微信小程序定义模板 在在内定义代码片段，使用内定义代码片段，使用NAMENAME属性，作为模板的名属性，作为模板的名字，示例代码如下：

49、字，示例代码如下：TEMPLATE NAME=INDEX:INDEX:MSGMSGTIME:TIMETIME:TIME2.7.12.7.1定义模板定义模板 在在WXMLWXML文件里，使用文件里，使用ISIS属性，声明需要使用的模板，然后将模板属性，声明需要使用的模板，然后将模板所需要的所需要的DATADATA传入，示例代码如下：传入，示例代码如下：TEMPLATE IS=ITEM/PAGE(PAGE(DATA:DATA:ITEM:ITEM:INDEX:0,INDEX:0,MSGMSG:THIS IS A TEMPLATE,:THIS IS A TEMPLATE,TIME:2018-06-13

50、TIME:2018-06-13 )2.7.22.7.2使用模板使用模板 WXMLWXML提供两种文件引用方式：提供两种文件引用方式：IMPORTIMPORT和和INCLUDEINCLUDE。两者两者的区别在于：的区别在于：IMPORTIMPORT引用模板文件，引用模板文件，INCLUDEINCLUDE将引用整个除将引用整个除了了文件。文件。2.82.8微信小程序的引用功能微信小程序的引用功能2.8.12.8.1IMPORTIMPORT引用引用 IMPORTIMPORT可以在该文件中使用目标文件定义的可以在该文件中使用目标文件定义的TEMPLATETEMPLATE。2.8.22.8.2INCLU