微信小程序开发实战教程课件

1、第1章 微信小程序入门初识微信小程序小程序的开发体验开发环境搭建团队开发与项目上线学习目标掌握了解掌握掌握了解微信小程序的概念及发展前景12掌握微信小程序开发工具的使用3掌握微信小程序的基本功能4掌握微信小程序的目录结构目录点击查看本节相关知识点点击查看本节相关知识点开发环境搭建1.21.1初识微信小程序点击查看本节相关知识点1.3小程序开发体验点击查看本节相关知识点团队开发与项目上线1.4微信小程序：是一种不需要安装即可使用的应用，用户只需扫一扫或搜一下即可打开应用，无需安装或卸载。1.1 初识微信小程序1 什么是微信小程序 特点应用体积小无需安装触手可及无需卸载微信小程序与原生App的关系

2、图。关系特点：跨平台（支持iOS/Android）与微信紧密结合扫一扫或搜一搜可以获取小程序一键登录1.1 初识微信小程序1 什么是微信小程序 1.1 初识微信小程序媒体交通电商微信小程序覆盖的领域：1 什么是微信小程序 1.1 初识微信小程序1 什么是微信小程序 微信小程序存在的必要性：小程序可以完成订票、打车、订餐等服务。服务号的功能薄弱，而小程序功能强大。小程序可以被附近用户搜索到。小程序可以结合公众平台来推广。1.1 初识微信小程序1 什么是微信小程序 微信小程序发展数据：1.1 初识微信小程序1 什么是微信小程序 微信小程序热门应用案例。美团外卖摩拜单车链家租房1.1 初识微信小程序

3、1 什么是微信小程序 单击微信中的搜索按钮，输入关键词“美团外卖”。1.1 初识微信小程序微信小程序的功能界定。支持的功能不支持的功能线下扫码小程序没有集中入口，没有应用商店挂起状态小程序没有订阅关系消息通知小程序不能主动推动消息（可用模板消息）小程序和公众号的关联-小程序的搜索和历史列表-1 什么是微信小程序 1.1 初识微信小程序2 微信小程序账号 微信公众平台账号分类：小程序与订阅号、服务号的区别：对比项小程序订阅号和服务号加载及组件加载慢，专门提供组件加载快，使用风格统一且近乎原生的页面组件运营后台实时数据非实时数据接口数量丰富的接口，如文件操作、设备相关、动画等接口数量比较少，只提供

4、有限的功能，受限于浏览器1.1 初识微信小程序2 微信小程序账号 1.1 初识微信小程序3 微信小程序的特点 微信小程序与原生App、Web App的区别：对比项小程序订阅号和服务号Web App下载无需下载，通过扫码等方式获取从iOS和Android应用商店中下载无需下载通过浏览器进入安装无需安装安装在手机中占用存储空间无需安装升级无需升级需要升级操作无需升级开发成本开发周期短开发周期长开发周期适中开发周期开发成本低开发成本高开发成本适中1.1 初识微信小程序4 微信小程序的发展前景 微信小程序迅速发展表现：生态体系。微信小程序通过对开发者的支持加大，能够实现更多的功能。企业中也会大量引入微

5、信小程序业务开展，如滴滴打车、美团外卖、货拉拉等等。开放能力。方便开发者进行深度挖掘。微信小程序的配套服务将会不断完善，对发展起到推动作用。用户黏性。随着微信小程序用户量的发展，用户对产品的诉求的不断提高，用户对产品的改进意见越来越多，会帮助微信小程序的发展。未来小程序和微信之间将实现更佳的链接，用户获取小程序更加方便。1.2 开发环境搭建1 注册微信公众号 注册微信公众号的步骤：浏览器打开“”选择注册的账号类型单击“小程序”完成注册1.2 开发环境搭建1 注册微信公众号 微信公众号展示图：1.2 开发环境搭建1 注册微信公众号 微信小程序公众号注册完成后，进入微信小程序管理后台：1.2 开发

6、环境搭建1 注册微信公众号 在“设置”-“开发设置”中查看AppID，为小程序开发做准备：1.2 开发环境搭建2 安装微信开发者工具 在微信公众平台网站中找到微信开发工具的下载地址：1.2 开发环境搭建2 安装微信开发者工具 Windows 7操作系统为例，演示开发者工具的安装和使用，具体步骤如下：双击下载后的安装包，安装程序打开后单击“下一步”单击“我接受”单击“安装”1.2 开发环境搭建2 安装微信开发者工具 安装向导：1.3 小程序开发体验1 创建项目 首次微信扫码登录，登录成功后选择开发模式：1.3 小程序开发体验1 创建项目 单击“小程序”项目，就可以创建一个新的小程序项目：1.3

7、小程序开发体验2 开发者工具的使用 小程序项目创建成功后，就会进入到开发调试环境中。1.3 小程序开发体验2 开发者工具的使用 1.3 小程序开发体验2 开发者工具的使用 通过菜单栏可以访问微信开发者工具的大部分功能：项目：用于新建项目或打开一个现有的项目。文件：用于新建文件、保存文件或关闭文件。编辑：用于编辑代码，对代码进行格式化。工具：用于访问一些辅助工具。界面：用于控制界面中各部分的显示和隐藏。设置：用于对外观、快捷键、编辑器等进行设置。微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。1.3 小程序开发体验2 开发者工具的使用 工具栏提供了一些常用功能的快捷按钮，具体解释如下

8、：个人中心：位于工具栏最左侧第1个按钮，显示当前登录用户头像。模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。云开发：开发者可以使用云开发来开发小程序、小游戏。云开发能力从基础库2.2.3开始支持。1.3 小程序开发体验2 开发者工具的使用 工具栏提供了一些常用功能的快捷按钮，具体解释如下：模式切换下拉菜单：用于在小程序模式搜索动态页和插件模式之间切换。编译下拉菜单：用于切换编译模式，默认为普通编译。编译：编写小程序的代码后，需要编译才能运行。1.3 小程序开发体验2 开发者工具的使用 工具栏提供了一些常用功能的快捷按钮，具体解释如下：预览：单击预览按钮会生成一个二维码，使用手机中的微信

9、扫描二维码。真机调试：通过网络连接对手机上运行的小程序进行调试。切后台：用于模拟小程序在手机中切后台的效果。清缓存：用于清除数据缓存、文件缓存等。1.3 小程序开发体验2 开发者工具的使用工具栏提供了一些常用功能的快捷按钮，具体解释如下：上传：用于将代码上传到小程序管理后台。版本管理：用于通过Git对小程序进行版本管理。1.3 小程序开发体验2 开发者工具的使用 模拟器用于模拟手机环境，查看不同型号手机的运行效果：1.3 小程序开发体验2 开发者工具的使用 编辑器：分为左右两栏：左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件：就可以在右栏中对该文件进行编辑。1.3 小程序开发

10、体验2 开发者工具的使用 调试器类似于Google Chrome浏览器中的开发者工具：Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。Sources：源代码面板，可以查看或编辑源代码，并支持代码调试。Network：网络面板，记录网络请求信息，根据它可进行网络性能优化。Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。1.3 小程序开发体验调试器类似于Google Chrome浏览器中的开发者工具：AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。Audits：审计面板，用于对小程序进行体验评分。Sensor：传感器面板，用于模

11、拟地理位置、重力感应。 Storage：存储面板，用于查看和管理本地数据缓存。Trace：跟踪面板，用于真机调试时跟踪调试信息。Wxml：Wxml面板，用于查看和调试WXML和WXSS。2 开发者工具的使用 1.3 小程序开发体验3 目录结构 “Hello World”小程序的目录结构：路径说明project.config.json项目配置文件app.js应用程序的逻辑文件app.json应用程序的配置文件app.wxss应用程序公共样式文件pages/存放页面文件目录1.3 小程序开发体验3 目录结构 “Hello World”小程序的目录结构：路径说明pages/index/存放index

12、页面的目录pages/index/index.jsIndex页面的逻辑文件pages/index/index.wxmlIndex页面的结构文件pages/index/index.wxssIndex页面的样式文件pages/logs/存放logs页面的目录1.3 小程序开发体验3 目录结构 “Hello World”小程序的目录结构：路径说明pages/logs/logs.jslogs页面的逻辑文件pages/logs/logs.jsonlogs页面的配置文件pages/logs/logs.wxmllogs页面的结构文件pages/logs/logs.wxsslogs页面的样式文件utils/存

13、放公共脚本文件的目录utils/utils.js公共脚本文件，保存一些工具代码1.3 小程序开发体验3 目录结构 单击头像即可进入到登录日志页，查看用户登录的历史记录：1.3 小程序开发体验3 目录结构 每个页面由wxml、wxss、js和json文件组成：1.3 小程序开发体验3 目录结构 app.json文件中的pages配置项用来生成index页面： pages: pages/index/index, pages/logs/logs ,index页面/事件处理函数bindViewTap: function() wx.navigateTo(url: ./logs/logs),事件处理函数1

14、.3 小程序开发体验4 项目设置 在微信开发者工具中，执行菜单栏中的“设置”-“项目设置”命令：1.3 小程序开发体验4 项目设置 设置项目及含义：项目设置：对当前项目进行设置。域名信息：小程序的安全域名信息，合法域名可在管理后台进行设置。调试基础库：选择基础库版本，用于在对应版本的微信客户端上运行。1.3 小程序开发体验4 项目设置 设置项目及含义：ES6转ES5：将JavaScript代码的ES6语法转换为ES5语法。上传代码时样式自动补全：自动检测并补全缺失样式。上传代码时自动压缩：压缩代码，缩小代码体积。使用npm模块：在小程序中使用npm安装第三方包。1.3 小程序开发体验4 项目设

15、置 设置项目及含义：启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令。不校验合法域名、web-view（业务域名）、TlS版本以及HTTpS证书：在真实环境中会对这些信息进行校验。1.3 小程序开发体验5 快捷键 为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+/注释或取消注释Shift+Home选择从行首到光标处Shift+End选择从光标到行尾Ctrl+Shift+l选中所有匹配Ctrl+Home移动到文件的开头1.3 小程序开发体验5 快捷键 为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+End移动到

16、文件的结尾Ctrl+I选中当前行Ctrl+U光标回退Ctrl+D选中匹配Ctrl+C复制（如果没有选中任何文字则复制一行）1.3 小程序开发体验5 快捷键 为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+V粘贴Alt+Shift+Up向上复制一行Alt+Shift+Down向下复制一行Ctrl+Shift+折叠代码块Ctrl+Shift+展开代码块1.3 小程序开发体验5 快捷键 为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+Shift+Enter在当前行上插入一行Alt+Up向上移动一行Alt+Down向下移动一行Ct

17、rl+Shift+F全局搜索Alt+Shift+F代码格式化1.3 小程序开发体验5 快捷键 为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+在当前行上插入一行Ctrl+向上移动一行Ctrl+S向下移动一行1.4 团队开发与项目上线1 项目成员及权限小程序的开发团队的人员组织结构组成：1.4 团队开发与项目上线开发小程序项目的一般工作流程：1 项目成员及权限1.4 团队开发与项目上线1 项目成员及权限小程序的管理后台开发团队中的不同身份的成员权限：权限说明开发者权限可使用小程序开发者工具及开发版小程序进行开发体验者权限可使用体验版小程序登录可登录小程序管理后

18、台，无需管理员确认数据分析使用小程序数据分析功能查看小程序数据开发管理小程序提交审核、发布、回退开发设置设置小程序服务器域名、消息推送及扫描普通二维码打开小程序暂停服务设置暂停小程序上线服务1.4 团队开发与项目上线1 项目成员及权限开发团队的成员权限分配：成员权限项目管理组成员拥有所有权限开发组成员开发者权限、体验者权限、数据分析、小程序插件、腾讯云管理、接触关联公众号产品组成员体验者权限、数据分析测试组成员体验者权限1.4 团队开发与项目上线1 项目成员及权限小程序的管理后台根据这个流程设计了小程序的版本管理：版本说明开发版本使用开发者工具，可将代码上传到开发版本中，开发版本只保留最新一份

19、上传的版本。单击提交审核，可将代码提交审核。开发版本的可删除，不影响线上版本和审核中版本的代码审核中版本只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本线上版本线上所有用户使用的代码版本。该版本代码在新版本代码发布后被覆盖更新1.4 团队开发与项目上线1 项目成员及权限预览小程序开发版本二维码：1.4 团队开发与项目上线2 提交审核及发布为了保证小程序的质量以及符合相关的规范，小程序的发布需要经过审核：本章总结本章主要讲解了什么是微信小程序，微信小程序的特点和发展前景，以及如何下载安装微信小程序开发者工具及简单使用，最后介绍了微信小程序的团队开发、项目

20、管理以及审核发布。通过本章的学习，读者应对微信小程序的全貌有了一个整体的认识，能够动手完成小程序开发环境的搭建。第2章 微信小程序开发基础【案例1】比较数值大小【案例3】计算器【案例2】调查问卷学习目标掌握掌握掌握掌握掌握小程序项目的基本结构及配置文件的编写12掌握Page()、App()函数和常用组件的使用3掌握小程序与服务器交互的实现4掌握WXML、WXSS和条件渲染、列表渲染的基本语法目录点击查看本节相关知识点点击查看本节相关知识点【案例2】调查问卷2.22.1【案例1】比较数字大小点击查看本节相关知识点2.3【案例3】计算器2.1 【案例1】比较数字大小1 案例分析比较数字大小实现效果

21、：实现步骤：输入第1个数；输入第2个数；单击比较按钮；2.1 【案例1】比较数字大小1 案例分析比较数值大小实现的技术知识点总结：技术事件数据绑定条件渲染表单组件2 创建项目 项目创建流程：创建一个空白项目创建app.json文件新增一个index页面2.1 【案例1】比较数字大小2.1 【案例1】比较数字大小2 创建项目 开发者工具会自动创建pages/index目录： pages: pages/index/index Index页面2.1 【案例1】比较数字大小3 页面组件 标签功能标签功能视图容器图标文件文本域复选框按钮单选框图片输入框表单进度条页面组件及功能：2.1 【案例1】比较数字

22、大小编写基本表单结构：3 页面组件 请输入第1个数字：请输入第2个数字：比较比较结果：text组件view组件input组件2.1 【案例1】比较数字大小input组件type属性值：3 页面组件 可选值说明默认text文本输入键盘number数字输入键盘-idcard身份证输入键盘-digit带小数点的数字键盘-值得一提和属于双边标签，由开始标签和结束标签两部分构成，属于单边标签，只有“开始标签”，且结尾用“/”表示。值得一提的是，也可以写成双边标签，如“”。2.1 【案例1】比较数字大小3 页面组件 2.1 【案例1】比较数字大小3 页面组件 input组件type属性值为number：2

23、.1 【案例1】比较数字大小4 页面样式WXSS文件中的选择器：选择器示例说明.class.container选择所有class=container的组件#id#id选择id=#id的组件elementview选择所有view组件element, elementview, text选择所有view组件和所有text组件:afterview:after在view组件内的后面插入内容:beforeview:before在view组件内的前面插入内容2.1 【案例1】比较数字大小选择器使用演示：4 页面样式.container margin: 20px;class选择器view margin: 20

24、px;view:after content: 测试;:after选择器element选择器2.1 【案例1】比较数字大小不同设备的rpx与px换算关系：4 页面样式rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素）。目标：为了方便开发人员适配各种手机屏幕设备屏幕宽度rpx换算pxpx换算rpxiPhone53201rpx=0.42px1px=2.34rpxiPhone63751rpx=0.5px1px=2rpxiPhone6 Plus4141rpx=0.552px1px=1.81rpx2.1 【案例1】比较数字大小物理像素：指屏幕上实际有多少个像素。逻辑像素：是指CSS中使用的像素

25、单位。4 页面样式iphone6物理分辨率为750px1334pxiphone6的逻辑分辨率为375px667px1px1px2.1 【案例1】比较数字大小对比WXSS中的rpx运行效果展示：4 页面样式view margin: 50rpx;input width: 600rpx; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;button margin: 50rpx;2.1 【案例1】比较数字大小对比WXSS中的px运行效果展示：4 页面样式view margin: 50rpx;input /* 此处将原来的600rpx改为300px *

26、/ width: 300px; margin-top: 20rpx; border-bottom: 2rpx solid #ccc;button margin: 50rpx;2.1 【案例1】比较数字大小全局样式和导入外部样式：4 页面样式button color: #fff; background: #369;import test.wxss;button letter-spacing: 12rpx;导入外部样式全局样式2.1 【案例1】比较数字大小页面级配置文件：5属性说明navigationBarBackgroundColor导航栏背景颜色，默认为“#000000”navigationB

27、arTextStyle导航栏标题颜色，仅支持black、white（默认）navigationBarTitleText导航栏的标题文字内容backgroundColor窗口的背景色，默认为“#ffffff”backgroundTextStyle下拉loading的样式，仅支持dark（默认）、light 配置文件2.1 【案例1】比较数字大小页面级配置文件：5属性说明enablePullDownRefresh是否全局开启下拉刷新，默认为falseonReachBottomDistance页面上拉触底事件触发时距页面底部距离（单位为px），默认为50disableScroll默认为false。设

28、为true时，页面整体不能上下滚动 配置文件2.1 【案例1】比较数字大小页面级文件配置导航栏标题为“数值比较”，颜色为蓝色：5 配置文件 navigationBarTitleText: 数值比较, navigationBarBackgroundColor: #3692.1 【案例1】比较数字大小应用级配置文件：5属性说明pages页面路径列表window全局的默认窗口表现tabBar底部 tab 栏的表现networkTimeout网络超时时间debug是否开启调试模式，默认为false 配置文件2.1 【案例1】比较数字大小应用级配置文件：5属性说明requiredBackgroundMo

29、des需要在后台使用的能力，如“音乐播放”plugins使用到的插件 配置文件2.1 【案例1】比较数字大小networkTimeout可以设置网络请求过程中的超时时间：5属性类型说明requestNumberwx.request()的超时时间（毫秒），默认为60000connectSocketNumberwx.connectSocket()的超时时间（毫秒），默认为60000uploadFileNumberwx.uploadFile()的超时时间（毫秒），默认为60000downloadFileNumberwx.downloadFile()的超时时间（毫秒），默认为60000 配置文件2.1

30、 【案例1】比较数字大小开启了调试，运行程序后，就会在控制台中输出调试信息：5 配置文件 pages: pages/index/index, debug: true2.1 【案例1】比较数字大小Page()函数参数对象的属性：6 页面逻辑属性类型说明dataObject页面的初始数据onLoadFunction生命周期回调函数，监听页面加载onReadyFunction生命周期回调函数，监听页面初次渲染完成onShowFunction生命周期回调函数，监听页面显示onHideFunction生命周期回调函数，监听页面隐藏onUnloadFunction生命周期回调函数，监听页面卸载2.1 【案

31、例1】比较数值大小Page()函数参数对象的属性：6 页面逻辑属性类型说明onPullDownRefreshFunction页面事件处理函数，监听用户下拉动作onReachBottomFunction页面事件处理函数，页面上拉触底onShareAppMessageFunction页面事件处理函数，用户单击右上角的分享按钮onPageScrollFunction页面事件处理函数，页面滚动会连续触发其他Any开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。2.1 【案例1】比较数值大小onLoad、onReady、onShow函数为例进行演示：6 页面逻辑o

32、nLoad: function (options) console.log(页面加载),onReady: function () console.log(页面初次渲染完成),onShow: function () console.log(页面显示),2.1 【案例1】比较数字大小生命周期回调函数的区别分析如下：onLoad：页面加载时触发，一个页面只会调用一次。onReady：页面初次渲染完成的时候调用。onShow：当页面显示时触发。onHide：当页面隐藏时触发。onUnload：页面卸载时触发。6 页面逻辑值得一提单击“”会在底部弹出一个菜单，在菜单中有一项“转发”，单击转发就会触发on

33、ShareAppMessage事件。单击“”可以在前台、后台之间切换。2.1 【案例1】比较数字大小6 页面逻辑2.1 【案例1】比较数字大小6 页面逻辑onLoad函数中的options参数传递流程：onReady: function() wx.navigateTo( url: /pages/test/test?name1=value1&name2=value2 ),onLoad: function (options) console.log(options),pages/index/index.jspages/test/test.jsonPullDownRefresh: function

34、() console.log(此时用户下拉触顶),onReachBottom: function () console.log(此时用户上拉触底),onPageScroll: function (options) console.log(此时用户正在滚动页面) console.log(滚动距离： + options.scrollTop),2.1 【案例1】比较数字大小6 页面逻辑pages/index/index.js中使用这3个页面处理函数：比较compare: function (e) console.log(比较按钮被单击了) console.log(e),2.1 【案例1】比较数字大小

35、6 页面逻辑组件事件处理函数用于为组件绑定事件：2.1 【案例1】比较数字大小6 页面逻辑对比e.target和e.currentTarget： outer innerviewtap: function(e) console.log(e.target.id + - + e.currentTarget.id),子元素id父元素id2.1 【案例1】比较数字大小属性类型touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开

36、。如果指定了事件回调函数并触发了这个事件，tap事件将不被触发6 页面逻辑常用的冒泡事件：2.1 【案例1】比较数字大小6 页面逻辑值得一提冒泡事件是指当一个组件上的事件被触发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。一些组件还拥有一些专门的事件，如form组件的submit事件、input组件的input事件等2.1 【案例1】比较数字大小6 页面逻辑事件冒泡和绑定：单击middle触发middle单击inner触发middle、inner单击outer触发outer2.1 【案例1】比较数字大小7 注册程序在app.js文件中调用App()函数：onLaunch: functi

37、on(options) console.log(onLaunch执行),onShow: function (options) console.log(onShow执行),onHide: function() console.log(onHide执行),onError: function(error) console.log(onError执行),onPageNotFound: function (options) console.log(onPageNotFound执行)2.1 【案例1】比较数值大小7 注册程序在app.js文件中调用App()函数：2.1 【案例1】比较数字大小7 注册程序

38、onLaunch()和onShow()函数触发后返回的字段：path：打开小程序的路径。query：打开小程序的query。scene：打开小程序的场景值。shareTicket：获取到shareTicket。referrerInfo：获取来源于小程序、公众号的AppId等。2.1 【案例1】比较数字大小7 注册程序App()函数中还可以保存一些在所有页面中共享的数据：App( num: 123, test: function() console.log(test)onReady: function () var app = getApp() console.log(app.num) app.

39、test(),注册数据打印数据2.1 【案例1】比较数字大小8 实现比较功能给两个input组件 绑定不同事件num1Change、num2Change：num1change: function (e) this.num1 = Number(e.detail.value),num2change: function (e) this.num2 = Number(e.detail.value),事件绑定事件处理函数compare: function() var str = 两数相等 if (this.num1 this.num2) str = 第1个数大 else if (this.num1 th

40、is.num2) str = 第2个数大 this.setData(result: str),事件处理函数比较事件绑定8 实现比较功能比较功能：2.1 【案例1】比较数字大小通过id获取元素通过dataset获取8 实现比较功能通过id和dataset获取元素：2.1 【案例1】比较数字大小change3: function (e) var data = datae.target.dataset.id = Number(e.detail.value) this.setData(data),事件处理函数 比较结果：num1 num2 ? 第1个数大 : (num1 num2 ? 第2个数大 :

41、两数相等)页面数据比较8 实现比较功能在text组件上处理计算逻辑：2.1 【案例1】比较数字大小 num2比较结果：第1个数大 text wx:if=num1 比较结果：第2个数大 比较结果：两数相等wx:if num2比较结果：第1个数大 text wx:elif=num1 比较结果：第2个数大 比较结果：两数相等wx:if wx:else8 实现比较功能通过条件渲染的方式比较大小：2.1 【案例1】比较数字大小formCompare: function(e) var str = 两数相等 var num1 = Number(e.detail.value.num1) var num2 =

42、Number(e.detail.value.num2) this.setData(result: str),事件处理函数表单组件8 实现比较功能通过表单获取input组件的值，比较结果：2.1 【案例1】比较数字大小2.2 【案例2】调查问卷1 案例分析 调查问卷效果展示：实现步骤：填写表单数据；提交发送到服务器；后台数据渲染到页面；2.2 【案例2】调查问卷2页面代码结构：. . .提交 编写表单页面 Express安装和使用流程：初始化项目安装Express框架安装nodemon监控文件修改创建服务；启动服务；2.2 【案例2】调查问卷3 服务器数据交互 serverclient2.2 【

43、案例2】调查问卷3用代码创建服务：创建服务；监听端口；const app = express()app.use(bodyParser.json()/ 处理POST请求app.post(/, (req, res) = console.log(req.body) res.json(req.body)/ 监听3000端口app.listen(3000, () = console.log(server running at :3000) 服务器数据交互 2.2 【案例2】调查问卷3利用wx.request()向本地HTTP服务器发送POST请求：submit: function(e) wx.reque

44、st( method: post, url: :3000/, data: e.detail.value, success: function (res) console.log(res) ), 服务器数据交互 2.2 【案例2】调查问卷3利用wx.request()向本地HTTP服务器发送POST请求： 服务器数据交互 2.2 【案例2】调查问卷4请求接口获取后台数据： 表单数据绑定 onLoad: function(options) wx.request( url: :3000/, success: res = this.setData(res.data) ),app.get(/, (req

45、, res) = res.json(data)前台代码后台接口2.2 【案例2】调查问卷4 表单数据绑定 值得一提值得一提的是，由于wx.request()参数中的method属性的默认值为GET，因此在发送GET请求时可以省略method属性。2.3 【案例3】计算器1 案例分析 计算器功能介绍：加（+）减（-）乘（）除（）取余（%）Delete删除C全部清空2.3 【案例3】计算器2 编辑计算器页面 计算器页面的整体布局：.page display: flex; height: 100% flex-direction: column;.result flex: 1;background:

46、#f3f6fe;.btns flex: 1;2.3 【案例3】计算器2 编辑计算器页面 计算器按钮样式：btns flex: 1; display: flex; flex-direction: column; font-size: 17pt; border-top: 1rpx solid #ccc; border-left: 1rpx solid #ccc;.2.3 【案例3】计算器2 编辑计算器页面 计算结果页面：.result flex: 1; background: #f3f6fe; position: relative;计算结果展示区计算按钮区2.3 【案例3】计算器3 实现计算逻辑功

47、能 编写按钮的事件处理函数：result: null,isClear: false, resetBtn: function() delBtn: function() ,numBtn: function(e) , opBtn: function(e) ,dotBtn: function() ,本章总结本章主要围绕微信小程序的组件、样式、配置文件、数据绑定等内容进行讲解，通过案例将这些知识应用到小程序的开发中，帮助读者掌握小程序的开发基础，并对后面的学习做了铺垫。第3章 音乐小程序项目开发前准备【任务2】音乐推荐【任务4】播放列表【任务1】标签页切换【任务3】播放器学习目标掌握swiper组件、s

48、croll-view组件的使用12掌握image组件的使用3掌握音频API的使用4掌握slider组件的使用掌握掌握掌握掌握目录点击查看本节相关知识点点击查看本节相关知识点【任务1】标签页切换3.23.1开发前的准备点击查看本节相关知识点3.3【任务2】音乐推荐点击查看本节相关知识点3.4【任务3】播放器目录点击查看本节相关知识点3.5【任务4】播放列表知识架构3.1 开发前的准备 1项目展示2项目分析3项目初始化知识架构3.2 【任务1】标签页切换1任务分析2前导知识3编写页面结构和样式4实现标签页切换知识架构3.3 【任务2】音乐推荐1任务分析2前导知识3内容区域滚动4轮播图5功能按钮6热

49、门音乐知识架构3.4 【任务3】播放器1任务分析2前导知识3定义基础数据4实现音乐播放功能5编写播放器页面6控制播放进度知识架构3.5 【任务4】播放器列表1任务分析2编写页面结构和样式3实现换曲功能3.1 开发前准备 1 项目展示音乐小程序项目效果展示：2 项目分析 音乐小程序项目页面结构图：tab导航栏content内容区player音乐播放控件3.1 开发前准备 2 项目分析 音乐小程序项目目录结构：3.1 开发前准备 标签功能app.js应用程序的逻辑文件app.json应用程序的配置文件pages/index/index.jsindex页面的逻辑文件pages/index/index

50、.jsonindex页面的配置文件pages/index/index.wxssindex页面的样式文件2 项目分析 音乐小程序项目目录结构：3.1 开发前准备 标签功能pages/index/index.wxmlindex页面的结构文件pages/index/info.wxml“音乐推荐”标签页的结构文件pages/index/play.wxml“播放器”标签页的结构文件pages/index/playlist.wxml“播放列表”标签页的结构文件images图片文件 pages: pages/index/index 3 项目初始化 3.1 开发前准备 navigationBarBackgro

51、undColor: #fff, navigationBarTitleText: 音乐, navigationBarTextStyle: black开发者工具创建空白项目：index1 任务分析 标签页和页面（info.wxml、play.wxml、palylist.wxml）结构图：3.2 【任务1】标签页切换 0 1 22 前导知识 swiper组件编写滑动页面结构：3.2 【任务1】标签页切换 swiper组件可选值说明默认indicator-dotsBoolean是否显示面板指示点，默认为falseindicator-colorColor指示点颜色，默认为rgba(0,0,0,.3)in

52、dicator-active-colorColor当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index，默认为0current-item-idString当前所在滑块的item-id（不能同时指定current）2 前导知识 3.2 【任务1】标签页切换 swiper组件常用属性：可选值说明默认intervalNumber自动切换时间间隔（毫秒），默认为5000durationNumber滑动动画时长（毫秒），默认为500circularBoolean是否采用衔接滑动，默认为falseverti

53、calBoolean滑动方向是否为纵向，默认为falsebindchangeEventHandlecurrent改变时会触发change事件2 前导知识 3.2 【任务1】标签页切换 swiper组件常用属性： 0 1 22 前导知识 swiper组件编写滑动页面结构：3.2 【任务1】标签页切换 item-id属性 body 2 前导知识 include主要用途：将代码拆分到多个文件中，可以更方便地查找代码。将代码公共部分抽取出来。通过外部文件引入。3.2 【任务1】标签页切换 include 音乐推荐 3 编写页面结构和样式 音乐小程序基础页面和样式：3.2 【任务1】标签页切换 page

54、s/index/index.wxmlpage display: flex; flex-direction: column; background: #17181a; color: #ccc; height: 100%;3 编写页面结构和样式 音乐小程序基础页面和样式：3.2 【任务1】标签页切换 pages/index/index.wxss playinfoplaylist3 编写页面结构和样式 测试页面info.wxml、page.wxml、play.wxml文件：3.2 【任务1】标签页切换 Info.wxmlplaylist.wxmlplay.wxml3.2 【任务1】标签页切换 4 实

55、现标签页切换 单击导航栏选项卡实现标签页切换：音乐推荐changeItem: function(e) ,单击事件.tab-item.active color: #c25b5b; border-bottom-color: #c25b5b;标签页切换样式3.2 【任务1】标签页切换 4 实现标签页切换 通过滚动事件切换页面效果：changeTab: function(e) ,滚动事件.tab-item.active color: #c25b5b; border-bottom-color: #c25b5b;标签页切换样式3.3 【任务2】音乐推荐 1 任务分析 音乐推荐页面结构图：3.3 【任务2】

56、音乐推荐 2 前导知识 scroll-view组件的属性及说明：可选值说明默认scroll-xBoolean允许横向滚动，默认为falsescroll-yBoolean允许纵向滚动，默认为falsescroll-topNumber / String设置竖向滚动条的位置scroll-leftNumber / String设置横向滚动条的位置bindscrolltoupperEventHandle滚动到顶部/左边时触发的事件3.3 【任务2】音乐推荐 2 前导知识 scroll-view组件的属性及说明：可选值说明默认bindscrolltolowerEventHandle滚动到底部/右边时触发的

57、事件scroll-with-animationBoolean在设置滚动条位置时是否使用动画过渡scroll-into-viewString设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）bindscrollEventHandle滚动时触发的事件3.3 【任务2】音乐推荐 2 前导知识 scroll-view组件事件对象： scroll: function(e) console.log(e.detail),3.3 【任务2】音乐推荐 2 前导知识 scroll-view组件事件对象：3.3 【任务2】音乐推荐 2 前导知识 scroll-view组件事件对象

58、参数分析：scrollLeft：横向滚动条左侧到视图左边的距离。scrollTop：纵向滚动条上端到视图顶部的距离。scrollHeight：纵向滚动条在Y轴上最大滚动距离。scrollWidth：横向滚动条在X轴上最大的滚动距离。deltaX：横向滚动条的滚动状态。deltaY：纵向滚动条的滚动状态。3.3 【任务2】音乐推荐 2 前导知识 image组件属性及说明：可选值说明默认srcString图片资源地址modeString图片裁剪、缩放的模式，默认为scaleToFilllazy-loadBoolean图片是否懒加载，默认为false。只针对page与scroll-view下的ima

59、ge有效binderrorHandleEvent图片发生错误时的事件bindloadHandleEvent图片载入完成时的事件3.3 【任务2】音乐推荐 2 前导知识 image组件缩放模式：可选值说明scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图片会变形。aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图wi

60、dthFix宽度不变，高度自动变化，保持原图宽高比不变3.3 【任务2】音乐推荐 2 前导知识 image组件9种裁剪模式：可选值说明top不缩放图片，只显示图片的顶部区域bottom不缩放图片，只显示图片的底部区域center不缩放图片，只显示图片的中间区域left不缩放图片，只显示图片的左边区域right不缩放图片，只显示图片的右边区域3.3 【任务2】音乐推荐 2 前导知识 image组件9种裁剪模式：可选值说明top left不缩放图片，只显示图片的左上边区域top right不缩放图片，只显示图片的右上边区域bottom left不缩放图片，只显示图片的左下边区域bottom rig