微信小程序开发PPT完整全套教学课件

第一章

微信小程序入门

微信小程序开发课件的附件-程序源代码请联系索取CONTENT目录1.1微信小程序概述1.2注册小程序账号1.3小程序信息的完善1.4小程序AppID1.5小程序的开发工具1.6开发者工具界面的使用1.7创建第一个微信小程序微信小程序概述1.1chapter一、小程序简介

现在，生活中随处都应用到微信小程序。打开不同的微信小程序，如图1.1所示，点击右上角“…”可以进行转发、添加到我的小程序、取消等。点击右上角“⊙”，则可以关闭微信小程序。

只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。同时，小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。

微信小程序也被简称为小程序，其英文名称是MiniProgram。它是一种存在于微信内部的轻量级应用程序。微信研发团队在其官方网站上有一段关于微信小程序的介绍:“小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内部被便捷地获取和传播，同时具有出色的使用体验。”一、小程序简介二、小程序的诞生微信创始人张小龙选择在2017年1月9日发布了小程序。2017年1月9日是iPhone诞生的十周年，为了向乔布斯致敬，张小龙选在这天发布了“小程序”，自发布伊始小程序就备受瞩目，赞赏与唱衰的声音不绝于耳。二、小程序的诞生

微信一开始对小程序的解释：小程序是一种不需要下载安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或搜一搜就可以打开应用，也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。二、小程序的诞生2018微信公开课上，张小龙为小程序做了更精准的定义。小程序作为一个信息载体，是万事万物的表达方式和访问方式，最终用户在应用场景中通过小程序立即触达。简单地说，微信小程序就是把你的店开到微信上去，不管是饭店、KTV、酒店，还是网店、装修等服务，都可以搬到小程序上，微信小程序入口如图所示。二、小程序的诞生小程序适合开发轻量级的应用，比H5能承载得更多，但比APP又更少。比如：（1）工具类：滴滴打车、美团、小打卡等。（2）资讯类：网易新闻、微博、豆瓣等。（3）电商：京东、网易严选、拼多多等。（4）游戏：跳一跳、头脑风暴、斗地主等。

但有些程序是不适合做成小程序的。比如：原神、王者荣耀、和平精英、PUBG等游戏APP。三、小程序的优点在互联网发展迅速的时代中，APP早已是人们日常生活中十分常见的，而小程序的诞生也更便捷了人们使用的方式。小程序发展得如此迅猛，下面来说说它的优点。（1）因为小程序是集合在微信上的功能，所以并不需要安装或下载，与此同时对于许多用户来说，小程序不占用手机的内存，且也不受手机系统的限制，使用起来特别快捷。（2）小程序的开发成本比较低，周期也较短，像开发其他一个APP需要大量的资金，小程序的成本一般情况下在几千元至几万元之间，因此小程序几乎人人都用得起，使用效果和APP也差不多。（3）公众号与小程序的嫁接，看似公众号与小程序是关联关系，但是公众号的功能早已经停止了更新，相反小程序的功能还在不断发展，不难看出小程序在将来的某一天必将取代公众号。四、小程序的发展前景

在未来的发展中，小程序将会更加方便、快捷，注册申请的渠道也更加快捷、方便，与此同时，还会进一步加强第三方平台的合作，如果能够开放第三方开发平台，那么它将为小程序的开发提供更大的后方支援。并且随着小程序的日臻完善，小程序的开发者将能够获得更大的权限支持，由此可见，小程序在未来的发展空间中是相当巨大的，并且对于企业进行小程序制作的优势也将会进一步凸显出来。小程序传统产业的代表，如图所示。四、小程序的发展前景

小程序可以使企业和用户更好地交流，也能够实现用户更好的转化，所以对企业来说小程序可以带来可观的利润和流量。随着微信开放的功能的不断增多，那么一些小程序也会不断地完善自己，开放一些功能且不断得到匹配，这样也就提供了更多的接口能力，从而能够方便开发者进行深度地挖掘。相信未来小程序也将具备更多的功能，那么企业所能实现的功能也会随着增加，这对于其未来发展有着至关重要的作用，同时也能推动微信的发展。小程序互联网公司的代表，如图所示。四、小程序的发展前景

小程序将会与其他行业有更为友好的链接，小程序的发展是在微信的用户发展基础上而发展的，这样才能够用微信更好地结合，从而可以实现更多的功能。因此，小程序在未来不仅方便企业与用户，也会方便企业与企业之间、用户与用户之间的交流。注册小程序账号1.2chapter一、登录微信公众平台官网

访问微信公众平台官网首页（），如图所示。一、登录微信公众平台官网

如果第一次使用微信小程序，则需要注册小程序账号。单击“立即注册”链接，则出现如图所示的窗口。在出现的窗口中单击“小程序”链接，然后按照注册向导就可以完成小程序账号的注册，在注册小程序账号之前应先准备好一个个人邮箱。二、填写账号信息

小程序的正式注册页面包含3个需要填写的信息，即邮箱账号信息、密码和确认密码、验证码，在“注册”前还需勾选同意协议条款选项，如图所示。三、邮箱激活在提交注册后会看到邮箱激活提醒，此时页面效果如图所示。三、邮箱激活登录对应的注册邮箱查看激活邮件，如图所示。四、信息登记

邮箱账号激活后，就可以进入信息登记页面完成信息，如图所示。

注册的时候，先选择个人用户即可。目前为止是足够了。如果你有工商营业执照，也可以创建企业账号。企业账号能拥有的功能会更多，比如支付等。注册完后，后面会出现一个二维码，让你扫描这个二维码来绑定你的微信账号。一个微信账号只能绑定5个小程序账号。四、信息登记

注册国家/地区保持默认内容“中国大陆”，然后根据实际情况进行主体类型的选择。目前小程序允许注册的主体类型共有5种，即个人、企业、政府、媒体及其他组织，如表所示。账号主体类型解释个人必须是年满18岁以上的微信实名用户，并且具有国内身份信息企业企业、分支机构、个体工商户或企业相关品牌政府国内各级、各类政府机构/事业单位，以及具有行政职能的社会组织等，主要覆盖公安机构、党团机构、司法机构、交通机构、旅游机构、工商税务机构、市政机构等媒体报纸、杂志、电视、电台、通讯社等其他组织不属于政府、媒体、企业或个人的其他类型四、信息登记

选择“个人”类型后，页面下方将自动出现主体信息登记表单，如图所示。

开发者需要填写真实姓名、身份证号和管理员手机号（一个手机号码只能注册5个小程序），然后单击“获取验证码”按钮等待手机短信，在收到的短信中会提供一个6位验证码，验证完成后会提示。四、信息登记输入身份证姓名、身份证号码、管理员手机号码后，单击“获取验证码”，用户会自动收到一条短信，如图所示。注意：验证码必须要在10分钟之内填写完成，否则会失效后需重新获取。四、信息登记

填写完成后，会在“管理员身份验证”一栏中自动出现一个二维码，如图所示。四、信息登记

身份验证成功后，单击“继续”按钮，进入下一步，系统会弹出一个提示框，让开发者进行最后的信息确认，如图所示。四、信息登记

最后一步，单击“确认”按钮完成主体信息的确认，如图所示。五、登录管理页面

通过腾讯服务器验证后，可以进入页面进行登录了，登录后需要利用微信扫描二维码进行身份验证，登录后的界面如图所示，登录后就可以直接进行小程序的后续管理工作。小程序信息的完善1.3chapter一、完善小程序信息

在账号注册完成后还需完善小程序的基本信息，如图所示。一、完善小程序信息

单击“填写”按钮弹出“填写小程序信息”界面，如图所示。一、完善小程序信息

填写“小程序名称”、“小程序头像”、“小程序介绍”和“小程序服务类目”这四个主要的信息，如表所示。填写信息填写要求修改次数小程序名称小程序名称需要控制在4~30个字符，并且不得与平台内已经存在的其他账号名称重名发布前有两次改名的机会，两次改名机会用完后必须先发布再通过微信认证进行改名小程序头像图片格式只能是png、bmp、jpeg、jpg和gif中的一种，并且文件不得大于2MB；注意头像图片不允许涉及政治敏感与色情内容；图片最后会被展示为圆形效果的头像每个月可修改5次小程序介绍字数必须控制在4~120个字符，介绍内容不得含有国家相关法律或法规禁止的内容每个月可申请修改5次小程序服务类目服务类目分为两级，每一级都必须填写，不可以为空；服务类目不得少于1个，不得多于5个每个月可修改1次一、完善小程序信息

全部填写完毕后就可以点击最下方的“提交”按钮，提交小程序的基本信息后就可以看到如图所示的界面。

二、管理成员

完善小程序信息后，单击如上图所示小程序信息完成界面的“添加开发”按钮，会打开“成员管理”界面，如图所示。二、管理成员小程序成员管理包括对小程序项目成员及体验成员的管理。◎

项目成员：表示参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。◎

体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。在小程序管理后台进入成员管理入口后，对管理员和项目成员进行管理。小程序AppID1.4chapter一、查看小程序AppID

注册完小程序账号后，就可以查看AppID了。在后期发布小程序中，就必须要用到AppID。在点击左侧的“开发”链接，在出现的右侧界面中点击“开发设置”链接，就可以查看自己的AppID了，如图所示。

即使有了AppID，也不能立即发布小程序，还需要进行小程序基本信息的设置。在页面中进行诸如小程序名称、小程序头像等内容的设置，设置完成后的界面如图所示。二、设置小程序信息小程序的开发工具1.5chapter一、下载开发工具

在完成准备工作之后就可以进行小程序的开发了，小程序具有官方提供的专属开发工具——“微信开发者工具”，简称“开发者工具”。

打开页面，找到“小程序”—“开发”—“下载”—“工具”栏，进入微信开发者工具下载界面，如图所示。一、下载开发工具

用户根据自己的实际情况选择对应的下载地址。在这里以Windows64版本为例，进行下载，下载完成后用户会获得一个EXE应用程序文件，如图所示。

该图中的“1.05.2106300”为软件版本号，“_x64”表示Windows64位软件。用户可以根据文件名再次确认是否下载了正确的版本。

确认下载版本无误后，双击该文件进行开发者工具的安装，安装过程如图所示。二、安装开发工具三、开发者工具的登录

安装完毕后，就会在桌面上有一个“微信开发者工具”的图标。

微信web开发者工具在使用开发者微信账号登录后，才可以进入小程序的开发者工具进行开发。双击“微信开发者工具”图标，弹出二维码扫描页面，如图所示。三、开发者工具的登录

开发者用手机微信扫描PC端二维码进行身份确认，单击手机微信右上角的加号出现的下拉菜单，选择“扫一扫”选项进行二维码扫描；扫码成功后跳转到“微信登录”的提示页面，单击“确认登录”按钮即可，如图所示。三、开发者工具的登录

登录后的界面如图所示。如果想直接打开一个最新建立或打开过的项目，直接选择编辑、调试小程序即可。三、开发者工具的登录

如果想新建一个项目，则点击“+”图标，就会出现“创建小程序”界面，如图所示。

如果创建小程序，在“项目名称”中输入项目名，然后输入“目录”的同时更改了“项目名称”，然后单击AppID后的“测试号”，最后单击“确定”按钮。三、开发者工具的登录

如果想要打开某一个项目，就选择界面最上面的“导入项目”按钮，然后单击“目录”最后侧的箭头，选择要打开项目的文件夹即可。三、开发者工具的登录

单击“新建”按钮后，会打开微信开发者工具的开发界面，如图所示。开发者工具界面的使用1.6chapter任务描述

开发者工具主要由菜单栏、工具栏、模拟器、编辑器和调试器5个部分组成，如图所示。

菜单栏工具栏模拟器编辑器调试器

菜单栏中主要包括项目、文件、编辑、工具、界面、设置和微信开发者工具等菜单栏，它们的下拉菜单选项，如图所示。一、菜单栏二、工具栏工具栏分为左侧区域、中间区域和右侧区域。左侧区域中间区域右侧区域三、模拟器

模拟器面板可以切换虚拟手机型号、显示比例、模拟网络连接状态、模拟手机Home和返回键操作、音量开关、独立显示以及改变模拟器位置，如图所示。四、编辑器

编辑器主要包含项目完整的目录结构区域和代码区域，如图所示。

目录结构区代码区四、编辑器

在代码区中，只需要输入前面几个字母，就可以出现相关组件的代码提示，此时用键盘方向键选择正确的内容，然后按回车键即可全部生成。五、调试器

调试器可以在PC段预览小程序或者在手机端调试小程序时使用，用于实时查看小程序运行时的后台输出、网络状况、数据存储等内容变化，如图所示。第一个微信小程序1.7chapter一、任务描述

设计一个小程序，小程序运行后在界面上显示一句话："HelloWorld!"

本任务涉及了view组件。该组件是微信小程序的基本组件，也是一个容器组件，用于布局或显示相关信息。二、导入知识点三、实现效果

根据任务描述制作调试运行后可以做出如图所示的效果。在模拟器上运行的效果如图(a)所示在真机上运行的效果如图(b)所示。

(a)模拟器运行效果

(b)真机运行效果四、任务实现（1）新建项目HelloWorld；（2）编写index.wxml文件代码；（3）编写app.wxss文件代码。

使用了样式.container，使字体红色、字体大小42px、居中。五、案例运行（1）代码编写完成后，点击“编译”按钮或按下【Ctrl+S】组合键，即可看到如图所示的模拟器中的运行结果。五、案例运行（2）如果想通过真机查看运行结果，则可以点击右上角的“预览”按钮，此时会弹出二维码，利用手机微信扫码可以直接在手机上查看运行结果，如图所示。感

谢

聆

听第二章

小程序逻辑层

微信小程序开发CONTENT目录2.12.2小程序全局配置文件小程序tabBar栏2.32.4小程序逻辑文件小程序生命周期执行顺序2.52.6setData视图渲染变量和函数的作用域及模块化小程序全局配置文件2.1chapter一、任务描述

开发者根据实际需要，重新修改定义全局配置文件app.json中的window属性，修改window属性中各种样式实现自己想要的效果。

pages用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。小程序中新增/减少页面，都需要对pages数组进行修改。

小程序的目录结构主要包含项目配置文件、主体文件、页面文件和其他文件。本任务将基于任务1.7创建第一个微信小程序的项目，对代码文件的构成展开分析。开发目录如图所示。二、导入知识点二、导入知识点

项目配置文件是project.config.json，每个小程序在新建时都会自动生成一个project.config.json文件，该文件直接位于项目根目录下，如左图所示。

其内部代码可用来定义小程序的项目名称、AppID等内容，如右图所示。

1.项目配置文件二、导入知识点

小程序主体文件名称均为app，同样直接位于项目根目录下，如图所示。2.主体文件

二、导入知识点2.主体文件

主体文件app根据后缀名不同分为3种类型的文件分别是app.json、app.js和app.wxss。

app.json是小程序的全局配置文件，主要包含了小程序所有页面文件的路径地址、导航栏样式等，必填文件，如图所示。二、导入知识点2.主体文件

小程序项目主要包含了pages和window两个属性。事实上，除了pages和window，app.json还可以配置tabBar、networkTimeout及debug等属性，这些属性的具体说明，如表所示。属性类型说明pagesStringArray必填属性，用于记录小程序所有页面文件的路径地址。其中如果pages中包含多个页面，pages/index/index将默认为小程序的初始页面windowObject可选属性，用于设置页面的窗口表现，例如导航栏的背景颜色、标题文字内容以及文字颜色等tabBarObject可选属性，用于设置页面底部tab工具条的表现networkTimeoutObject可选属性，用于设置各种网络请求的超时时间debugBoolean可选属性，用于设置是否开启调试模式二、导入知识点2.主体文件（1）pages属性：对应的值是数组形式，数组的每一项都是以字符串形式记录小程序页面的路径地址。表示当前共有两个页面，分别是index和log页面，并且其中的index页面被默认为小程序的初始页面。

"pages":[

"pages/index/index",

"pages/logs/logs"

],二、导入知识点2.主体文件(2）window属性：对应的值是对象形式，其中包括了小程序页面顶端导航栏的背景颜色、标题文字内容以及文字颜色等属性，具体可以包含的对象属性，如表所示。属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，默认值表示黑色，也可以简写为#000navigationBarTextStyleStringwhite导航栏标题颜色，默认值表示白色，该属性值只能是white或blacknavigationBarTitleTextString

导航栏标题文字内容，默认为无文字内容navigationStyleStringdefault导航栏样式，只支持default或custom,其中custom用于自定义导航栏内容，只保留右上角的小图标backgroundColorHexColor#ffffff窗口的背景颜色，默认值表示白色，也可以简写为#ffffbackgroundTextStyleStringdark下拉加载的样式，该属性值只能是dark或lightbackgroundColorTopString#ffffff顶部窗口的背景颜色，只有iOS有效backgroundColorBottomString#ffffff底部窗口的背景颜色，只有iOS有效enablePullDownRefreshBooleanfalse是否开启下拉刷新功能onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部的距离，单位为像素（px）三、实现效果

通过修改app.json文件，把顶部窗口的背景颜色变为红色，导航栏标题文字内容改为“微信小程序开发教程”，导航栏标题颜色变为白色，实现如图所示的效果。三、实现效果

通过修改app.json文件，把顶部窗口的背景颜色变为红色，导航栏标题文字内容改为“微信小程序开发教程”，导航栏标题颜色变为白色，实现如图所示的效果。四、任务实现

对app.json文件中的window属性进行修改。如，顶部窗口的背景颜色"navigationBarBackgroundColor"设置为"#f00"红色，导航栏标题文字"navigationBarTitleText"设置为“微信小程序开发教程”，导航栏标题颜色"navigationBarTextStyle"变为"white"白色，实现代码如图所示。第8行：将导航栏背景颜色从白色”#ffffff”改为红色”#f00”。第9行：将导航栏文字内容从“WeChat”改为“微信小程序开发教程”。第10行：将导航栏文字颜色从黑色”black”改为白色”white”。小程序tabBar栏2.2chapter一、任务描述

开发者根据实际需要，定义全局配置文件app.json中的tabBar属性，通过添加tabBar属性，实现窗口底部tab栏多个页面的切换，实现自己想要的多页面效果。

小程序的全局配置文件是app.json，主要包含了小程序所有页面的路径地址、导航栏样式等内容，页面的路径地址、导航栏样式为必填信息，如图所示。二、导入知识点二、导入知识点如果小程序是一个多tab应用，即客户端窗口的底部有tab栏可以切换页面，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar的属性值如表2.3所示。属性类型必填默认值说明colorHexColor是

tab上的文字默认颜色selectedColorHexColor是

tab上的文字选中时的颜色backgroundColorHexColor是

tab的背景色borderStyleString否blacktabBar上边框的颜色，仅支持black、whitelistArray是

tab的列表positionString否bottomtabBar的位置，仅支持bottom、top二、导入知识点其中，list接收一个数组，只能配置最少两个、最多5个tab。tab按数组的顺序排序，每项都是一个对象，其属性值如表所示。属性类型必填描述pagePathString是页面路径，必须在pages中先定义textString是tab上按钮的文字iconPathString否图标路径，icon大小限制为40KB,建议尺寸为81px×81px，不支持网络图片selectedlconPathString否选中时的图标路径，icon大小限制为40KB,建议尺寸为81pxx81px，不支持网络图片

注意：当position属性值为top时iconPath和selectedIconPath属性无效，不显示图标。同时，iconPath和selectedIconPath属性不是必填内容，如下代码所示：二、导入知识点

下面将用图例的方式把tabBar中list属性值的对应关系展示出来，如图2.10所示。二、导入知识点三、实现效果通过编写app.json文件中tabBar中list属性值，设置成四个tab栏显示，并且可以相互选中切换。没选中的icon图标的颜色和文字颜色就变成绿色(#1AAD16)，如图2.11所示的效果。四、任务实现首先，进入阿里巴巴矢量图库网站/，在“搜索图标”栏上查找需要下载的图标。如在“搜索图标”栏上输入“首页”，就会出现很多“首页”icon图标，如图所示。四、任务实现根据需求选中一个“首页”icon图标，单击“下载”，弹出对话框，分别选中灰色“#515151”和绿色“#1AAD16”进行PNG格式的图标下载，以下载“#1AAD16”绿色图标为例，如图所示。四、任务实现然后，除pages目录下的index和logs外，需另新建“phonebook”通讯录和“find”发现2个页面文件，如图2.14所示。四、任务实现新建Page完成后，在app.json文件中的"pages"列表中会自动出现"pages/phonebook/phonebook"和"pages/find/find"，如图2.15所示。四、任务实现最后，在app.json中编写”tabBar”属性list列表，代码如下：小程序逻辑文件2.3chapter一、任务描述小程序开发框架的逻辑层又称为AppService,是由JavaScript编写和实现的。开发者写的所有代码最后将被打包成一份JavaScript程序,并在小程序启动的时候运行，直到小程序被销毁。逻辑层的主要作用是处理数据后发送给视图层渲染以及接收视图层的事件反馈。为了更方便地进行项目开发，小程序在JavaScript的基础上进行了一些优化。一、任务描述其提供了不同的方法和接口用于不同的文件。（1）App()方法用于整个应用程序的注册。（2）Page()方法用于单独页面的注册。（3）getApp()方法用于获取整个应用实例。（4）getCurrentPages()方法用于获取当前页面实例。（5）提供丰富的微信原生API，可以方便地获取微信用户信息、本地存储、扫一扫、微信支付、微信运动等特殊功能。下面就App()方法和Page()方法的创建做一讲解。一、App()方法App.js文件是小程序的全局逻辑文件，也是整个小程序的入口文件，它控制整个小程序生命周期的文件。1.默认app.js代码当新建一个项目时，默认的app.js代码如图2.16所示。二、导入知识点一、App()方法省略app.js中具体的函数内容后将得到以下代码框架，代码框架如下：二、导入知识点一、App()方法自动生成app()代码用户可以使用微信web开发者工具在空白app.js文件中直接输入关键词app,此时会自动出现提示列表，如图2.17所示。注意：App()方法只能写在小程序根目录下的app.js文件中，并且只能注册1个。二、导入知识点一、App()方法选择提示列表中的第三项，直接按回车键就可以自动生成带有生命周期全套函数的代码结构，如图2.18所示。事实上，App()中的这些函数均为可选函数，开发者可以根据实际需要删除其中的部分函数，或保留这些函数但空着不填充内容。二、导入知识点一、App()方法App.js用App()来实现对整个程序的注册，同时App()里面还实现了对小程序生命周期的监控函数(onLaunch(),onShow(),onHide())。对App()内部参数说明如表2.5所示。二、导入知识点属性类型说明描述onLaunch()Function生命周期函数－－监听小程序初始化当小程序初始化完成时，会触发onLaunch（全局只触发一次）onShow()Function生命周期函数－－监听小程序显示当小程序启动或从后台进入前台显示，会触发onShow函数onHide()Function生命周期函数－－监听小程序隐藏当小程序从前台进入后台，会触发onHide函数onError()Function错误监听函数当小程序发送脚本错误时，会触发onError函数onPageNotFound()Function页面不存在函数当小程序需要打开的页面不存在时触发其他自定义函数Any开发者可以添加任意的函数或数据到Object参数中，用this可以访问二、Page()方法小程序在每个页面JS文件中通过使用Page(OBJECT)方法进行页面注册，该方法可以用于指定小程序页面的生命周期函数。小程序中每一个页面可以放在一个文件夹中，这个文件夹中一般包括4个文件分别是.js、.json、.wxml和.wxss。注意：这四个文件的名字最好和文件夹的名字一致，这样便于在代码框架中自动查找。二、导入知识点二、Page()方法例如，用户在微信web开发者工具的index.js文件中，直接输入关键词page，此时会自动出现提示列表，如图2.19所示。二、导入知识点二、Page()方法每个页面都需要注册，index.js用Page()这个函数来注册一个页面，它接受一个object参数，用这个参数来指定页面的初始数据，生命周期函数，事件处理函数。对Page()内部参数说明如表2.6所示。二、导入知识点属性类型说明dataObject页面的初始数据onLoadFunction生命周期函数－－监听页面加载onReadyFunction生命周期函数－－监听页面初次渲染完成onShowFunction生命周期函数－－监听页面显示onHideFunction生命周期函数－－监听页面隐藏onUnloadFunction生命周期函数－－监听页面卸载onPullDownRefreshFunction页面相关事件处理函数－－监听用户下拉动作二、Page()方法选择提示列表中的第五项，直接按回车键就可以自动生成带有生命周期全套函数的代码结构，创建完成后的index.js代码如图2.20所示。二、导入知识点小程序生命周期执行顺序2.4chapter一、任务描述设计一个小程序，测试小程序各个页面和函数的执行顺序。

小程序的全局配置文件是app.json，主要包含了小程序所有页面的路径地址、导航栏样式等内容，页面的路径地址、导航栏样式为必填信息，如图所示。二、导入知识点1.小程序应用生命周期每个小程序都需要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。函数App(Object

object)用于注册小程序，该函数必须在app.js中调用，必须调用且只能调用一次，如图2.21所示。二、导入知识点1.小程序应用生命周期函数参数Object

object的属性说明如表2.7所示。二、导入知识点属性类型必填描述onLaunchFunction否生命周期函数－监听小程序初始化onShowFunction否生命周期函数－监听小程序显示onHideFunction否生命周期函数－监听小程序隐藏onErrorFunction否错误监听函数onPageNotFoundFunction否页面不存在函数其他自定义函数Any否开发者可以添加任意的函数或数据到Object参数中，用this可以访问小程序应用与页面有各自的生命周期函数，它们在使用过程中也会互相影响。小程序应用生命周期如图2.22所示。二、导入知识点打开小程序开始销毁小程序初始化onLaunch()结束回到前台进入后台onShow()onHide()2.小程序页面生命周期对于小程序中的每个页面，都需要在页面对应的js文件中调用Page方法注册页面，指定页面的初始数据、生命周期回调、事件处理函数等。函数Page(Objectobject)用于注册小程序中的一个页面。其参数Objectobject指定页面的初始数据、生命周期回调、事件处理函数等，其主要属性说明如表2.8所示。二、导入知识点二、导入知识点属性类型说明dataObject页面的初始数据onLoadFunction生命周期函数－－监听页面加载onShowFunction生命周期函数－－监听页面显示onReadyFunction生命周期函数－－监听页面初次渲染完成onHideFunction生命周期函数－－监听页面隐藏onUnloadFunction生命周期函数－－监听页面卸载其他Any开发者可以添加任意的函数或数据到object参数中，用this可以访问小程序在被打开时会首先触发onLaunch()进行程序启动，完成后调用onShow()准备展示页面，如果被切换进入后台会调用onHide(),直到下次程序在销毁前重新被唤起会再次调onShow()。小程序页面生命周期如图2.23所示。二、导入知识点关闭页面初始化打开页面开始onLoad()onUnLoad()结束初次渲染回到前台进入后台onShow()onHide()onReady()3.小程序整个生命周期在小程序应用生命周期调用完onShow()以后就准备触发小程序页面生命周期了。页面初次打开会依次触发onLoad()、onShow()、onReady()这3个函数。同样，如果被切换到后台，会调用页面onHide(),从后台被唤醒会调用页面onShow()。直到页面关闭会调用onUnload(),下次打开还会依次触发onLoad()、onShow()、onReady()这3个函数。小程序整个生命周期如图2.24所示。二、导入知识点二、导入知识点关闭页面页面显示页面隐藏切换后台运行时，隐藏页面回到前台进入后台页面加载程序启动LaunchonShowonHide初次渲染onLoadReadyonUnLoadonShowonHide切换到前台运行时，显示页面三、实现效果根据任务描述可以实现如下运行效果：（1）案例运行后，在Console页面显示的程序运行顺序如图2.25所示。从图中可以看出，小程序运行后首先执行app.js文件中的onLaunch函数和onShow函数，然后再执行index.js中的onLoad函数、onShow函数和onReady函数。三、实现效果（2）当点击“通讯录”标签后，首先隐藏index.js页面，然后phonebook.js页面被加载、显示和渲染，如图2.26所示。三、实现效果（3）当点击“发现”标签后，此时首先隐藏phonebook.js页面，然后find.js显示和渲染，如图2.27所示。三、实现效果（4）当点击如图2.28所示的“切后台”按钮后，小程序首先执行find.js中的onHide函数，然后再执行app.js中index.js的onShow函数，如图2.28所示。四、任务实现在“任务2.2小程序tabBar栏”基础上完成以下内容。（1）编写app.js文件代码。在App函数的对象参数中添加如下函数：onLaunch、onShow和onHide，每个函数都通过调用console.log函数来在Console窗口中显示程序执行的位置。app.js文件：四、任务实现（2）编写index.js文件代码。在该文件中添加如下函数：onLoad、onReady、onShow、onHide、onUnload，在每个函数中通过调用console.log函数来显示程序执行的位置。index.js文件：四、任务实现（3）编写phonebook.js文件代码。在该文件中添加如下函数：onLoad、onReady、onShow、onHide、onUnload,在每个函数中通过调用console.log函数来显示程序执行的位置。phonebook.js文件：四、任务实现（4）编写find.js文件代码。在该文件中添加如下函数：onLoad、onReady、onShow、onHide、onUnload,在每个函数中通过调用console.log函数来显示程序执行的位置。find.js文件：setData视图渲染2.5chapter一、任务描述在页面文件中能使用setData()函数将js中data数据渲染到视图界面，并且能调用函数去改变视图渲染的内容。在Page()方法中，setData()函数用于将数据异步从逻辑层发送到视图层WXML页面上，同时也可以同步更新data属性中的数据值，并改变对应的this.data的值。setData()参数格式如下：setData(data,callback);//data需为可JSON化的数据，callback在setData对界面渲染完毕后调用二、导入知识点其参数说明如表2.9所示：Page下面的任何一个方法内都可以使用setData方法，它接收两个参数。二、导入知识点属性类型必填描述dataObject是要更新的一个或多个数据，格式为{key1:value1,key2:value2,…,keyN:valueN}callbackFunction否setData引起的界面更新渲染完毕后的回调函数第一个参数Objectdata，它是必传的，数据类型是Object，即这次要改变的数据。第二个参数Functioncallback，它是回调函数，非必填的，它所代表的含义是setData引起的界面更新渲染完毕后的回调函数。三、实现效果根据此任务描述可以做出如图2.29所示的效果。页面载入初始时，页面显示是“小程序开发教程”的文字，如图（a）所示。当单击“更改data数据”按钮时，页面显示的文字发生改变，变为“微信小程序创始人张小龙”，如图（b）所示，页面渲染的内容发生改变。四、任务实现（1）创建一个page页面名为setdata的文件，并且把app.json中的pages属性中的顺序进行变换，选中pages/setdata/setdata，按住“Alt+向上”把该页面的位置调整到第一位。如图2.30所示。四、任务实现（2）编写setdata.wxml文件代码。编写需要渲染的内容name和“更改data数据”button按钮。setdata.wxml文件：四、任务实现（3）编写setdata.wxss文件代码。对页面的外框.box、标题.title、文本text和按钮button样式进行设置。setdata.wxss文件：四、任务实现（4）编写setdata.js文件代码。当单击“更改data数据”按钮时，更改渲染到视图界面上的内容，并且在console调试器中显示出来，如图2.31所示。四、任务实现console调试器setdata数据变化变量和函数的作用域及模块化2.6chapter一、任务描述设计一个小程序，在index.js文件中调用app.js文件、index.js文件和util.js文变量和函数，从而实现对全局变量和函数、本文件定义的变量和函数以及其他模块中定义的变量和函数的引用。1.文件作用域在小程序的任意JS文件中声明的变量和函数只在该文件中有效，不同的JS文件中可以声明相同名字的变量和函数，不会互相影响。如果需要跨页面进行数据共享，可以在app.js中定义全局变量，然后在其他JS文件中使用getApp()来获取和更新。例如在app.js设置全局变量globalData中msg的值。二、导入知识点2.模块化程序支持将一些公共JavaScript代码放在一个单独的JS文件中，作为一个公共模块可以被其他JS文件调用。模块只能通过module.exports或者exports才能对外提供接口。例如，在根目录下新建utils文件夹并创建公共JS文件common.js。二、导入知识点页面JS中使用require引用common.js文件，此时就可以调用其中的函数。二、导入知识点三、实现效果在app.js文件中定义的变量和函数是全局变量和函数，可以在任何js文件中进行引用。根据案例描述运行结果如下图2.32所示的效果。四、任务实现在index.wxml中设置了六个调用变量分别是msg1、msg2、msg3、msg4、msg5和msg6，这六个变量需要通过index.js把值渲染到视图层中。通过index.js文件中调用app.js文件，调用index.js文件本身以及调用util.js文件。变量和函数如图2.33展示了index.wxml、index.js、app.js和utils.js之间的调用关系。四、任务实现（1）编写index.wxml文件代码。本文件绑定了msg1~msg6这6个变量，通过在index.js文件中给这6个变量赋值，来演示在index.js文件中引用全局变量和函数、局部变量和函数以及其他模块的变量和函数的方法。文件中使用了view样式来设置文本的大小和行间距。index.wxml文件：四、任务实现（2）编写index.wxss文件代码。该文件定义了box、title和view的样式，用来设置标题大小、文字大小和行间距。index.wxss文件：四、任务实现（3）编写index.js文件代码。代码首先获取全局应用实例和utils模块实例，并定义了本模块的变量和函数，然后使用了全局变量、全局函数、utils模块变量、utils模块函数、本模块变量和本模块函数。①如果在本模块中引用app.js中定义的全局变量和函数，就必须定义全局对象并利用getApp()函数给该对象赋值。本案例中利用constapp=getApp()语句定义了全局对象app,并利用app.globalMsg和app.globalFunc()引用app.js文件中定义的变量和函数，并赋值给msg1和msg2。四、任务实现②如果在本模块中引用模块内定义的变量和函数，在data中直接引用就可以了，如本例中的msg3和msg4直接引用了indexMsg和indexFunc()。③如果在本模块中引用其他模块，如本案例中的util模块中定义的变量和函数，首先需要利用require函数引入util文件，本案例中利用varutil=require('../utils/util.js')创建util实例，然后利用util引用util.js文件中定义的变量和函数，本例通过util.utilMsg和util.utilFunc()引用了util.js文件中定义的变量和函数给msg5和msg6赋值。四、任务实现index.js文件：四、任务实现（4）编写app.js文件代码。该文件中定义了1个全局变量globalMsg和1个全局函数globalFunc,该变量和函数可以在本项目的其他任何js文件中进行引用。app.js文件：四、任务实现（5）在pages文件夹下添加utils文件夹，并在其中添加util.js文件，然后编写util.js文件代码。该文件定义了1个变量和1个函数，如果要在其他js文件中引用这个变量和函数，就必须通过module.exports或exports来输出该变量和函数。util.js文件：四、任务实现

在JS文件中声明的变量和函数只在该文件中有效；不同文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据，可以在App()中设置。可以将一些公共的代码抽离成为一个单独的js文件作为一个模块。模块通过module.exports或者exports对外暴露接口，在需要这些模块的文件中，使用require(path)将公共代码引入。主要注意的是path为相对路径，暂时不支持绝对路径。感

谢

聆

听1+X证书第三章

小程序视图层

微信小程序开发CONTENT目录3.13.2小程序数据绑定成绩等级计算器3.33.4列表渲染九九乘法表3.53.6小程序条件渲染选择先行示范区3.7实现分段函数CONTENT目录3.83.9成绩计算器递归求和计算器3.103.11随机数求和简单模板的定义及应用3.123.13复杂模板的定义及应用事件绑定CONTENT目录3.143.15小猫叫温度转换计3.163.17事件冒泡与捕获小程序include引用文件3.183.19旅游攻略WXSS微信样式表3.20字体样式设置小程序数据绑定3.1chapter一、任务描述编写一个数据绑定和事件绑定的小程序，实现数据和事件的绑定。数据绑定包括：算术运算绑定、对象绑定和数组绑定，并通过点击按钮事件修改绑定的数据。WXML（WeiXinMarkupLanguage）。WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。（1）data对象。data对象是页面第一次渲染时使用的初始数据，WXML中的动态数据均来自对应Page的data。页面加载时，data以JSON字符串的形式由逻辑层传至渲染层。data中的数据包括：字符串、数字、布尔值、对象、数组。（2）数据绑定。渲染层可以通过WXML对数据进行绑定。数据绑定使用Mustache语法（双大括号）将变量包起来，可以作用于：内容、组件属性（需要在双引号之内）、控制属性（需要在双引号之内）、关键字（需要在双引号之内）、运算、组合、数组、对象等场景。二、导入知识点（3）setData()函数。此函数用于将数据从逻辑层发送到视图层（异步）,同时改变对应的this.data的值（同步）。（4）事件绑定。事件是视图层到逻辑层的通信方式，它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。二、导入知识点三、实现效果根据任务描述可以做出如图3.1所示的效果。初始界面如图（a）所示，在视图层文件index.wxml中绑定了普通数据a、b、c,绑定了对象数据Student和数组数据array,这些数据的值都可以通过逻辑层文件index.js来传递。当点击“修改绑定数据”按钮时，原来的数据会发生相应的变化，如图（b）所示。四、任务实现1.编写index.wxml文件代码小程序界面主要由文本信息和1个按钮构成，文本信息可以通过view组件来呈现，按钮利用button组件来实现。（1）index.wxml文件中的数据通过{{}}符号与index.js文件中的数据进行绑定，该绑定是单向的，数据只能由index.js文件传给index.wxml文件，不能反向传递。（2）普通数据绑定直接使用变量名来实现，如本案例中的变量a、b和c;对象数据绑定通过“对象名.对象属性”来实现，如本案例中的Student.stulD、S和Student.birthday;数组数据绑定通过下标变量来实现，如本案例中的array[0]、array[1]和array[2]。四、任务实现（3）界面最后添加了一个button组件，并利用该组件进行事件绑定。事件绑定通过在index.js文件中定义事件绑定函数来实现。（4）界面使用<View>组件调整字体大小和间距。index.wxml文件：四、任务实现2.编写index.wxss文件代码文件中定义了<View>组件来设置字体大小和边距，该样式对wxml文件中的所有<View>组件都起作用。index.wxss文件见附件；3.编写index.js文件代码在data对象中初始化绑定的数据，包括普通数据、对象和数组，在绑定的事件函数中通过调用this.setData()函数来修改绑定的数据。四、任务实现index.js文件：成绩等级计算器3.2chapter一、任务描述编写一个成绩等级计算器的小程序，输入成绩后显示成绩等级，如果输入成绩大于100或者小于0，则显示成绩输入有误的提示。本任务综合运用了input组件和wx:if实现成绩等级的判断。判断语句wx:if。在框架中，使用wx:if="{{condition}}来判断是否需要渲染该代码块：<viewwx:if="{{condition}}">True</view>也可以用wx:elif和wx:else来添加一个else块，例如：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>二、导入知识点三、实现效果根据任务描述可以做出如图3.2所示的效果。如（a）所示，初始界面显示“请输入你的考试成绩”；如图（b）所示，输入88的分数，显示成绩等级为“良好”；如图（c）所示，输入68的分数，显示成绩等级为“及格”；如图（d）所示，输入99的分数，显示成绩等级为“优秀”。成绩等级是因为输入的score值通过wx:if判断而得出的结果，正确输入一个成绩并点击其他位置后，将显示该成绩的等级，如果输入成绩大于100或小于0,则显示“成绩输入有误！”的提示。三、实现效果四、任务实现1.编写index.wxml文件代码代码中主要利用input组件来输入成绩，该成绩在js文件中获取，并被渲染到WXML视图层，在视图层利用wx:if来判断成绩等级并显示。input组件的上、下外边距，以及宽度、高度和边框等样式通过input样式来设置。index.wxml文件：四、任务实现2.编写index.wxss文件代码

文件定义了input组件的样式，index.wxss文件见附件；四、任务实现3.编写index.js文件中的代码在data中初始化score的值为0,当score<60时，分数为不及格，这是小程序运行后初始界面显示“不及格”的原因。在scoreInput函数中利用this.setData()函数修改score的值为input组件中输入的值，并把该值渲染到视图层。index.js文件：列表渲染3.3chapter一、任务描述编写一个小程序，利用wx:for实现对绑定数组、直接数组、对象以及字符串的列表渲染，利用wx:for-index和wx:for-item实现对index和item的重命名，在block标签中使用wx:for实现对多节点结构块的渲染。本案例主要涉及知识要点：（1）利用wx:for对数组、对象和字符串进行列表渲染的方法。（2）利用wx:for-index和wx:for-item修改数组默认下标index和默认数组元素item的方法。（3）在block标签中使用wx:for对多节点结构块进行列表渲染的方法。在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组当前项的下标变量名默认为index,数组当前项的变量名默认为item。使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。类似blockwx:if,也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。二、导入知识点如果列表元素的位置会动态改变或者有新的元素添加到列表中，并且希望列表中的元素保持自己的特征和状态（如input中的输入内容，switch的选中状态）,需要使用wx:key来指定列表中元素的唯一的标识符。如不提供wx:key,会报一个warning,如果明确知道该列表是静态，或者不必关注其元素顺序，可以选择忽略warning。（1）当wx:for的值为字符串时，会将字符串解析成字符数组array。比如：<viewwx:for="array">{{item}}</view>等同于<viewwx:for="{[['a','r','r','a','y']}}">({item}}</view>二、导入知识点（2）花括号和引号之间如果有空格，将最终被解析成为数组。比如：<viewwx:for="{[[1,2,3]}}">{{item}}</view>等同于<viewwx:for="{{[1,2,3]+''}}">{{item}}</view>二、导入知识点三、实现效果根据任务描述可以做出如图3.3所示的效果。界面中出现了对数组、对象、字符串列表渲染以及利用block渲染多节点结构块的结果。四、任务实现1.编写index.wxml文件代码文件利用wx:for先后对绑定的数组、直接数组、对象、字符串进行列表渲染。列表渲染默认的数组下标为index,默认数组元素为item,在对字符串进行列表渲染时，对默认数组下标和数组元素进行了重命名。最后利用block标签和wx:for控制属性对3个view组件进行了渲染，打印出了2组红蓝黄三色带。（1）本案例使用了4个样式：view-item、bc-red、bc-green和bc-blue。view-item用于设置色条的尺寸，其他3种样式用于设置色条的背景颜色。（2）当对对象进行列表渲染时，index表示对象的属性名，item表示对象的属性值。（3）当对字符串进行列表渲染时，字符串被解析为字符数组。四、任务实现index.wxml文件：四、任务实现2.编写index.wxss文件代码文件定义了4个样式：view-item、bc-red、bc-green和.bc-blue.index.wxss文件见附件。3.编写index.js文件代码文件对绑定的数组array和对象object进行了初始化。index.js文件：九九乘法表3.4chapter一、任务描述编写一个小程序，综合运用wx:if条件渲染和wx:for列表渲染在视图层打印一个九九乘法表。本次任务主要涉及以下知识要点：双重wx:for列表渲染的应用；inline-block样式的应用。综合运用条件渲染和双重列表渲染实现了打印九九乘法表的算法，同时使用了inline-block属性设置布局方式。（1）双重列表渲染是指列表渲染中嵌套了列表渲染。其循环过程是这样的：首先判断是否满足外循环条件，如果满足，则进入内循环，内循环结束后再判断是否满足外循环条件，如果满足再次进入内循环，如此循环下去，直至外循环条件不满足，退出整个循环。二、导入知识点（2）九九乘法表算法。首先确定在哪个位置打印三角形九九乘法表，如果在左下角打印，则：第1行打印1列：1×1=1,第2行打印2列：2×1=22×2=4,第1行打印i列……第9行打印9列。假设用i表示行元素值并进行外循环，利用j表示列元素值并进行内循环，i和j的列表渲染数组都是[1,2,3,4,5,6,7,8,9],从运行结果可以看出，左下角位置的九九乘法表，其行元素值要大于或等于列元素值，因此当满足j<=i时打印出ixj=i*j,这样就可以打印出左下角三角形的九九乘法表。（3）利用inline-block设置布局方式。设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。二、导入知识点三、实现效果根据任务描述可以做出如图3.4所示的九九乘法表。四、任务实现1.编写index.wxml文件中的代码本任务利用双重wx:for列表渲染和wx:if条件渲染来实现九九乘法表的打印。代码中使用了.jiujiu和.inline两种样式，.jiujiu用于控制字体大小和边距，.inline利用inline-block属性控制某一row行的所有col列都在同一行内显示，而且上一次row循环与下一次col循环列之间留有空格。此外，使用width属性控制每一行的总宽度，从而保证最长一行文字能够显示出来，显示的文字大小合适。四、任务实现index.wxml文件：四、任务实现2.编写index.wxss文件代码本案例index.wxml中，已经定义了.jiujiu和.inline样式，现编写.jiujiu和.inline两个定义。index.wxss文件见附件；3.编写index.json文件代码该文件用来显示小程序标题栏的样式和文本内容，前面已经讲过，这里就不再贤述。index.json文件：小程序条件渲染3.5chapter一、任务描述编写一个利用wx:if条件渲染实现颜色显示的小程序。将wx:if放在<view>组件中实现如下功能：当逻辑层js文件传递给视图层wxml文件的颜色color的值为red、green、blue或其他颜色时，窗口将显示颜色的名称，并在名称下方显示这种颜色的颜色条；将wx:if放在<block/>中实现如下功能：当给定的一个数值大于10时，将在窗口下方显示红、绿、蓝3种颜色条，否则将不显示。1.wx:if在框架中，使用wx:if="{(condition)}来判断是否需要渲染该代码块：<viewwx:if="{(condition}}">True</view>也可以用wx:elif和wx:else来添加一个else块，例如：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>二、导入知识点2.blockwx:if因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block>标签将多个组件包装起来，并在上边使用wx:if控制属性，例如：<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>注意：<block></block>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。二、导入知识点三、实现效果根据任务描述可以做出如图3.8所示的效果。四、任务实现1.编写index.wxml文件代码（1）代码利用wx:if...wx:elif...wx:else来判断color的值是red、green、blue还是其他颜色，然后根据判断结果来显示相应的颜色条。color的值来自js文件。（2）代码利用<blockwx:if="{{condition}}>"来判断length>10与否，如果条件满足，则显示红、绿、蓝3个颜色条，否则不显示。length的值来自js文件。（3）代码中使用了4种样式：view-item、bc-red、bc-green和.bc-blue,view-iter用来设置颜色条的尺寸，其他3种样式用来设置颜色条的背景颜色。四、任务实现index.wxml文件：四、任务实现2.编写index.wxss文件代码文件定义了4个样式：view-item、bc-red、bc-green和.bc-blue。index.wxss文件见附件；3.编写index.js文件代码文件在data对象中初始化了2个变量：color和length,这2个变量在index.wxml文件中已经进行了绑定，通过传值实现视图层的条件渲染。先让length的值为15，渲染出效果，再把length的值修改为5，渲染成另外一个不同的效果。四、任务实现index.js文件：选择先行示范区3.6chapter一、任务描述如果列表中项目的位置会动态改变或者有新选项添加到列表中，希望列表中的项目保持自己的特征和状态，使用wx:key指定唯一标识符，从而指定列表中选项的唯一标识符，当刷新发生变化时，<switch/>选中的状态不会随着变化而改变。本次任务是选择先行示范区，当单击“更新”按钮时，仍然会选择用户选择的项目。若要避免乱序的情况或不想看到该提示，可使用wx:key属性来指定列表中的项目唯一标识符。wx:key的值以两种形式提供：字符串：代表在wx:for循环的一个项目属性，该属性值需要是列表中唯一的字符串或数字，且不能动态改变。表达方式为：数组多个节点wx:key=数组名.item/index保留关键字*this：代表在wx:for循环中的项目本身，这种表示需要项目本身是唯一的字符串或者数字。表达方式为：数组一个节点wx:key=”*this”二、导入知识点以wx:key属性为自定义字符串为例，当数据改变导致页面被重新渲染时，会自动校正带有key的组件以确保项目被正确排序并且提高列表渲染时的效率。如图3.9中所示，先选中“C、深圳”选项，当数据更新后，页面被重新渲染，上面添加了一个“E、厦门”选项，但以前选中的C选项仍然是被选中的，选中项没有发生改变，这就是wx:key的作用。二、导入知识点三、实现效果根据本次任务的描述做出如图3.9所示的wx:key开关唯一标识符的先行示范区的选择。四、任务实现（1）表单组件<switch>是开关选择器，可以点击switch按钮进行开关。预览效果如图3.10所示。四、任务实现（2）编写index.wxml文件代码。通过写入switch开关选择器来渲染一个列表。index.wxml文件：四、任务实现（3）编写index.wxss文件代码。代码中使用了.box和.title两种样式，分别用来修饰外框和标题的。index.wxss文件见附件；（4）编写index.js文件代码。文件对列表中的对象lines进行了初始化。index.js文件：四、任务实现Ctrl+S保存运行，在模拟器中显示了以列表的方式渲染了4个switch按钮，如图3.11组件switch先行示范区开关选择项目所示。四、任务实现（5）Switch开关的特点是用列表的方式渲染了4个switch，下面我们将通过程序编写再在A选项的上方添加一个switch5按钮选项“E厦门”，再次进行渲染时改变了switch的数量，从1个switch选项开关变成了5个switch选项开关。现在添加一个新的switch按钮选项“E厦门”，给button按钮“更新”一个绑定事件，在小程序中给一个点击bindtap事件，事件的名字其实就是函数的名字，叫tapEvent。在index.wxml中写入代码：<button

type="primary"

bindtap="tapEvent">更新</button>四、任务实现（6）在index.js中进行编写函数tapEvent:function(event)，会传递一个event事件参数进来。tapEvent:function(event){}接下来会更改一下lines的值，首先获取一个lines对象，把它设置为lines变量，即varlines=this.data.lines；然后，要求在lines的第一项前面即0个位置添加一个新的按钮switch5，使用splice方法来进行操作，即lines.splice(0,0,第五个元素)，关于splice()方法在后面有补充讲解。在页面中刷新后，能同时把数据更新渲染到视图界面中。四、任务实现添加index.js代码文件如下：四、任务实现当选中选项“C.深圳”单击更新后，当没有定义wx:key时，被选中的选项会自动向前移一个选项，这时界面展示所选择的选项是第三个，所以从选项C变成了选项B，选项会发生变化，显示效果如图3.12所示。四、任务实现（7）编写index.wxml文件。先选中switch3开关选择器“C.深圳”，当更新完后，选中的按钮就会从switch3开关选择器“C.深圳”的选中项变成“B.上海”。想要更新后选中项不变，就要通过wx:key指定唯一标识符。在index.wxml的<view>组件中，添加wx:key=”id”，编写代码如下：<view

wx:for="{{lines}}"

wx:key="id">保存Ctrl+S刷新后就可以看到本次任务展示的效果啦！实现分段函数3.7chapter一、任务描述设计一个利用条件结构和数学函数进行计算的小程序。当输入x值时，根据下面的公式计算出y的值。本任务使用了JavaScript中的条件语句和Math对象中的函数。1.JavaScript中的