微信小程序开发图解案例教程课件.pptx

1、第1章微信小程序开发图解案例教程（附精讲视频）认识微信小程序目录contents1.微信小程序介绍2.微信小程序开发准备3.微信小程序开发工具的使用4.沙场大练兵：Hello World 的创建3第1章 认识微信小程序1.1 微信小程序介绍2016年1月9日，腾讯公司启动了微信小程序产品的研发，于2017年1月9日正式发布。微 信小程序也被称为微信应用号。不同于微信订阅号或公众号，微信小程序被赋予了应用程序的 能力，它是一种不无需安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫 或者搜一下即可打开应用；也体现了“用完即走”的理念，用户不再需要关心是否安装太多应 用的问题。应用将无

2、处不在，随时随地可用，无需卸载。4第1章 认识微信小程序1.1.1 初识微信小程序在微信的“发现”界面中，可以找到小程序的入口，如左图所示。小程序的界面和使用方 法与App类似，右图所示是几个已发布的常用小程序界面。5第1章 认识微信小程序1.1.1 微信小程序的功能小程序提供的功能如下分享页功能分享对话功能线下扫码进入微信小程序功能挂起状态功能消息通知功能01OPTION02OPTION03OPTION04OPTION05OPTION小程序不提供的功能如下01OPTION02OPTION03OPTION04OPTION小程序没有集中入口，没有应用商店，用户可以通过搜索、扫描二维码、好 友分享

3、等多种途径进入微信小程序。小程序没有订阅关系，没有粉丝，只 有访问量。小程序不能推送消息。小程序不能做游戏。6第1章 认识微信小程序1.1.3微信小程序能否取代App 原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小 程序最大的优势。从这个角度来看，小程序是“跨平台”的。在现阶段，开发一套完整逻辑的应用程序，小程序的开发效率是低于App的。小程序独立出 了一个封闭的生态。小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组件，以前的echarts和hightcharts都无法使用。小程序不支持WebView，大量已被静态化好的HTML页面完全没办

4、法在小程序上展示。小程序想取代Android和iOS还要走很长的路，是蓝海还是死海需要时间来验证。7第1章 认识微信小程序1.1.4微信小程序的发展历程 微信小程序 正式上线。2017年1月9日 微信公众平 台对外公告，上线的微信小 程序最多可生 成10000个带参数的二维码。2016年12月30日 张小龙在微 信公开课中解 答外界对微信 小程序的几大 疑惑，包括没 有应用商店、没有推送消息 等。2016年12月28日 微信小程序 对外公测，开发完成后可以提交审 核，但公测 期间不能发 布。2016年11月3日 微信公众平 台对外发送 小程序内测 邀请，内侧 名额200个。2016年9月22日

5、 微信团队首 次提出应用 号的概念。2016年1月9日8第1章 认识微信小程序1.1.5微信小程序带来的机会微信小程序给很多想做程序员的人员提供了机会，因为它的门槛很低，不需要太难的技 术。学习微信小程序开发，就可以成为一名“小程序员”。例如，设计师、学生、创业、待 业青年、网虫、策划人员、编辑、草根站长等都可以转做程序员。程序员设计师学生创业待业青年网虫策划人员编辑草根站长目录contents1.微信小程序介绍2.微信小程序开发准备3.微信小程序开发工具的使用4.沙场大练兵：Hello World 的创建10第1章 认识微信小程序1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML

6、微信标记语言，它的使用 方法类似于HTML语言。另外，微信小 程序还定义了自己的样式语言WXSS，它兼容了CSS样式，并做了扩展；使 用JavaScript来进行业务处理，兼容了 大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程 序开发会容易很多。微信小程序WXML使用方法类似 于HTML语言WXSS兼容CSS样式 并做了扩展JavaScript兼容大部分JavaScript功能11第1章 认识微信小程序1.2.2开发准备Step 1注册微信开发者账号。Step 2下载微信小程序的开发工具。Step 3安装开发工具

7、。目录contents1.微信小程序介绍2.微信小程序开发准备3.微信小程序开发工具的使用4.沙场大练兵：Hello World 的创建13第1章 认识微信小程序1.3.1创建项目在开发工具里单击“本地小程序项目”，进入下图所示界面。单击“添加项目”，进入“添加项目”界面，可以添加一个新的项目，在这个界面 里需要填写AppID、项目名称、项目目录。14第1章 认识微信小程序1.3.2 编辑进入到开发工具里，在 左侧有7个导航模块：编辑、调试、项目、编译、后台、缓存和关闭。编辑模块用来 进行微信小程序的开发，右 侧是微信小程序的界面、项 目的目录和打开的页面15第1章 认识微信小程序1.3.2

8、编辑在硬盘中打开文件的 目录，可以新建4种文件：js、json、wxml、wxss，还可对文件进行重命名、删除和查找。16第1章 认识微信小程序1.3.2 编辑可以通过编辑区左边的 模拟器，实时预览编辑的情 况。修改 wxss、wxml 文件，会刷新当前page，修改js文 件或者json文件，会重新编 译小程序。17第1章 认识微信小程序1.3.2 编辑在代码编写过程中，开 发工具提供自动补全功能。js 文件编辑时，会帮助开发 者补全所有的API，并给出 相关的注释解释；wxml 文件 编辑时，会帮助开发者直接 写出相关的标签；json 文件 编辑时，会帮助开发者补全 相关的配置，并给出实时

9、的 提示。18第1章 认识微信小程序1.3.3 常用快捷键Ctrl+S：保存文件Ctrl+，Ctrl+：代码行缩进Ctrl+Shift+，Ctrl+Shift+：折叠 打开代码块Ctrl+C Ctrl+V：复制粘贴，如果没 有选中任何文字则复制粘贴一行Shift+Alt+F：代码格式化Alt+Up，Alt+Down：上下移动一行Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行Ctrl+Shift+Enter：在当前行上方插 入一行Ctrl+Shift+F：全局搜索1.格式调整快捷键 Ctrl+End：移动到文件结尾 Ctrl+Home：移动到文件开头 Ctrl+i：选中

10、当前行 Shift+End：选择从光标到行尾 Shift+Home：选择从行首到光标 处 Ctrl+Shift+L：选中所有匹配 Ctrl+D：选中匹配 Ctrl+U：光标回退2.光标相关快捷键 Ctrl+：隐藏侧边栏 Ctrl+m：打开或者隐藏模拟器3.界面相关快捷键19第1章 认识微信小程序1.3.4 调试Console窗口用来显示小程序的错误输出信息和调试代码。20第1章 认识微信小程序1.3.4 调试Sources窗口用于显示当前项目的脚本文件，在 Sources中开发者看到的文件是经过处理之后的脚本文件。21第1章 认识微信小程序1.3.4 调试Network窗口用来观察发送的请求和

11、调用文件的信息。22第1章 认识微信小程序1.3.4 调试Storage窗口用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。23第1章 认识微信小程序1.3.4 调试AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目的数据情况，可以在此处编辑数 据，并将其及时地反馈到界面上。24第1章 认识微信小程序1.3.4 调试Wxml窗口用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss 属性，同时可以修改对应的wxss 属性。25第1章 认识微信小程序1.3.5 项目在项目模块里

12、，可以看到微信小程序项目的相关信息，包括项目名称、AppID、项目文件的路径。有AppID的项目，可以在手机上预览微信小程序。26第1章 认识微信小程序1.3.6 编译编译模块可以对整个项目进行重新编译。27第1章 认识微信小程序1.3.7 前台/后台后台是指微信小程序从前台进入到后台。例如，在操作微信小程序的过程中，突然来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台进入到前台。28第1章 认识微信小程序1.3.8 缓存缓存模块用来清除数据存储、文件存储、用户授权数据。目录contents1.微信小程序介绍2.微信小程序开发准备3.微信小程序开发工具的使用4.沙场

13、大练兵：Hello World 的创建沙场大练兵/在创建项目之后，开发工 具会添加默认的目录和页面，在默认的页面上，可以看到有 “Hello World”文字。Hello World 的创建31第1章 认识微信小程序（1）在pages/index/index.js文件里，Page的data里提供数据源motto，data的数据可以 动态地绑定到WXML页面里。1.4 沙场大练兵：Hello World 的创建32第1章 认识微信小程序（2）在pages/index/index.wxml文件里，通过双大括号的（）方式，将motto绑定到页 面里，motto对应的值就可以在页面里显示出来。1.4

14、沙场大练兵：Hello World 的创建33第1章 认识微信小程序（3）在pages/index/index.wxss文件里，通过class的方式给Hello World添加样式，距顶 部的高度为200px。1.4 沙场大练兵：Hello World 的创建T h a n ky o u！微信小程序开发图解案例教程第2章微信小程序开发图解案例教程（附精讲视频）微信小程序框架分析目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.

15、沙场大练兵：仿香哈菜谱微信小程序3第2章 微信小程序框架分析2.1 微信小程序目录结构介绍微信小程序目录结构可以分为3个部分：框架全局文件、框架页面文件和工具类文件，如 图所示。4第2章 微信小程序框架分析2.1.1框架全局文件一个小程序的主体部分由3个文件组成，作为全局文件，必须放在项目的根目录中。框架 全局文件包括3个文件：App.wxss小程序公共样式表、App.json小程序公共设置和App.js小程 序逻辑（定义全局数据以及定义函数文件），它们对所有页面都有效，如表所示。5第2章 微信小程序框架分析2.1.1框架全局文件1App.js小程序逻辑App.js文件用来定义全局数据和 函数

16、的使用，它可以指定微信小程序 的生命周期函数。生命周期函数可以 理解为微信小程序自己定义的函数，如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段、不同场景可以使用不同的生命周期函 数。此外，App.js中还可以定义一些全 局的函数和数据，其他页面引用App.js 文件后就可以直接使用全局函数和数 据，如图所示。6第2章 微信小程序框架分析2.1.1框架全局文件配置页面路径配置窗口表现配置标签导航配置网络超时配置debug模式2App.json小程序公共设置App.json文件可以对5个功能进 行设置：01OPTION02OPT

17、ION03OPTION04OPTION05OPTION7第2章 微信小程序框架分析2.1.2工具类文件在微信小程序框架目录里有一个“utils”文件夹，它用来存放工具栏的js函数，如可以放置一些 日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后，要通过module.exports将定义的函数名称注册进来，在其他的页面才可以使用，如图所示为时间格式化工 具类文件。8第2章 微信小程序框架分析2.1.3框架页面文件一个小程序框架页面文件由4个文件组成，分别是js页面逻辑、wxml页面结构、wxss页面 样式表和json页面配置，如表所示。9第2章 微信小程序框架分析2.1.3框

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

19、信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序12第2章 微信小程序框架分析2.2微信小程序注册程序应用App.js文件不仅可以定义全局函数和数据，还可以注册一个小程序。在App()函数里可以完 成小程序的注册以及指定其生命周期函数。如表所示为生命周期函数的定义。13第2章 微信小程序框架分析2.2 微信小程序注册程序应用onLaunch生命周期函数。它用来监听小程序初始化，一旦初始化完成，就会触发该函数，这个生命周期函数只会触发一次。onS

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

21、程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序15第2章 微信小程序框架分析2.3微信小程序注册页面的使用在每个页面文件夹里，都有 一个页面对应的js文件，就像日 志“logs”文件夹，对应的就是logs.js 文件。在这个文件里的Page()函数用于注册一个页面。接受一个object 参数，其指定页 面的初始数据、生命周期函数、事件处理函数等页面的所有业 务逻辑处理都放在这个文件里。object参数说明如表所示。16第2章 微信小程序框架分析2.3.1页面初始化数据data页面初始化数据：初始化数

22、据将作为页面的第一次渲染。data 将会以 JSON 的形式由 逻辑层传至渲染层，所以其数据必须可以转换成 JSON 的格式字符串、数字、布尔值、对 象或数组。渲染界面可以通过 WXML 对数据进行绑定。17第2章 微信小程序框架分析2.3.2生命周期函数onLoad页面加载。一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。onShow页面显示。每次打开页面都会调用一次。onReady页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视 图层进行交互，对界面的设置如wx.setNavigationBarTitl

23、e请在onReady之后设置。onHide页面隐藏。当navigateTo或底部Tab切换时调用。onUnload页面卸载。当redirectTo或navigateBack时调用。1234518第2章 微信小程序框架分析2.3.3页面相关事件处理函数onPullDownRefresh下拉刷新。监听用户下拉刷新事件，需要在config的window选项中开 启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当 前页面的下拉刷新。onShareAppMessage用户分享。只有定义了此事件处理函数，右上角菜单才会显示“分 享”按钮

24、，用户单击“分享”按钮的时候会调用，此事件需要 return 一个 Object，用于 自定义分享内容。分享参数说明如表所示。1219第2章 微信小程序框架分析2.3.4页面路由管理微信小程序的页面路由都是有微信小程序框架来管理的，路由的触发方式及页面生命周期 函数如表所示。20第2章 微信小程序框架分析2.3.5自定义函数除了初始化数据和生命周期函 数，Page 中还可以定义一些特殊 的函数：事件处理函数。在渲染层 可以在组件中加入事件绑定，当达 到触发事件时，就会执行 Page 中 定义的事件处理函数。click me Page(clickMe:function()console.log(

25、view tap)21第2章 微信小程序框架分析2.3.6setData设值函数 Page.prototype.setData()设值函数：setData 函数用于将数据从逻辑层发送到视图层，同时 改变对应的 this.data 的值。setData()参数格式：接受一个对象，以 key、value 的形式表示将 this.data 中的 key 对应的 值改变成 value。其中，key 可以非常灵活，以数据路径的形式给出，如 array2.message，a.b.c.d，并且不 需要在this.data 中预先定义。目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3

26、.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序23第2章 微信小程序框架分析2.4微信小程序如何绑定数据WXML页面里的动态数据都是来自js 文件Page的data，数据绑定就是通过双大 括号（）将变量包起来，在WXML页面 里将数据值显示出来。index.wxml message index.js Page(data:message:Hello MINA!)24第2章 微信小程序框架分析2.4.1组件属性绑定组件属性绑定是将data里的数据绑定 到微信小程序的组

27、件上。Page(data:id:0)25第2章 微信小程序框架分析2.4.2控制属性绑定控制属性绑定用来进行if语句条件 判断，如果满足条件，则执行，否则 不执行，示例代码如下。Page(data:condition:true)26第2章 微信小程序框架分析2.4.3关键字绑定关键字绑定常用于组件的一些关键字，像复选框组件一样。checked关键字如果等于true 则代表选中复选框，false则代表不选中复选框。27第2章 微信小程序框架分析2.4.4运算01三元运算OPTION02数学运算OPTION03逻辑判断OPTION04字符串运算OPTION05数据路径运算OPTION可以在 内进行

28、简单的运算，支持以下几种方式的运算。28第2章 微信小程序框架分析2.4.5小试牛刀：天气微信小程序小试牛刀：天气微信小程序天气微信小程序用来显示天气的温度、最低温度、最高温度及天气情况，下面通过数据绑定的方式来显 示天气情况，如图所示。目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序30第2章 微信小程序框架分析2.5.1wx:if 判断单个组件在微信小程序框架里，使用 wx:if=”con

29、dition”来判断是否需要渲染该代码块，示例代码 如下。使用 wx:elif 和 wx:else 来添加一个 else 块，示例代码如下。True 5”1 2”2 3 31第2章 微信小程序框架分析2.5.2block wx:if 判断多个组件因为 wx:if 是一个控制属性，需要 将它添加到一个标签上。但是，如果 我们想一次性判断多个组件标签，则 可以使用一个 标签将多个组 件包装起来，并在其上使用 wx:if 控制 属性。view1 view2 目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件

30、渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序33第2章 微信小程序框架分析2.6.1wx:for 列表渲染单个组件在组件上使用wx:for控制属性绑 定一个数组，即可使用数组中的各项 数据重复渲染该组件。默认数组当前 项的下标变量名默认为index，数组当 前项的变量名默认为item，示例代码 如下。index:item.messagePage(data:array:message:foo,message:bar)34第2章 微信小程序框架分析2.6.1wx:for 列表渲染单个组件使用 wx:for-item 可以指定数组当前元

31、素的变量名，使用 wx:for-index 可以指定数组当前 下标的变量名，示例代码如下。idx:itemName.message35第2章 微信小程序框架分析2.6.2block wx:for 列表渲染多个组件wx:for应用在某一个组件上，但 是如果想渲染一个包含多节点的结构 块，wx:for就需要应用在标签 上，示例代码如下。index:item 36第2章 微信小程序框架分析2.6.3wx:key 指定唯一标识符如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己 的特征和状态（如 中的输入内容、的选中状态），需要使用 wx:key 来指定列表中项 目

32、的唯一标识符。wx:key 的值有以下两种形式。1.字符串。字符串代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列 表中唯一的字符串或数字，且不能动态改变。2.保留关键字。*this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字 符串或者数字，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确 保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时 的效率。目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册

33、页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序38第2章 微信小程序框架分析2.7.1定义模板在内定义代码片段，使用name属性作为模板的名字，示 例代码如下。index:msg Time:time 39第2章 微信小程序框架分析2.7.2使用模板在WXML文件里，使用is属性，声明需要使用的模板，然后将模板 所需要的data传入，示例代码如下。Page(data:item:index:0,msg:this is a template,time:2016-09-15)40第2章

34、微信小程序框架分析2.7.2使用模板is 属性可以使用三元运算语法来动态地决定具体需要渲染哪个模板，示例代码如下。odd even 目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序42第2章 微信小程序框架分析2.8.1import引用import可以在该文件中使用目标文件定义的template。假如在 item.wxml 中定义了一个叫item的template，则示例代码如下。text在

35、index.wxml 中引用了 item.wxml，就可以使用item模板，示例代码如下。43第2章 微信小程序框架分析2.8.2include引用include可以将目标文件除了之外的整个代码引入，相当于是复制到include位置，示例代码如下。body header footer 目录contents1.微信小程序目录结构介绍2.微信小程序注册程序应用3.微信小程序注册页面的使用4.微信小程序如何绑定数据5.微信小程序条件渲染6.微信小程序列表渲染7.微信小程序定义模板8.微信小程序的引用功能9.沙场大练兵：仿香哈菜谱微信小程序沙场大练兵/香哈菜谱是围绕美食而做 的一款小程序，在这里可以查

36、 看各式各样的菜谱以及制作方 法。对于菜谱类App软件，用 户使用的频次不高。当用户碰 到不会做的菜式或者想做一些 新的菜式时，才会去App软件 查看，而微信小程序就可以满 足这种低频使用的需要，如图 所示。仿香哈菜谱微信小程序46第2章 微信小程序框架分析2.9.1底部标签导航设计仿香哈菜谱微信小程序的底部有5个导航标签：学做 菜、头条、美食圈、消息、我的，标签导航选中时导航 图标和导航文字都会变为红色，如下图所示。2.9 沙场大练兵：仿香哈菜谱微信小程序2.9.2宫格导航设计“学做菜”界面中海报轮播的图片，在微信小程序 里有专门的swiper滑块视图组件来实现这个效果，在以 后的章节中我们

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

38、T h a n ky o u！微信小程序开发图解案例教程第3章微信小程序开发图解案例教程（附精讲视频）用微信小程序组件构建UI界面目录contents1.视图容器组件2.基础内容组件2.3 丰富的表单组件4.导航组件5.媒体组件6.地图组件7.画布组件8.沙场大练兵：表单登录注册微信小程序3第3章 用微信小程序组件构建UI界面3.1.1view视图容器view视图容器是WXML界面布局的基础组件，它和HTML里的div功能类似，用来进行界面 的布局。view视图容器也有自己的属性，如表所示。4第3章 用微信小程序组件构建UI界面3.1.1view视图容器在WXML界面里使用view布局，渲染出

39、界面内容，如图所示。5第3章 用微信小程序组件构建UI界面3.1.2scroll-view可滚动视图区域scroll-view可滚动视图区域允许视图区域内容横向滚动或者纵向滚动，类似于浏览器横向 滚动条和垂直滚动条的使用。scroll-view拥有自己的属性和事件，如表所示。6第3章 用微信小程序组件构建UI界面3.1.2scroll-view可滚动视图区域1纵向滚动允 许 内 容 纵 向 滚 动，需 要 给一个固定高度，可以绑 定滚动到顶部左边（bindscrolltoupper）、滚动到底部/右边（bindscrolltolower）、滚动时（bindscroll）触发的事件，也可以滚 动

40、到指定的id区域（scroll-into-view）。下面实现纵向滚动，如图所示。7第3章 用微信小程序组件构建UI界面3.1.2scroll-view可滚动视图区域2横向滚动在使用今日头条或腾讯新闻时，在新闻列表的上方都会有新闻频道供 我们单击，可以向左滑动和向右滑动 来查看相应类别的新闻，可以采用 scroll-view来实现这些新闻频道的横 向滚动，如图所示。8第3章 用微信小程序组件构建UI界面3.1.3swiper滑块视图容器swiper滑块视图容器用来在指定区域内切换内容的显示，常用于制作海报轮播效果和页签 内容的切换效果。它的属性如表所示。9第3章 用微信小程序组件构建UI界面3

41、.1.3swiper滑块视图容器1海报轮播效果海报轮播效果常用来展示商品图片信息或者广告信息，是很多网站或者App软件都会采 用的一种布局方式，如图所示。10第3章 用微信小程序组件构建UI界面3.1.3swiper滑块视图容器2.页签切换效果swiper滑块视图容器除了可以 用来进行海报轮播效果的实现外，还可以进行页签切换效果的实现，常用于多种方式的登录或者多种类 别的切换，如图所示。目录contents1.视图容器组件2.基础内容组件2.3 丰富的表单组件4.导航组件5.媒体组件6.地图组件7.画布组件8.沙场大练兵：表单登录注册微信小程序12第3章 用微信小程序组件构建UI界面3.2.1

42、icon图标组件微信小程序提供了丰富的图标组件，应用于不同的场景，有成功、警告、提示、取消、下载等不同含义的图标，如图所示。icon图标组件有3个属性：图标的类 型type、图标的大小size和图标的颜色 color，如表所示。13第3章 用微信小程序组件构建UI界面3.2.2text文本组件text文本组件支持转义符“”，如换行n、空格t，组件内只支持 嵌套，除了文本节点，其他节点都无法长按选中。14第3章 用微信小程序组件构建UI界面3.2.3 progress进度条Progress进度条组件是一种提高用户体 验度的组件，就像视频播放一样，可以通过 进度条看到完整视频的长度、当前播放的进

43、度，这样让用户能合理的安排自己的时间，提高用户的体验度，微信小程序也提供了progress进度条组件，它的属性如表所示。目录contents1.视图容器组件2.基础内容组件2.3 丰富的表单组件4.导航组件5.媒体组件6.地图组件7.画布组件8.沙场大练兵：表单登录注册微信小程序16第3章 用微信小程序组件构建UI界面3.3.1button按钮button按钮组件提供3种类型的 按钮：基本类型按钮、默认类型按钮 和警告类型按钮，同时提供两种大小 形状的按钮：默认和mini按钮，如图 所示。17第3章 用微信小程序组件构建UI界面3.3.1button按钮button按钮组件有很多属性，每个属性

44、有不同的作用，如表所示。18第3章 用微信小程序组件构建UI界面3.3.2checkbox多项选择器checkbox多项选择器组件，也就是我们常说的复选框，用来进行多项选择的时候会用 到checkbox多项选择器。它的属性如表所示。19第3章 用微信小程序组件构建UI界面3.3.4input单行输入框input单行输入框用来输 入单行文本内容，其属性如 表所示。20第3章 用微信小程序组件构建UI界面3.3.5textarea多行输入框textarea多行输入框是与input单行输入框对应的一个 组件，它可以输入多行文本 内容。它的属性如表所示。21第3章 用微信小程序组件构建UI界面3.3.

45、6 label改进表单可用性1.label组件没有定义for属性label 组件没有定义for 属性时，在label 内包含、这些组件，当单击label组件时，会触发label内包含的第一个控件，假如在第 一个位置，就会触发对应的事件，假如在第一位，就会触发radio对应的事件。22第3章 用微信小程序组件构建UI界面3.3.6 label改进表单可用性2.label组件定义for属性label组件定义for属性后，它会根据for属性的值找到组件id一样的值，然后会触发这个组件 的相应事件。23第3章 用微信小程序组件构建UI界面3.3.7 picker滚动选择器picker滚动选择器，支持三

46、种滚动选择器：普通选择器，时间选择器，日期选择器，默认是 普通选择器，如图所示。24第3章 用微信小程序组件构建UI界面3.3.8 slider滑动选择器slider滑动选择器组件，经常用来 控制声音的大小、屏幕的亮度等场景 的使用，它可以设置滑动步长、显示 当前值以及设置最小值/最大值，如右 图所示。25第3章 用微信小程序组件构建UI界面3.3.8 slider滑动选择器slider滑动选择器组件它的属性如下表所示。26第3章 用微信小程序组件构建UI界面3.3.9switch开关选择器switch开关选择器应用得十分普遍，它有两个状态：开或者关，在很多场景都 会用到开关这个功能，如微信设

47、置里的“新消息提醒”界面，通过开关来设置是 否接收消息、显示消息、是否有声音、是 否震动等功能，如图所示。27第3章 用微信小程序组件构建UI界面3.3.9switch开关选择器switch开关选择器它的属性可以设置为是否选中、开关类型、颜色以及绑定事件，如表 所示。28第3章 用微信小程序组件构建UI界面3.3.10form表单form表单组件用来将表单里组件的值提交给Java Script逻辑层进行处理，它可以提交 这些组件的值。提交表单的时 候，会借助于button组件的formType为submit的属性，将表单组件中的 value 值进行提交，需要在表单组件中加上name 来作为 k

48、ey。form表单的属性如表所示。目录contents1.视图容器组件2.基础内容组件2.3 丰富的表单组件4.导航组件5.媒体组件6.地图组件7.画布组件8.沙场大练兵：表单登录注册微信小程序30第3章 用微信小程序组件构建UI界面3.4.1 navigator页面链接组件navigator页面链接组件是用在WXML页面中跳转的导航，它有3种类型：第1种是保留 当前页跳转，跳转后可以返回当前页，它与wx.navigateTo跳转效果是一样的；第2种是关闭 当前页跳转，是无法返回当前页，它与wx.redirectTo跳转效果是一样的；第3种是跳转到底 部标签导航指定的页面，它与wx.switc

49、hTab跳转效果是一样的；navigator页面链接组件的 这些跳转效果都是通过open-type属性来控制的，具体属性如表所示。31第3章 用微信小程序组件构建UI界面3.4.2wx.navigateTo保留当前页跳转wx.navigateTo保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以 返回到原页面，具体属性如表所示。32第3章 用微信小程序组件构建UI界面3.4.3wx.redirectTo关闭当前页跳转wx.redirectTo关闭当前页面，跳转到应用内的某个页面，具体属性如表所示。33第3章 用微信小程序组件构建UI界面3.4.4wx.switchTa

50、b跳转到tabBar页面跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，具体属性如表所示。34第3章 用微信小程序组件构建UI界面3.4.5wx.navigateBack返回上一页wx.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，决定需要返回几层。具体属性如表所示。35第3章 用微信小程序组件构建UI界面3.4.6设置导航条wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。具体属性如表所示。目录contents1.视图容器组件2.基础内容组件2.3 丰富的表单组