《微信小程序开发案例教程》全套教学课件

微信小程序开发案例教程主讲人:全套可编辑PPT课件全书目录微信小程序开发入门项目一微信小程序的视图项目二微信小程序的配置和逻辑项目三视图容器组件与基础内容组件项目四表单组件与其他组件项目五网络API与文件API项目六数据缓存API与用户信息API项目七媒体API与位置API项目八交互API与设备API项目九微信小程序云开发项目十“私房菜馆”微信小程序项目十一项目一微信小程序开发入门全套可编辑PPT课件项目导读2017年1月9日，第一批微信小程序产品正式上线。经过几年的发展，微信小程序已成为各行各业开展营销活动的重要工具。本项目将带领大家了解微信小程序的概念、特点、功能、开发流程等，并对其项目结构有一个整体的认识。知识目标了解微信小程序的概念、特点及功能。了解微信小程序的开发流程。熟悉微信开发者工具界面各区域的功能及作用。熟悉微信小程序的文件类型和目录结构。技能目标通过自主学习微信提供的小程序官方文档，增强自主学习意识。密切关注行业动态，紧跟时代发展步伐，提高迎接机遇和挑战的能力。素质目标能够注册微信小程序账号。能够下载并安装微信开发者工具。能够创建微信小程序项目。能够开发简单的微信小程序。学习目标2项目目录任务一初识微信小程序任务二认识微信小程序的项目结构1任务一初识微信小程序（1）认识微信小程序（2）微信小程序的特点（3）微信小程序的功能你常用哪些微信小程序？微信小程序和App一样吗？为什么？课堂互动微信小程序简称小程序，不需要下载安装即可使用。微信小程序不同于App，它依赖于微信平台。微信小程序入口获取小程序方式扫码微信搜索微信公众号好友推荐一、认识微信小程序常见的微信小程序页面一、认识微信小程序可以结合微信公众平台进行宣传和推广，更快获取用户可以在微信内被便捷地获取和传播无须安装、速度快、触手可及、用完即走、无须卸载例如，顾客去餐馆吃饭，并不需要下载该餐馆的App，只需要用微信扫一扫餐馆提供的二维码就可以在小程序中点餐、付款，之后也不需要卸载，直接关闭小程序即可。二、微信小程序的特点微信小程序与手机原生App的区别是什么？课堂互动微信小程序与手机原生App的区别对比项微信小程序手机原生App开发周期开发周期短开发周期长开发成本开发成本低开发成本高下载无须下载，通过扫码、微信搜索、微信公众号、好友推荐等方式获取从iOS和Android应用商店下载安装无须安装，占用内存空间可以忽略不计需要安装，占用内存空间，安装太多App可能会导致手机内存不足二、微信小程序的特点微信小程序与手机原生App的区别（续表）对比项微信小程序手机原生App跨平台可以跨平台一般要同时开发iOS和Android两种版本升级无须升级需要升级功能实现受限于微信平台提供的功能功能相对复杂，可以提供个性化的功能消息推送仅能回复模板消息，不允许主动给用户发送消息可以自主推送二、微信小程序的特点1958年对话分享1983年线下扫码1992年搜索查找

1997年1995年挂起状态2013年6月消息通知2016年6月历史列表关联公众号三、微信小程序的功能开发微信小程序的流程是怎样的？课堂互动微信小程序开发小程序端开发：开发小程序的前端界面和交互逻辑服务端开发：开发小程序后台的业务逻辑任务实施：了解微信小程序的开发流程本任务实施通过介绍微信小程序的开发流程，开启微信小程序开发之旅。需要注册微信小程序账号下载并安装微信开发者工具创建微信小程序项目上传和发布微信小程序开发微信小程序任务实施：了解微信小程序的开发流程任务实施：了解微信小程序的开发流程注册微信小程序账号下载并安装微信开发者工具创建微信小程序项目上传和发布微信小程序注册小程序账号需要用到一个未被微信公众平台注册、未被微信开放平台注册、未被个人微信号绑定的邮箱，所以在注册小程序账号之前最好提前准备好。小贴士小程序的发布流程分为3步：第1步填写小程序信息，选择小程序服务类目；第2步下载开发者工具，进行小程序开发；第3步提交代码，等待审核。在选择小程序服务类目时不要选择游戏类目，因为游戏类目的小程序也称小游戏，其开发比较特殊，并且开发接口与其他类目的小程序也有所不同。本书主要介绍非游戏类目小程序的开发。总结AppID是微信小程序的唯一标识。尽管AppID不是开发小程序所必须的（可以使用测试号），但是发布小程序时必须使用AppID。在小程序管理后台左侧的导航栏中选择“开发”下的“开发管理”选项，然后单击“开发设置”选项卡可查看AppID，如下图所示。填写了AppID后，创建的小程序项目就会与刚注册的小程序账号绑定。小贴士小程序的版本说明开发版本开发过程中可以将代码上传到开发版本，开发版本的代码可以提交审核，也可以删除，不影响审核版本及线上版本审核版本只能有一份代码处于审核中，审核通过后可以发布线上版本，也可以重新提交审核，覆盖原审核版本线上版本线上所有用户都可以使用的版本，旧版本在新版本发布后会被覆盖更新小贴士任务二认识微信小程序的项目结构（1）熟悉微信开发者工具界面（2）了解微信小程序项目的文件类型和目录结构（3）创建并分析一个简单的微信小程序微信开发者工具提供了一个可视化的界面，方便开发者进行代码编写、调试和预览。那么微信开发者界面分为几个区域，包括什么？课堂互动小程序项目创建成功后，会进入微信开发者工具界面。微信开发者工具界面菜单栏工具栏模拟器编辑器调试器一、微信开发者工具界面微信开发者工具界面工具栏菜单栏模拟器编辑器调试器一、微信开发者工具界面菜单栏的功能管理项目、代码片段及文件管理代码控制界面中各区域的显示和隐藏设置外观、快捷键、编辑器更换开发模式，切换账号等一、微信开发者工具界面菜单栏选择菜单栏中的“帮助”菜单项，在其下拉菜单中选择“开发者文档”菜单项，可以查看微信提供的小程序官方文档。微信小程序官方文档提供了关于框架、组件、API、云开发等的说明，供开发者学习。小贴士微信小程序官方文档一、微信开发者工具界面工具栏：提供了常用功能的快捷按钮常用快捷按钮控制模拟器、编辑器和调试器显示与隐藏的按钮可视化按钮云开发按钮模式切换下拉列表框编译下拉列表框编译、预览、真机调试、清缓存按钮上传、版本管理按钮一、微信开发者工具界面常用按钮操作单击“编译”可以编译当前的代码文件，并自动刷新模拟器；单击“预览”可以利用手机端或PC端预览小程序的实际运行效果；单击“真机调试”可以利用手机端或PC端调试代码，以帮助开发者更好地定位和查找问题。一、微信开发者工具界面模拟器用于模拟手机环境，开发者可以使用它查看小程序在不同型号手机上的运行效果。然而，模拟器与真机环境仍然有所区别，当开发者需要验证小程序在真机上的表现或排查真机故障时，仍然要使用真机调试。此外，模拟器下方的状态栏会显示当前页面的路径，如pages/index/index。模拟器一、微信开发者工具界面编辑器编辑器左侧资源管理器用于展示小程序项目的目录结构右侧用于编写代码在编写代码的过程中保存代码文件（如按“Ctrl+S”组合键），微信开发者工具会自动编译运行，此时开发者可通过模拟器实时预览代码效果。一、微信开发者工具界面调试器：包含多种调试工具常用调试工具Wxml帮助开发者开发和调试Wxml转化后的页面，开发者在此处可以看到真实的页面结构及对应的WXSS属性，还可以修改WXSS属性Console可以显示小程序的输出信息、错误信息等，还可以直接编写和执行代码Sources显示当前项目的脚本文件Network观察发送的请求和调用文件的信息AppData显示当前项目运行时的具体数据，并且开发者还可以在此处编辑数据，数据会被实时地反馈到页面上Storage用于查看和管理本地数据存储的情况一、微信开发者工具界面为方便开发者使用，微信开发者工具提供了大量快捷键。熟练使用快捷键，可以在很大程度上帮助开发者提高开发效率。小贴士通常情况下，相同类型的文件用来实现同一类功能。类型扩展名属性作用WXML文件wxml结构文件用于描述小程序的页面结构WXSS文件wxss样式文件用于描述小程序的页面样式JSON文件json配置文件用于设置小程序的页面路径、窗口表现、标签导航、网络超时时间、debug模式等JavaScript文件js逻辑文件用于开发小程序的业务逻辑功能（如响应用户操作），以及调用小程序的API（如获取用户数据）图片文件Png、Jpggif图片资源二、文件类型其他类型文件音频视频二、文件类型通过样例小程序可以了解微信小程序项目的目录结构。打开样例小程序，在资源管理器中可以看到其目录结构样例小程序的目录结构目录结构全局文件页面文件工具类文件三、目录结构在pages属性中添加页面路径，编译或保存代码后会自动生成相关的页面文件，页面中默认显示的是什么路径？课堂互动步骤1打开微信开发者工具，选择“项目”→“新建项目”菜单项，新建一个项目并命名为“helloworld”。步骤2创建“helloworld”项目后，微信开发者工具会自动添加默认的目录和页面。在模拟器中，可以看到用户头像、用户昵称及“HelloWorld”文本内容。创建并分析简单的微信小程序任务实施模拟器运行效果步骤

3在app.json文件中，通过pages属性配置页面路径，其中包含index和logs两个页面。创建并分析简单的微信小程序任务实施pages属性在pages属性中添加页面路径，编译或保存代码后会自动生成相关的页面文件，页面中默认显示的是其本身的路径。小贴士步骤4在index.wxml文件中，由于用户头像及用户昵称都是开放数据，所以通过open-data组件显示，而“HelloWorld”文本内容（motto变量值）则通过text组件显示。创建并分析简单的微信小程序任务实施index.wxml文件步骤5在index.js文件中，Page中的data属性用于定义页面的初始数据。例如，变量motto的值为“HelloWorld”。创建并分析简单的微信小程序任务实施变量motto步骤6在index.wxss文件中，为组件添加样式。例如，使用margin-top属性可以设置上外边距，此处使用它设置“HelloWorld”文本内容距顶部的高度为200px（像素）。创建并分析简单的微信小程序任务实施

为组件添加样式设置用户昵称的样式设置用户头像的样式设置文本内容的样式1．实训目标（1）练习使用微信开发者工具创建小程序项目。（2）练习阅读和修改代码。2．实训内容创建一个微信小程序项目，在空白页面显示“HelloWeChat”文本内容。3．操作提示（1）在微信开发者工具中创建一个小程序项目，项目名称为“hellowechat”。（2）在pages文件夹中删除index和logs子文件夹。项目实训项目实训（3）在app.json文件中删除原有的页面路径，并添加hellowechat页面路径，代码如下。"pages":["pages/hellowechat/hellowechat"],（4）编译或保存代码，自动生成hellowechat.wxml、hellowechat.wxss、hellowechat.json和hellowechat.js4个基本文件。（5）修改hellowechat.wxml文件中的代码，代码如下。<text>HelloWeChat</text>（6）编译或保存代码，在模拟器中查看运行效果。1．选择题（1）下列关于微信小程序的说法，错误的是（

）。A．微信小程序不需要下载安装即可使用B．微信小程序不支持跨平台C．微信小程序具有开发周期短、开发成本低等优点D．用户可以通过扫码、微信搜索等方式快速获取微信小程序项目考核（2）下列关于微信小程序功能的说法，错误的是（

）。A．微信小程序支持对话分享B．微信小程序支持搜索查找和历史列表C．微信小程序可以与微信公众号关联D．微信小程序不支持挂起状态项目考核（3）下列关于微信开发者工具的说法，正确的是（

）。A．在Wxml面板中不可以修改WXSS属性B．在Console面板中可以直接编写和执行代码C．AppData面板用于显示当前项目的脚本文件D．Sources面板用于显示当前项目运行时的具体数据项目考核（4）下列关于微信小程序目录结构的说法，错误的是（

）。A．app.js文件用于设置小程序的全局逻辑B．project.config.json文件是项目公共配置文件C．app.json文件用于设置小程序的全局样式D．pages文件夹用于存放小程序的页面文件项目考核2．填空题（1）用户可以通过扫码、微信搜索、微信公众号、好友推荐等方式快速获取___________。（2）微信小程序的开发流程主要包括4个步骤，分别是注册微信小程序账号、___________、创建微信小程序项目，以及________________________。（3）微信开发者工具界面包括__________、工具栏、__________、编辑器和__________。（4）线上所有用户都可以使用的微信小程序版本是__________。（5）微信小程序的目录结构包括__________、__________和工具类文件3类。项目考核3．操作题创建一个微信小程序项目，在空白页面显示“myprogram”文本内容并上传小程序。

项目考核完成所有学习任务之后，请学生按照以下要求完成学习成果评价。全班同学每4人一组，各组成员结合课前、课中和课后的学习情况，以及项目实训和项目考核情况，按照表1-4的评价标准对本项目的学习成果进行自评和互评（组内成员互相打分），然后配合指导教师完成师评及总评。

项目评价项目评价学习成果评价表评价项目评价内容分值评价得分自评互评师评知识

（50%）微信小程序的概念5分

微信小程序的特点和功能10分

微信小程序的开发流程15分

微信开发者工具界面各区域的功能及作用10分

微信小程序的文件类型和目录结构10分

能力

（40%）注册微信小程序账号5分

下载并安装微信开发者工具10分

创建微信小程序项目15分

开发简单的微信小程序10分

素养

（10%）具备良好的学习态度和学习习惯5分

高质量地完成项目实训和项目考核5分

合计100分

总评自评（20%）+互评（20%）+师评（60%）=综合等级：

教师（签名）：

注：综合等级可以“优”（总评得分≥90分）、“良”（80分≤总评得分<90分）、“中”（60分≤总评得分<80分）、“差”（总评得分<60分）为标准进行评价。

课堂小结谢谢！微信小程序开发案例教程主讲人:全书目录微信小程序开发入门项目一微信小程序的视图项目二微信小程序的配置和逻辑项目三视图容器组件与基础内容组件项目四表单组件与其他组件项目五网络API与文件API项目六数据缓存API与用户信息API项目七媒体API与位置API项目八交互API与设备API项目九微信小程序云开发项目十“私房菜馆”微信小程序项目十一项目二微信小程序的视图项目导读微信小程序的每个页面都由视图层和逻辑层两部分组成，其中视图层用于描述页面的结构和样式，由WXML和WXSS两个文件共同实现。本项目将带领大家了解WXML文件和WXSS文件的基础知识，并学习通过这两个文件设置小程序页面结构和样式的方法。知识目标了解WXML文件和WXSS文件的基础知识。掌握数据绑定、事件绑定、条件渲染及列表渲染的方法。掌握模板定义、模板使用及文件引用的方法。熟悉选择器、盒模型及flex布局的相关知识。了解尺寸单位、样式导入及内联样式的相关知识。技能目标培养实践能力，在实践中学习，在学习中实践。学习目标素质目标能够使用WXML文件构建微信小程序的页面结构。能够使用WXSS文件设置微信小程序的页面样式。2项目目录任务一WXML文件——小程序的结构任务二WXSS文件——小程序的样式1任务一WXML文件——小程序的结构（1）认识WXML（2）数据绑定和事件绑定（3）条件渲染和列表渲染（4）模板与引用任务一WXML文件——小程序的结构任务描述（1）认识WXML，学习数据绑定、事件绑定、条件渲染、列表渲染、模板的定义和使用，以及文件引用的方法。（2）使用WXML文件设置“家电商城”微信小程序首页的结构。WXML的基本语法格式一、认识WXML<标签名属性名1="属性值1"属性名2="属性值2"…>组件内容</标签名>文件含义作用类比WXML（WeiXinmarkuplanguage）小程序框架设计的一套标签语言构建页面的结构网页开发中的HTML<view>标签——引用视图容器组件HTML中的<div>标签一、认识WXML内容作用位置要求标签名组件的名称——必须使用小写字母属性修饰组件位于开标签（<标签名>）中标签名之后除一些特殊属性外，大多数属性的格式均为属性名="属性值"（key="value"），属性值通常使用双引号引起来组件内容——位于开标签和闭标签（</标签名>）之间小贴士组件由微信小程序框架提供，是微信小程序页面的基本组成单元，在WXML文件中用标签来引用组件。微信小程序中有许多组件，如view、text、input、progress、image等，项目四和项目五会对它们进行详细介绍。例如，具有class属性的text组件的示例代码一、认识WXML<textclass="title">这是一个标题</text>各部分含义<text>标签由开标签“<text>”和闭标签“</text>”组成class属性的值由开发者决定开发时通常将其设为有意义的值，这样可以增强代码的可读性属于双边标签“这是一个标题”组件内容一、认识WXML有的组件没有组件内容，此时开标签和闭标签可以合并为一个单边标签，单边标签必须以“/>”结尾，否则会报错。示例代码如下。<inputtype="number"/>一个组件可以有多个属性，也可以没有属性。WXML中所有组件都支持的属性称为共同属性。一、认识WXML属性类型描述注解idstring组件的唯一标识在整个页面是唯一的classstring组件的样式类名为组件设置样式stylestring组件的内联样式为组件设置内联样式hiddenboolean组件是否显示所有组件默认显示data-*any自定义属性组件上的事件触发时，会将该属性发送给事件处理函数bind*/catch*eventhandle组件的事件绑定事件处理函数，用于响应用户操作组件的共同属性动态改变界面的功能可以通过数据绑定和事件绑定实现。二、数据绑定和事件绑定（一）数据绑定数据绑定通常会涉及WXML和JS两个文件。涉及的文件WXMLJS1．简单绑定（1）文本内容绑定。该绑定是将数据动态绑定到组件的文本内容中。例如，在WXML文件中输入如下代码。二、数据绑定和事件绑定<view>{{message}}</view>数据绑定简单绑定文本内容绑定组件属性绑定运算绑定组合绑定二、数据绑定和事件绑定Page({data:{ //初始化数据

message:'HelloWeChat'}})在相应的JS文件中输入如下代码。文本内容绑定示例运行效果二、数据绑定和事件绑定<viewid="user-{{uid}}"></view>（2）组件属性绑定。该绑定是将数据动态绑定到组件的属性中。例如，在WXML文件中输入如下代码。在相应的JS文件中输入如下代码。Page({data:{ //初始化数据

uid:'001'}})二、数据绑定和事件绑定编译或保存上述代码后，在调试器的Wxml面板中可以看到代码执行情况。此外，还可以使用组件的控制属性绑定数据。例如，在WXML文件中输入如下代码。<!--wx:if是控制属性，如果condition为true则显示组件，否则不显示--><viewwx:if="{{condition}}">hello</view>Wxml面板中的代码执行情况二、数据绑定和事件绑定在相应的JS文件中输入如下代码。编译或保存上述代码后，模拟器中不显示view组件。Page({data:{ //初始化数据

condition:false}})小贴士在WXML文件中，只能使用<!--……-->格式的注释，不能使用“//”格式的注释。在WXML文件中，为什么只能使用<!--……-->格式的注释，不能使用“//”格式的注释？二、数据绑定和事件绑定2．运算绑定运算绑定是指对双花括号内绑定的数据进行运算。<viewclass="title">运算绑定示例</view><view>三元运算：{{result?1:2}}</view><view>算术运算：{{a}}+{{b}}+{{c}}={{a+b+c}}</view><viewwx:if="{{a>5}}">逻辑运算</view><view>字符串运算：{{"hello"+name}}</view><view>数据路径运算：{{Student.stuID}}{{S}}+{{array[2]}}</view>运算绑定支持的运算类型三元运算算术运算逻辑运算字符串运算数据路径运算是指根据结构性变量（如对象、数组等）的结构，对通过对象属性或数组下标等方式获取的数据进行运算。例如，在WXML文件中输入如下代码。二、数据绑定和事件绑定在相应的JS文件中输入如下代码。Page({data:{ //初始化数据

result:'true', //初始化普通数据

a:100,b:200,c:300,name:'张三',Student:{ //初始化对象数据

stuID:'20230112',name:'张三'},array:[ //初始化数组数据

'2021','2022','2023']}})二、数据绑定和事件绑定3．组合绑定组合绑定就是在双花括号内将绑定的数据进行组合，构成新的组合。组合绑定常用于数组或对象。下面以数组的组合绑定为例进行介绍。例如，在WXML文件中输入如下代码。<!--wx:for是控制属性，使用wx:for绑定数组并对组件进行渲染--><viewwx:for="{{[zero,1,2,3,4]}}">{{item}}</view>二、数据绑定和事件绑定在相应的JS文件中输入如下代码。Page({data:{ //初始化数据

zero:0}})组合绑定示例运行效果二、数据绑定和事件绑定（二）事件绑定事件绑定是指在组件中绑定一个事件，用于将用户在视图层的行为反馈到逻辑层进行处理，其写法与组件属性绑定类似，以key="value"的形式呈现。key以bind或catch开头，后面跟事件类型，如bindtap、catchtouchstartvalue是一个字符串，需要在相应JS文件的Page中定义同名的函数，否则事件触发时会报错。二、数据绑定和事件绑定相应JS文件的Page中的事件处理函数代码如下。Page({myTap(event){ //定义事件处理函数myTap，接收参数eventconsole.log('Theitemistapped') //在调试器的Console面板中输出提示信息

console.log(event.timeStamp+'-tap')//在调试器的Console面板中输出单击前后的毫秒数

}})<view><buttontype="primary"bindtap="myTap">点我吧</button></view>例如，在WXML文件的button组件中绑定一个tap事件，代码如下。小贴士事件处理函数的event参数包含许多信息，可通过console.log(event)在调试器的Console面板中输出event参数的内容。二、数据绑定和事件绑定当用户单击button组件时，myTap函数会自动执行。模拟器中的运行结果Console面板中的输出结果单击button组件保存上述代码单击“点我吧”按钮查看输出结果二、数据绑定和事件绑定WXML文件中一些常见的事件类型如表所示。常见的事件类型类

型描述touchstart手指触摸动作开始touchmove手指触摸后移动touchcancle手指触摸动作被打断，如来电提醒、弹窗等touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了该事件，tap事件将不会被触发二、数据绑定和事件绑定例如，有3个单击事件，它们是嵌套关系，并且都用bind绑定，WXML文件中的代码如右图。<viewid="outer"bindtap="outer">outerview<viewid="middle"bindtap="middle">middleview<viewid="inner"bindtap="inner">innerview</view></view></view>事件分类触发效果绑定冒泡事件向父节点传递使用bind事件绑定非冒泡事件不会向父节点传递，而是只处理相应的事件使用catch事件绑定微信小程序默认的事件均为冒泡事件二、数据绑定和事件绑定相应JS文件的Page中的事件处理函数代码如下。Page({outer(){console.log('outerbindtapclick')},middle(){console.log('middlebindtapclick')},inner(){console.log('innerbindtapclick')}})二、数据绑定和事件绑定保存上述代码后，在模拟器中分别单击“outerview”“middleview”和“innerview”，Console面板中的输出结果如图所示。单击“outerview”的输出结果单击“innerview”的输出结果单击“middleview”的输出结果Console面板中的输出结果二、数据绑定和事件绑定如果将WXML文件中middleview对应组件的bindtap改为catchtap，保存代码后，分别单击“middleview”和“innerview”，Console面板中的输出结果如图所示。可以看出两次单击都没有输出“outerbindtapclick”，这是因为catchtap阻止了tap事件冒泡。Console面板中的输出结果单击“middleview”的输出结果单击“innerview”的输出结果（一）条件渲染在WXML文件中，使用wx:if控制属性判断是否渲染组件。由于wx:if是一个控制属性，因此可以将其添加到组件中。示例代码如下。三、条件渲染和列表渲染<viewwx:if="{{condition}}">True</view>上述代码中，当condition为true时，会渲染对应的组件，否则不会渲染。小贴士wx:if控制属性与hidden控制属性实现的功能类似，区别在于，wx:if属性是根据条件判断是否渲染组件，而hidden属性控制的组件始终会进行渲染，只是根据属性值决定组件是否在页面中显示。一般来说，wx:if属性的切换消耗更高，而hidden属性的初始渲染消耗更高。因此，如果组件显示或切换比较频繁，最好使用hidden属性，反之则使用wx:if属性。三、条件渲染和列表渲染<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>3}}">2</view><viewwx:else>3</view>多条件判断方法使用wx:if和wx:else使用wx:if和wx:elif使用wx:if、wx:elif和wx:else三、条件渲染和列表渲染如果需要一次性判断多个组件，可以使用<block>标签将多个组件包装起来，并在开标签中使用wx:if控制属性。示例代码如下。<blockwx:if="{{condition}}"><view>view1</view><view>view2</view></block>小贴士<block>并不是一个组件，它只是一个包装元素，只支持控制属性，并不会对页面进行任何渲染。wx:if控制属性与hidden控制属性的区别？怎样在对象数组中唯一标识一个对象？三、条件渲染和列表渲染（二）列表渲染在开发微信小程序时，可以使用列表渲染将数组中的所有数据依次显示在页面上。在WXML文件中，使用wx:for控制属性绑定一个数组，就可以使用数组中的数据重复渲染组件。<!--绑定数组渲染--><viewwx:for="{{array}}">{{index}}:{{item}}</view>在相应的JS文件中输入如下代码。Page({data:{array:['view1','view2','view3']}})在WXML文件中输入如下代码。小贴士当wx:for绑定的数据为字符串时，会将字符串解析为字符数组。例如，<viewwx:for="array"></view>等同于<viewwx:for="{{['a','r','r','a','y']}}"></view>。三、条件渲染和列表渲染此外，还可以使用wx:for-index指定数组当前元素的下标变量名，使用wx:for-item指定数组当前元素的变量名。示例代码如下。<viewwx:for="{{array}}"wx:for-index="i"wx:for-item="j">{{i}}:{{j}}</view>三、条件渲染和列表渲染如果数组元素的位置会动态改变或有新的元素添加到数组中，但希望数组中的元素保持已有的特征和状态（如input中的输入内容、switch的选中状态等），则需要使用wx:key指定数组中元素的唯一标识符。示例代码：<!--*this代表for循环中的item,此时需要item是一个唯一的字符串或数字--><viewwx:for="{{array}}"wx:key="*this">{{index}}:{{item}}</view>小贴士如果wx:for绑定的数组为对象数组，则wx:key的值应为对象的key，这样就可以在对象数组中唯一标识一个对象。三、条件渲染和列表渲染操作：打开1号开关→单击“Addtothefront”按钮增加一个开关。结果：1号开关仍保持打开状态。wx:key的使用效果三、条件渲染和列表渲染如果明确知道数组是静态的，或者不关注其顺序，则可以不使用wx:key。与blockwx:if类似，也可以将wx:for用在<block>标签中，以此来渲染包含多个组件的结构块。示例代码如下。<blockwx:for="{{[1,2,3,4,5,6]}}"><view>这是序号：{{index}}</view><view>这是值：{{item}}</view></block>四、模板与引用（一）模板<templatename="stuTemp"><view>stuName:{{name}}</view><view>stuSex:{{sex}}</view><view>stuAge:{{age}}</view></template>例如，新建template.wxml文件，并在其中定义一个名为stuTemp的模板，用于显示学生的姓名、性别和年龄。模板的定义模板是在<template>标签中定义的代码片段。定义模板时，通常会新建一个WXML文件放置模板，并使用name属性定义模板名称。四、模板与引用（2）模板使用模板使用利用<import>标签的src属性引用模板所在的文件通过<template>标签的is属性声明需要使用的模板，通过data属性传入需要的数据其中，对象数据的传入可以通过“…对象名”或“属性名1:'属性值1',属性名2:'属性值2',……”的方式实现。小贴士WXS（WeiXinscript）是微信小程序的一套脚本语言，它将本应该放在JS文件中处理的代码直接放在WXML文件中处理，并结合WXML文件共同构建页面的结构。WXS有两种使用方式，一种是以<wxs>标签的形式嵌入WXML文件中，另一种是以扩展名为“wxs”的文件独立存在，然后在WXML文件中引用。四、模板与引用举例:在WXML文件中通过两种方法使用stuTemp模板。<importsrc="template.wxml"/><!--“...对象名”方式--><templateis="stuTemp"data="{{...person}}"/><!--“属性名1:'属性值1',属性名2:'属性值2',……”方式--><templateis="stuTemp"data="{{name:'李四',sex:'男',age:'24'}}"/>四、模板与引用在相应的JS文件中定义person对象。Page({data:{person:{name:'张三',sex:'男',age:'23'}}})四、模板与引用<template>标签的is属性还可以使用三元运算来动态决定使用的模板。例如，在template.wxml文件中定义temp1和temp2两个模板。<templatename="temp1"><view>使用temp1模板</view></template><templatename="temp2"><view>使用temp2模板</view></template>四、模板与引用在WXML文件中使用wx:for属性绑定一个数组，然后使用<template>标签的is属性判断数组中元素的奇偶来决定使用的模板，代码如下。<blockwx:for="{{[1,2,3,4,5]}}"><!--偶数使用temp1模板，奇数使用temp2模板--><templateis="{{item%2==0?'temp1':'temp2'}}"/></block>四、模板与引用（二）引用引用方式importinclude四、模板与引用在A.wxml文件中定义模板A，代码如下。<templatename="A"><text>Atemplate</text></template>（1）import引用import有作用域的概念。例如，有A、B、C3个页面，其中B引用A，C引用B，则B可以使用A中定义的模板，C可以使用B中定义的模板，但不可以使用A中定义的模板，否则会输出警告信息。四、模板与引用在B.wxml文件中引用A.wxml文件，并使用模板A，然后定义模板B。<importsrc="A.wxml"/><templateis="A"/><templatename="B"><text>Btemplate</text></template>在C.wxml文件中引用B.wxml文件，并使用模板A和模板B。<importsrc="B.wxml"/><templateis="A"/><templateis="B"/>四、模板与引用编译C.wxml文件后，Console面板会输出警告信息，提示“TemplateAnotfound”。Console面板输出的警告信息四、模板与引用（2）include引用include可以引用目标文件中除<template>标签和<wxs>标签外的其他内容。示例代码如下。<includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/>引用的header.wxml文件中的代码如下。<viewclass="header">首页</view><templatename="A"><text>Atemplate</text></template>四、模板与引用引用的footer.wxml文件中的代码如下。<viewclass="footer">欢迎访问</view>include引用示例运行效果开发微信小程序的流程是怎样的？“家电商城”微信小程序的首页主要包括搜索区、海报轮播区（后续任务实施会讲解，本任务实施暂时用广告语代替）、宫格导航区及家电秒杀区。本任务实施主要构建“家电商城”微信小程序首页的结构。构建“家电商城”微信小程序首页的结构任务实施“家电商城”微信小程序首页结构后续会不断完善该页面。构建“家电商城”微信小程序首页的结构任务实施“家电商城”微信小程序首页最终效果在index.wxml文件中通过view组件构建小程序首页结构的示范代码构建“家电商城”微信小程序首页的结构任务实施<viewclass="content"><viewclass="background"><!--搜索区--><viewclass="search"><textclass="searchContent">搜索商品</text></view><!--海报轮播区--><viewclass="logo"><viewclass="first">家电商城</view><viewclass="second">让家变得更完美</view>构建“家电商城”微信小程序首页的结构任务实施</view></view><!--宫格导航区--><viewclass="nav"><blockwx:for="{{navs}}"><viewclass="nav-item"><view>{{}}</view></view></block></view><!--分隔条--><viewclass="hr"></view><!--家电秒杀区--><viewclass="menu">家电秒杀</view></view>续在index.js文件的data属性中添加页面渲染初始数据的代码。构建“家电商城”微信小程序首页的结构任务实施Page({data:{navs:[{"name":"领优惠券"},{"name":"扫码购物"},{"name":"物流查询"},{"name":"拼团"}]}})任务二WXSS文件——小程序的样式（1）认识WXSS （2）选择器（3）尺寸单位

（4）盒模型（5）flex布局

（6）样式导入（7）内联样式任务描述（1）带领大家认识WXSS，学习选择器、尺寸单位、盒模型、flex布局，以及样式导入、内联样式的相关知识；（2）使用WXSS文件设置“家电商城”微信小程序首页的样式。一、认识WXSSWXSS（WeiXinstylesheets）是微信小程序的样式语言，用于描述WXML文件中组件的样式，如字体、颜色、布局等。基本语法格式如下。selector{property:value;}小贴士定义在app.wxss文件中的样式为全局样式，作用于所有页面；定义在页面的WXSS文件中的样式为页面样式，只作用于对应的页面，并会覆盖app.wxss文件中相同的选择器，即页面样式中的选择器优先级大于全局样式中的选择器。二、选择器WXSS支持的选择器选择器示例示例说明类选择器（.class）.intro选择所有具有class="intro"属性的组件ID选择器（#id）#firstname选择具有id="firstname"属性的组件元素选择器（element）view,text选择所有view组件和所有text组件伪元素选择器（::after）view::after在view组件后插入内容伪元素选择器（::before）view::before在view组件前插入内容二、选择器元素选择器是一种最简单的选择器，它以组件的名称作为选择器。text{color:red;}二、选择器（一）类选择器类选择器在实际开发中应用比较广泛。在WXML文件中为组件添加class属性在相应的WXSS文件中通过class属性值选择组件，方法是在class属性值前添加符号“.”二、选择器在相应的WXSS文件中输入如下代码。.myclass_1{ /*选择class属性值为myclass_1的组件*/font-size:15pt; /*设置文字大小为15pt*/}.myclass_2{ /*选择class属性值为myclass_2的组件*/font-size:17pt;font-weight:bold; /*设置文字加粗*/margin:20rpx; /*设置外边距为20rpx*/}<viewclass="myclass_1">myclass_1的样式</view><viewclass="myclass_2">myclass_2的样式</view>举例在WXML文件中输入如下代码。二、选择器运行效果类选择器示例运行效果小贴士如果一个组件的class属性有多个值，那么这些值对应的类选择器设置的样式都会应用到该组件上。（1）WXML文件中的代码。<viewclass="myclass_1title">myclass_1title的样式</view>（2）WXSS文件中的代码。.myclass_1{font-size:15pt;font-weight:bold;}.title{font-size:17pt; /*会覆盖前一个类选择器设置的font-size*/margin:27rpx;}二、选择器（二）ID选择器ID选择器可以为具有id属性（组件的唯一标识，在整个页面是唯一的）的组件设置样式，方法是在id属性值前添加符号“#”。例如，在WXML文件中输入如下代码。<view><text>普通文本</text><textid="myid">ID选择器的文本</text></view>二、选择器在相应的WXSS文件中输入如下代码。#myid{color:white; /*设置文本颜色为白色*/background-color:black; /*设置背景颜色为黑色*/}

ID选择器示例运行效果三、尺寸单位尺寸单位——rpx（responsivepixelrpx规定所有手机的屏幕宽度均为750rpx，微信小程序编译后，会进行一次单位换算，将rpx转换为px，自适应屏幕宽度。三、尺寸单位不同型号手机屏幕宽度的单位换算手机型号屏幕宽度（px）rpx转换为px（屏幕宽度/750）px转换为rpx（750/屏幕宽度）iPhone53201rpx≈0.43px1px≈2.34rpxiPhone63751rpx=0.5px1px=2rpxiPhone12/13（Pro）3901rpx=0.52px1px≈1.92rpxiPhone14ProMax4281rpx≈0.57px1px≈1.75rpx小贴士通常情况下，设置组件的宽度、高度或边距时，使用rpx作为尺寸单位，这样设置的样式通用性会更强。三、尺寸单位举例input组件（输入框）的宽度为700rpx，在模拟器中将手机型号分别切换为iPhone5和iPhone14ProMax，两种型号手机的显示效果如图所示。

（a）iPhone5（b）iPhone14ProMaxrpx单位显示效果三、尺寸单位如果将input组件的宽度由700rpx改为400px，然后在模拟器中将手机型号分别切换为iPhone5和iPhone14ProMax，两种型号手机的显示效果如图所示。

（a）iPhone5（b）iPhone14ProMaxpx单位显示效果四、盒模型盒模型（boxmodel）是页面布局的一个重要概念。它将WXML文件中的每个组件看作一个盒子，模型结构如图所示。盒模型结构四、盒模型盒模型外边距不同盒子之间的距离边框围绕在内容和内边距外的边框，可以设置其线条、粗细、颜色等内边距内容与边框之间的距离内容盒子的内容区域，可以放置文本、图像等四、盒模型在相应的WXSS文件中输入如下代码。.box{width:80%; /*设置宽度为其父容器宽度的80%*/height:234rpx; /*设置高度为234rpx*/border:5rpxsolid#000000; /*设置边框样式：宽度为5rpx，实线，黑色*/padding:20rpx; /*设置内边距为20rpx*/margin:20rpx; /*设置外边距为20rpx*/}举例WXML文件中输入如下代码。<viewclass="box"><text>盒模型的内容</text></view>四、盒模型运行效果盒模型示例运行效果四、盒模型默认情况下，width和height属性的值就是content的宽度和高度改变padding属性的值，组件大小会随之改变。将组件的box-sizing样式属性设置为border-box•width属性的值就是content的宽度加左右内边距，•

height属性的值就是content的高度加上下内边距。•改变padding属性的值，组件大小不会改变。小贴士在微信小程序开发中，容器是指包含和组织页面内容的组件，用于提供一个可以放置其他组件的区域。父容器是指当前组件的上一级组件。text组件是行内（inline）元素，view组件是块级（block）元素。两者明显的区别是，行内元素可以与其他行内元素在一行显示，而块级元素单独占一行；行内元素不能设置宽度和高度，其默认宽度就是文本的宽度，而块级元素可以设置宽度和高度，其默认宽度为父容器宽度。五、flex布局flex是flexiblebox的缩写，意为“弹性布局”，用于对容器进行布局，在小程序开发中比较常见。任何一个容器都可以设置flex布局。示例代码如下。.container{display:flex;}设置flex布局操作对块级元素使用display:flex设置对行内元素使用display:inline-flex设置五、flex布局采用flex布局的容器称为flex容器，其所有子元素会自动成为容器成员。默认情况下，flex容器的主轴（mainaxis）为水平方向，交叉轴（crossaxis）为竖直方向，子元素在主轴方向上按顺序排列。flex容器五、flex布局样式属性含义可选值flex-direction主轴方向，即子元素的排列方向row（默认，主轴为水平方向，从左到右排列）column（主轴为竖直方向，从上到下排列）row-reverse（主轴为水平方向，从右到左排列，与row相反）column-reverse（主轴为竖直方向，从下到上排列，与column相反）flex-wrap子元素是否换行及换行的方式nowrap（默认，自动缩小子元素，不换行）wrap（换行，且第一行在第二行上方）wrap-reverse（换行，且第一行在第二行下方）justify-content子元素在主轴上的对齐方式flex-start（默认，左对齐，若主轴为竖直方向，则为顶端对齐）flex-end（右对齐，若主轴为竖直方向，则为底部对齐）center（居中对齐）space-between（两端对齐）space-around（沿轴线均匀分布）align-items子元素在交叉轴上的对齐方式flex-start（与交叉轴的起点对齐）flex-end（与交叉轴的终点对齐）center（与交叉轴的中点对齐）baseline（子元素第一行文字的底部对齐）stretch（默认，若子元素未设置高度或高度为auto，则子元素与容器等高）五、flex布局例如，在WXML文件中使用view组件嵌套3个view组件，代码如下。<viewclass="container"><viewclass="item">item_1</view><viewclass="item">item_2</view><viewclass="item">item_3</view></view>上述代码中，class属性值为container的view组件是class属性值为item的view组件的父容器。五、flex布局在相应的WXSS文件中为组件设置样式，代码如下。.container{display:flex; /*设置flex布局*/height:200rpx; /*设置高度为200rpx*/border:1rpxsolid#000000; /*设置边框样式：宽度为1rpx，实线，黑色*/justify-content:space-between;/*设置子元素在主轴上的对齐方式为两端对齐*/align-items:center; /*设置子元素在交叉轴上的对齐方式为中点对齐*/}.item{border:1rpxsolid#000000;}flex布局示例运行效果小贴士view组件是微信小程序中比较常见的容器组件。在容器组件中，可以包含text、image等非容器组件，也可以包含view等容器组件。六、样式导入在WXSS文件中可以导入外联样式表，方法是在@import后加上需要导入的外联样式表的路径，然后用“;”结尾。例如，在pages/index目录下创建common.wxss文件，并输入如下代码。.myclass_1{font-weight:bold;}六、样式导入在index.wxss文件中导入common.wxss文件，代码如下。@import"common.wxss"; /*导入common.wxss文件*/.myclass_2{font-size:17pt;font-weight:bold;margin:20rpx;}通过上述代码创建并导入样式文件后，就可以在index.wxml文件中使用common.wxss文件中的样式了。七、内联样式组件的style属性用于设置内联样式，该属性会在运行时进行解析。<!--获取动态样式--><viewstyle="color:{{color}};"></view><!--写入静态样式--><viewstyle="color:red"></view>内联样式动态样式静态样式尽量避免将静态样式写入style，否则会影响渲染速度拓展阅读软件开发人员应具备规范严谨的工作作风。规范严谨的工作作风通常体现在程序设计的点点滴滴中，如项目的详细设计方案、各个模块和页面的编码、各阶段的项目文档等。软件开发人员应具备怎样的工作作风？本任务实施在任务一的基础上设置“家电商城”微信小程序首页的样式。设置“家电商城”微信小程序首页的样式任务实施“家电商城”微信小程序首页在index.wxml文件中完善小程序首页的结构，添加image组件，并为一些组件设置内联样式，参考代码。设置“家电商城”微信小程序首页的样式任务实施<viewclass="content"><viewclass="background"><!--搜索区--><viewclass="search"><imagesrc="/pages/images/icon/search.png"style="width:46rpx;height:46rpx"></image><textclass="searchContent">搜索商品</text></view><!--海报轮播区--><viewclass="logo"><viewclass="first">家电商城</view><viewclass="second">让家变得更完美</view></view></view>设置“家电商城”微信小程序首页的样式任务实施<!--宫格导航区--><viewclass="nav"style="margin-top:35rpx;"><blockwx:for="{{navs}}"wx:key="name"><viewclass="nav-item"><view><imagesrc="{{item.img}}"style="width:77rpx;height:70rpx;"></image></view><view>{{}}</view></view></block></view><!--分隔条--><viewclass="hr"></view><!--家电秒杀区--><viewclass="menu">家电秒杀</view></view>续在index.js文件的data属性中添加宫格导航区图片的路径，代码如下。设置“家电商城”微信小程序首页的样式任务实施Page({data:{navs:[{"img":"/pages/images/icon/lyhq.png","name":"领优惠券"},{"img":"/pages/images/icon/smgw.png","name":"扫码购物"},{"img":"/pages/images/icon/wlcx.png","name":"物流查询"},{"img":"/pages/images/icon/pt.png","name":"拼团"}]}})在index.wxss文件中通过类选择器选择组件，然后为其设置样式，代码如下。设置“家电商城”微信小程序首页的样式任务实施.content{font-family:"MicrosoftYaHei"; /*设置字体类型*/}.background{height:398rpx; /*设置高度*/padding-top:23rpx; /*设置上内边距*/background-color:#c81623; /*设置背景颜色*/text-align:center; /*设置文本水平居中*/}.search{width:94%;margin:12rpxauto; /*上下外边距为12rpx，左右外边距自动*/background-color:#f9f9f9;续前表设置“家电商城”微信小程序首页的样式任务实施border-radius:117rpx; /*设置边框圆角效果*/line-height:81rpx; /*设置行高*/}.searchContent{margin-left:12rpx; /*设置左外边距*/font-size:37rpx; /*设置字体大小*/color:#777777; /*设置文本颜色*/}.logo{color:#ffffff;}.first{margin-top:70rpx;font-size:24px;续前表设置“家电商城”微信小程序首页的样式任务实施font-weight:bold; /*文字加粗*/}.second{font-size:13px;}.nav-item{width:25%;display:inline-block; /*将元素设置为行内块级元素，并在同一行排列显示*/margin-bottom:23rpx; /*设置下外边距*/text-align:center;font-size:15px;}.hr{续前表设置“家电商城”微信小程序首页的样式任务实施height:23rpx;background-