微信小程序完整版教学课件最全ppt整套教程电子讲义(最新)

第1章认识微信小程序微信小程序开发图解案例教程（附精讲视频）（第3版）2016年1月9日，腾讯公司启动了微信小程序产品的研发，并于2017年1月9日正式发布。截至2019年8月，微信小程序总量达240万左右，微信小程序累积用户量已达8.4亿，月活用户更是突破6.8亿，占微信平台月活用户的62%，用户使用习惯基本形成。不同于微信订阅号或公众号，微信小程序被赋予了应用程序的能力，它是一种无须安装即可使用的应用，实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。它也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。应用将无处不在，随时随地可用，无须卸载。经过几年的发展，现如今各类微信小程序已然呈井喷式发展，各行各业的小程序都开始运作，成为各大企业引流的入口，同时也降低了企业发布App应用产品的成本。下面就让我们一起来认识一下微信小程序吧！本章导读Thechapter’sintroduction目录导航1.1　微信小程序介绍1.2　微信小程序开发准备1.3　微信小程序开发工具的使用1.4　沙场大练兵：HelloWorld的创建1.5　小结1.1.1　初识微信小程序微信小程序（简称小程序）是一个基于去中心化而存在的平台，它没有聚合的入口，核心场景入口不断丰富，流量入口已经超过60多个，例如，在微信中的“发现”界面可以找到小程序的入口，如图1.1所示。图1.1　微信小程序入口用户需要下载、安装才可以使用App，安装时还要考虑App占用多大存储空间，如果存储空间不够使用，就需要卸载不用的App以释放空间，在安装App时还需要考虑是否耗用手机流量等问题。微信小程序则无须安装，可以直接使用，不占用存储空间，不需要考虑安装应用时耗用手机流量，并且在使用微信小程序后，可以用完即走。APP与微信小程序的区别：1.1.2　微信小程序的功能小程序提供的功能如下。分享页功能。分享对话功能。线下扫码进入微信小程序功能。挂起状态功能。消息实时音视频录制播放功能。硬件连接功能。小游戏功能。公众号关联功能。搜索查找功能。识别二维码功能。1.1.3　微信小程序的使用场景从微信小程序上线开始，各种小程序如雨后春笋般出现。那么小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。服务类目分为个人服务类目和企业服务类目。个人服务类目是以个人为开发主体的小程序，服务范围少；企业服务类目是以企业为开发主体的小程序，服务范围大。具体使用场景可在“微信官方文档”——“子程序”。1.1.4　微信小程序能取代App吗除了微信小程序，企业巨头也纷纷推出小程序。例如，阿里巴巴公司推出了支付宝小程序，支付宝小程序整合了阿里巴巴丰富的运营工具，凭借强大的开放能力，帮助B端商户更好地运营；百度公司推出了百度智能小程序，凭借“搜索+信息流+AI”三驾马车的强力拉动，让其有能力扮演好百度实现新连接的“管道工”角色；抖音平台也推出了抖音小程序，抖音丰富的短视频内容和聚集红人的超强能力，天然契合游戏、泛娱乐和电商类小程序，抖音基于用户兴趣标签的内容推荐机制，又能保证这类小程序的分发和变现效率。原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小程序最大的优势。从这个角度来看，小程序是“跨平台”的。小程序经过几年的发展，逐渐成为与iOS、Android、公众号、网站并行的流量入口。各个企业在发布自己的产品的时候，往往会发布iOS版、Android版、H5版、网站PC版、公众号版、微信小程序版，都是作为产品流量的入口，并没有出现谁取代谁的现象。但是小程序可以快速构建出一个产品应用，门槛低、成本低、发布快是各大企业制作小程序的原因。1.1.5　微信小程序的发展历程2016年1月9日，微信团队首次提出应用号的概念。2016年9月22日，微信公众平台对外内测。2016年11月3日，微信小程序对外公测。2016年12月28日，张小龙在微信公开课中解答外界对微信小程序的几大疑惑，包括没有应用商店、没有推送消息等。2016年12月30日，微信公众平台对外公告，上线的微信小程序最多可生成10000个带参数的二维码。2017年1月9日，微信小程序正式上线。2017年3月27日，个人开发者可以申请小程序开发和发布。2017年4月17日，小程序代码包大小限制扩大到2MB。2017年4月20日，腾讯公司发布公众号关联小程序新 规则 编码规则下载淘宝规则下载天猫规则下载麻将竞赛规则pdf麻将竞赛规则pdf 。2017年5月12日，腾讯公司发布“小程序数据助手”。2017年12月28日，微信更新的6.6.1版本开放了小游戏。1.1.5　微信小程序的发展历程2018年1月18日，微信提供了电子化的侵权投诉渠道。2018年1月25日，微信团队在“微信公众平台”发布公告称“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用”。2018年3月，微信正式宣布小程序广告组件启动内测。2018年4月，通过公众号文章可以打开小程序、开放微信小程序游戏接口。2018年5月，支持App打开小程序。2018年6月，小程序支持打开公众号（关联的公众号）文章。2018年7月，品牌搜索开放，推出品牌官方区和微主页，任务栏出现“我的小程序”入口。2018年8月，微信小程序云开发上线。2018年9月，微信“功能直达”功能正式开放。2018年10月，小程序支持主体迁移。2019年8月，微信向开发者发布新能力公测与更新公告。1.1.6　微信小程序带来的机会学会微信小程序开发，就可以成为一名“小程序员”。例如， 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 师、学生、创业者、待业青年、“网虫”、策划人员、编辑、“草根”站长等都可以转作程序员。微信小程序给企业提供了流量入口，企业可以通过小程序推广自己的产品。经过腾讯公司的大力扶持，小程序已经成为各个企业非常看重的流量入口。目录导航1.1　微信小程序介绍1.2　微信小程序开发准备1.3　微信小程序开发工具的使用1.4　沙场大练兵：HelloWorld的创建1.5　小结1.2.1　基础技术准备微信小程序自定义了一套语言，称为WXML微信标记语言，它的使用方法类似于HTML语言。另外，微信小程序还定义了自己的样式语言WXSS，它兼容CSS样式，并在CSS样式的基础上做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用。所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。1.2.2　开发准备在微信公众平台中，选择“小程序”→“小程序开发文档”，如图所示，可以打开帮助文档界面，如图所示。（1）在“微信公众平台”注册微信开发者账号。1.2.2　开发准备根据自己的操作系统，下载微信小程序的开发工具，如图所示（因为开发工具版本更新很快，实际版本以读者操作为准）。（2）在文档工具里1.2.2　开发准备安装完成后用微信扫描二维码登录。开发工具提供了小程序项目和公众号网页项目两个调试类型，如图所示。（3）按照提示完成开发工具的安装目录导航1.1　微信小程序介绍1.2　微信小程序开发准备1.3　微信小程序开发工具的使用1.4　沙场大练兵：HelloWorld的创建1.5　小结1.3.1　创建项目在开发工具里单击小程序图标，进入小程序“新建项目”界面，可以添加一个新的项目。在这个界面里需要填写项目名称、目录、AppID，如图所示。1.3.1　创建项目获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2小节中注册的账户，在“设置”→“开发设置”中，查看微信小程序的AppID，如图所示。注意：不可直接使用服务号或订阅号的AppID，只能使用微信小程序的AppID。1.3.1　创建项目获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2小节中注册的账户，在“设置”→“开发设置”中，查看微信小程序的AppID，如图所示。注意：不可直接使用服务号或订阅号的AppID，只能使用微信小程序的AppID。注意：如果要以非管理员微信号在手机上体验该小程序，还需要绑定开发者。即在“用户身份”→“开发者”模块，绑定需要体验该小程序的微信号。1.3.1　创建项目输入AppID后，建立一个“demo”文件夹，并选择为项目目录，项目名称输入“demo”，开发模式选择“小程序”，后端服务可以选择“小程序·云开发”或者“不使用云服务”，单击“创建”按钮即可，如图所示。1.3.1　创建项目“小程序·云开发”和“不使用云服务”区别如下。（1）开发者可以使用云开发开发微信小程序、小游戏，无须搭建服务器即可使用云端能力。（2）云开发提供云函数、数据库、存储、云调用四大基础功能。（3）如果没有一个已经备案过的域名和一台云服务器，又想使项目快速上线，且对云存储、云数据库的 要求 对教师党员的评价套管和固井爆破片与爆破装置仓库管理基本要求三甲医院都需要复审吗 不高，那么小程序云开发非常适合，零开发成本即可发布一款微信小程序。（4）如果日活用户非常多，云开发提供的云服务配置不够用，又不想花费过多进行升级，那么使用小程序云开发并不太合适。（5）创建项目的时候如果需要腾讯公司的小程序云开发，就选择“小程序·云开发”选项，如果需要自己搭建服务器，可以选择“不使用云服务”选项。1.3.2　开发者工具界面创建项目后，进入微信开发者工具界面。如图所示。开发者工具界面大致可以分为6个区域：1菜单栏区域；2模拟器、编辑器、调试器显示与隐藏区域；3模拟器区域；4编辑器区域；5工具栏区域；6调试器区域。1.3.3　菜单栏菜单栏中的菜单项集成了软件的一些常规操作和功能使用。“项目”菜单：包括新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目、关闭当前项目。这些命令都是对小程序项目或者代码片段进行管理使用的。“文件”菜单：包括新建文件、保存、保存所有、关闭文件。这些命令可以新建文件、关闭文件、保存文件。“编辑”菜单：是对代码进行管理的一个菜单，具有格式化代码等功能。“工具”菜单：包括编译、刷新、预览、清除缓存等功能。“界面”菜单：用于显示或者隐藏工具栏、模拟器、编辑器、目录树、调试器区域。“设置”菜单：包括通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。“帮助”菜单：包括文档搜索、开发者社区、开发者文档。“微信开发者工具”菜单：包括对开发者工具进行升级、回退、退出等功能。1.3.4　模拟器区域模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，方便小程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的终端设备，如iPhone5、iPhone6等；可以设置模拟器区域的百分比大小；可以模拟设置Wi-Fi、2G、3G、4G等网络情况，如图所示。1.3.5　编辑器区域编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构，另一部分用来进行代码编辑，如图1.13所示。在项目目录上单击鼠标右键可以新建目录、Page、Component、JS、TS、JSON、WXML、WXSS、WXS文件，对文件目录及文件进行重命名、删除、查找、硬盘打开、在终端中打开等操作，如图1.13所示。01OPTION图1.12　编辑器区域图1.13　文件操作1.3.5　编辑器区域在代码编辑区域里编写代码，可以通过模拟器区域实时预览编辑的情况，如右图所示。02OPTION1.3.5　编辑器区域在代码编写过程中，开发工具提供自动补全功能，如右图所示。03OPTION开发工具提供自动保存功能。04OPTION1.3.6　调试器区域用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息，还可以进行代码编写和调试，如图所示。（1）“Console”窗口小程序的常用调试工具有Console、Sources、Network、Storage、AppData、Wxml。（2）“Sources”窗口用于显示当前项目的脚本文件。在Sources中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，有require的主动调用，如图1.17所示。1.3.6　调试器区域用来观察发送的请求和调用文件的信息，包括文件名称、调用的状态、大小、时间等，如图1.18所示。（3）“Network”窗口用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况，如图1.19所示。（4）“Storage”窗口1.3.6　调试器区域用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上，如图1.20所示。（5）“AppData”窗口用于帮助开发者开发Wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的WXSS属性，同时可以修改对应的WXSS属性，如图1.21所示。（6）“Wxml”窗口1.3.7　工具栏区域通过“编译”按钮组合键Ctrl+B编译当前小程序代码，并自动刷新模拟器。为了方便调试，开发者还可以添加或选择已有的自定义编译条件进行编译和代码预览，如图所示。1.编译操作单击“预览”按钮，可以将小程序上传，生成二维码，通过扫描二维码可以在手机上预览小程序，如图所示。2.预览1.3.7　工具栏区域单击“真机调试”按钮，生成二维码，可以在手机上进行代码调试，手机界面如图1.24所示。也可以查看页面布局及请求情况，如图1.25所示。3.真机调试图1.25　查看页面布局及请求图1.24　手机界面1.3.7　工具栏区域工具栏中的“切前/后台”按钮可以帮助开发者模拟一些客户端的环境操作。例如，突然进来电话，如果接电话，小程序就会从前台进入后台，重新访问小程序时，又会从后台进入前台，如图所示。4.前后台切换清缓存包括清除数据缓存、清除文件缓存、清除编译缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除7个功能，如图1.27所示。5.清缓存1.3.7　工具栏区域小程序开发完成后，需要上传到腾讯服务器进行版本发布，如图1.28所示。6.上传1.3.8　常用快捷键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：全局搜索。Ctrl+B：可以编译当前代码，并自动刷新模拟器。1.格式调整快捷键Ctrl+End：移动到文件结尾。Ctrl+Home：移动到文件开头。Ctrl+I：选中当前行。Shift+End：选择从光标到行尾。Shift+Home：选择从行首到光标处。Ctrl+Shift+L：选中所有匹配。Ctrl+D：选中匹配。Ctrl+U：光标回退。2.光标相关快捷键Ctrl+\：隐藏侧边栏。Ctrl+m：打开或者隐藏模拟器。3.界面相关快捷键目录导航1.1　微信小程序介绍1.2　微信小程序开发准备1.3　微信小程序开发工具的使用1.4　沙场大练兵：HelloWorld的创建1.5　小结1.4　沙场大练兵：HelloWorld的创建在创建项目之后，开发工具会添加默认的目录和页面。在默认的页面上，可以看到有“HelloWorld”文字，如图1.29所示。图1.29　HelloWorld界面在pages/index/index.js文件里，Page的data里提供了数据源motto，data的数据可以动态地绑定到WXML页面中，如图1.30所示。步骤一：　图1.30　motto数据源1.4　沙场大练兵：HelloWorld的创建在pages/index/index.wxml文件里，通过双大括号（{{}}）的方式，将motto绑定到页面里，如图1.31所示，motto对应的值就可以在页面里显示出来。步骤二：图1.31　绑定motto在pages/index/index.wxss文件里，通过class的方式给HelloWorld添加样式，距顶部的高度为200px，如图1.32所示。步骤三：图1.32　添加样式目录导航1.1　微信小程序介绍1.2　微信小程序开发准备1.3　微信小程序开发工具的使用1.4　沙场大练兵：HelloWorld的创建1.5　小结小结本章主要介绍了微信小程序和开发工具的使用，学习者应重点掌握以下内容。briefsummary（1）了解微信小程序是什么，其功能、使用场景、发展历程及带来的机会。（2）做好微信小程序开发前的准备工作，包括基础技术准备和开发账号、文档、开发工具的准备。（3）学会微信小程序开发工具的使用，会添加项目，了解开发者工具界面，会使用菜单栏、模拟器区域、编辑器区域、调试器区域、工具栏区域等。（4）记住微信小程序常用的一些快捷键，以提高开发效率。（5）熟悉微信小程序的开发 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 。单元1站点创建与制作商品简介页面HTML5+CSS3网页设计与制作实用教程学习快乐！第2章微信小程序框架 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 微信小程序开发图解案例教程（附精讲视频）（第3版）微信小程序框架，是我们在进行微信小程序开发前必须理解的内容。微信小程序框架可以让开发者在微信中通过简单、高效的方式开发具有原生App体验的服务。微信小程序框架分为逻辑层和视图层，逻辑层用来处理业务逻辑，而视图层用来渲染页面。视图层描述语言WXML和视图样式WXSS，再加上JavaScript逻辑层语言和JSON配置文件，一同构筑起了微信小程序框架。本章我们一起来分析微信小程序的框架。本章导读Thechapter’sintroduction目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.1.1　框架全局文件框架全局文件必须放在项目的根目录中。框架全局文件对所有页面都有效，如表2.1所示。表2.1　框架全局文件文件是否必填作用app.js是装载小程序逻辑app.json是装载小程序公共设置app.wxss否装载小程序公共样式project.config.json是装载小程序项目个性化配置sitemap.json是配置小程序及其页面是否允许被微信索引2.1.1　框架全局文件1.app.js小程序逻辑文件app.js文件用来定义全局数据和函数的使用，可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等。不同阶段不同场景可以使用不同的生命周期函数。app.js文件中还可以定义一些全局函数和数据，其他页面引用app.js文件后就可以直接使用，如图所示。2.1.1　框架全局文件2.app.json小程序公共设置文件app.json文件可以对常用的功能进行设置：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、启用新版组件样式、配置debug模式、配置跳转的小程序列表。具体如图所示。2.1.1　框架全局文件3.app.wxss小程序公共样式表app.wxss文件对CSS样式进行了扩展。它和CSS的使用方式一样，写法兼容大部分CSS样式。app.wxss文件还形成了自己的风格，即对所有页面定义的一个全局样式。只要页面有全局样式里的class，就可以渲染全局样式里的效果；但如果页面又重新定义了这个class样式，则会把全局样式覆盖掉，使用自己的样式。小程序公共样式表如图2.10所示。2.1.1　框架全局文件4.project.config.json小程序项目个性化配置重新安装工具或者换计算机工作时，用户只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。配置如下。{"description":"项目配置文件","packOptions":{"ignore":[]},"setting":{"urlCheck":true,"es6":true,"postcss":true,"minified":true,"compileType":"miniprogram","libVersion":"2.9.4","appid":"wxa7730e0596be9404","projectname":"demo","newFeature":true,"autoAudits":false,"coverView":true,"showShadowRootInWxmlPanel":true,"scopeDataCheck":false},2.1.1　框架全局文件"debugOptions":{"hidedInDevtools":[]},"isGameTourist":false,"simulatorType":"wechat","simulatorPluginLibVersion":{},"condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}2.1.1　框架全局文件5.sitemap.json小程序及其页面是否允许被微信索引小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象。如果没有sitemap.json文件，则默认为所有页面都允许被索引。配置示例如下。{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exact"},{"action":"disallow","page":"path/to/page"}]}matching匹配规则说明如下。（1）exact：当小程序页面的参数列表等于params时，规则命中索引。（2）inclusive：当小程序页面的参数列表包含params时，规则命中索引。（3）exclusive：当小程序页面的参数列表与params交集为空时，规则命中索引。（4）partial：当小程序页面的参数列表与params交集不为空时，规则命中索引。（1）path/to/page?a=1&b=2→优先索引。（2）path/to/page→不被索引。（3）path/to/page?a=1→不被索引。（4）path/to/page?a=1&b=2&c=3→不被索引。（5）其他页面都会被索引。2.1.2　工具类文件在微信小程序框架目录里有一个utils文件夹，它用来存放工具栏的JavaScript函数。图2.11所示为时间格式化工具类。图2.11　时间格式化工具类2.1.3　框架页面文件微信小程序的框架页面文件都放置在pages文件夹下面，如图2.12所示。表2.2　框架页面文件文件类型是否必填作用JS是页面逻辑JSON否页面配置WXML是页面结构WXS否小程序脚本语言WXSS否页面样式表图2.12　页面文件2.1.4　小试牛刀：制作“猫眼电影”底部标签导航“猫眼电影”底部标签导航有4个标签：电影、影院、发现、我的，如左图所示（实例位置：源码\第2章\movie）。新建一个“movie”项目，后端服务选择“不使用云服务”，如图所示。步骤一：添加项目2.1.4　小试牛刀：制作“猫眼电影”底部标签导航打开app.json配置文件，在pages数组里添加4个页面路径——电影“pages/movie/movie”、影院“pages/cinema/cinema”、发现“pages/find/find”、我的“pages/me/me”，保存后会自动生成相应的页面文件夹；删除“pages/index/index”“pages/logs/logs”页面路径及对应的文件夹，如图所示。步骤二：将准备好的底部标签导航图标复制到“movie”项目下面。步骤三：配置页面路径2.1.4　小试牛刀：制作“猫眼电影”底部标签导航在window数组里配置窗口导航背景颜色为红色（#D53E37），导航栏文字为“电影”，文字颜色为白色（white）。具体配置如图所示。步骤四：窗口及导航栏配置步骤五：底部标签导航配置在tabBar对象里配置底部标签导航背景色为灰色（#f5f5f5），文字默认颜色为白色（white），选中时为红色（#D53E37）；在list数组里配置底部标签导航对应的页面、导航名称、默认时的图标、选中时的图标。具体配置如图所示。目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.2　微信小程序注册程序的应用app.js文件不光可以定义全局函数和数据，还可以注册小程序。用户可以在App()函数里完成小程序的注册并指定其生命周期函数。表2.3所示为生命周期函数的属性。属性类型描述触发时机onLaunchfunction监听小程序初始当小程序初始化完成时，会触发onLaunch（全局只触发一次）onShowfunction监听小程序显示当小程序启动，或从后台进入前台显示时，会触发onShowonHidefunction监听小程序隐藏当小程序从前台进入后台时，会触发onHideonErrorfunction错误监听函数当小程序发生脚本错误，或者API调用失败时，会触发onError并附带错误信息onPageNotFoundfunction页面不存在监听函数当小程序中出现要打开的页面不存在的情况时，会附带页面信息回调该函数其他any 开发者可以添加任意的函数或数据到Object参数中。用this可以使用表2.3　生命周期函数的属性2.2　微信小程序注册程序的应用onLaunch生命周期函数，用来监听小程序初始化。onShow生命周期函数，用来监听小程序显示。onHide生命周期函数，用来监听小程序隐藏。onError生命周期函数，用来监听小程序脚本或者API是否发生错误。onPageNotFound生命周期函数，当要打开的页面不存在时，会回调这个监听函数。示例代码如下。App({onLaunch:function(){//当小程序显示时做一些事情},onShow:function(){//当小程序显示时做一些事情},onHide:function(){//当小程序隐藏时做一些事情},onError:function(msg){console.log(msg)},globalData:'Iamglobaldata'})2.2　微信小程序注册程序的应用可以在页面里调用app.js文件全局数据。在页面的JS文件里，按如下方法就可以调用全局数据globalData。varAppInstance=getApp()console.log(AppInstance.globalData)小程序不仅可以调用全局数据，还可以调用用户自定义的全局函数，但是不能调用生命周期函数。注意：（1）App()必须在app.js文件中注册，且不能注册多个。（2）不要在定义于App()内的函数中调用getApp()，使用this就可以获取App实例。（3）不要在onLaunch小程序初始化完成时调用getCurrentPage()，此时页面还没有生成。（4）通过getApp()获取实例之后，不要私自调用生命周期函数。目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.3.1　页面初始化数据data为页面初始化数据。初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串、数字、布尔值、对象或数组。渲染界面可以通过WXML对数据进行绑定。{{motto}}Page({data:{motto:'HelloWorld',userInfo:{}}})示例代码如下。2.3.2　生命周期函数微信小程序在JS文件里定义了生命周期函数，不同的生命周期函数有不同的使用效果。onLoad（页面加载）：一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的query。onShow（页面显示）：每次打开页面都会调用一次。onReady（页面初次渲染完成）：一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置（如wx.setNavigationBarTitle）请在onReady之后进行。onHide（页面隐藏）：当调用navigateTo或底部tab切换时调用。onUnload（页面卸载）：当调用redirectTo或navigateBack的时候调用。2.3.3　页面相关事件处理函数onPullDownRefresh（下拉刷新事件）：监听用户下拉刷新事件。onReachBottom（上拉触底事件）：可以在app.json文件的window选项中或页面配置中设置触发距离onReachBottomDistance。onPageScroll（页面滚动事件）：监听用户滑动页面事件。onResize（页面尺寸事件）：页面尺寸发生改变的事件。微信小程序定义了以下常用的事件处理函数。Page({onResize(res){res.size.windowWidth//新的显示区域宽度res.size.windowHeight//新的显示区域高度}})示例代码如下。2.3.3　页面相关事件处理函数onShareAppMessage（用户分享转发）：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。用户点击“转发”按钮的时候会调用此函数。此事件需要返回一个object参数，用于自定义分享转发内容。object参数的说明如表2.5所示。字段说明默认值title转发标题当前小程序名称imageUrl自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5 : 4使用默认截图path转发路径当前页面路径。必须是以/开头的完整路径表2.5　用户分享object参数2.3.3　页面相关事件处理函数示例代码如下。Page({onShareAppMessage:function(res){return{title:'自定义分享标题',imageUrl:'自定义图片路径',path:'/page/user?id=123'}}})onTabItemTap（点击tab页事件）：当前是tab页时，用户点击tab时触发。object参数的说明如表2.6所示。2.3.3　页面相关事件处理函数表2.6　点击tab页object参数字段类型说明indexstring被点击的底部标签导航菜单的序号，从0开始pagePathstring被点击的底部标签导航菜单的页面路径textstring被点击的底部标签导航菜单的按钮文字Page({onTabItemTap(item){console.log(item.index)console.log(item.pagePath)console.log(item.text)}})示例代码如下。2.3.4　页面路由管理路由的触发方式及页面生命周期函数如表2.7所示。页面路由方式触发时机路由后页面路由前页面初始化小程序打开的第一个页面onLoad，onShow 打开新页面调用APIwx.navigateTo或使用组件onLoad，onShowonHide页面重定向调用APIwx.redirectTo或使用组件onLoad，onShowonUnload页面返回调用APIwx.navigateBack或用户按左上角返回按钮onShowonUnload（多层页面返回时每个页面都会按顺序触发onUnload）tab切换调用APIwx.switchTab或使用组件或用户切换Tab  重启动调用APIwx.reLaunch或使用组件OnLoad，onShowonUnload2.3.5　自定义函数除了初始化数据和生命周期函数，在Page中还可以定义一些特殊的函数，如事件处理函数。在渲染层的组件中加入事件绑定，当达到触发事件时，就会执行Page中定义的事件处理函数。clickmePage({clickMe:function(){console.log('viewtap')}})示例代码如下。2.3.6　setData设值函数Page.prototype.setData()设值函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。setData()参数格式：接收一个对象，以key:value的形式表示将this.data中的key对应的值改变成value。示例代码如下。{{text}}Changenormaldata{{array[0].text}}ChangeArraydata{{object.text}}ChangeObjectdata{{newField.text}}Addnewdata//index.jsPage({data:{text:'initdata',array:[{text:'initdata'}],object:{text:'initdata'}},2.3.6　setData设值函数changeText:function(){//this.data.text='changeddata'这种方式赋值不起作用this.setData({text:'changeddata'})},changeItemInArray:function(){//可以用这种方式动态修改数据this.setData({'array[0].text':'changeddata'})},changeItemInObject:function(){this.setData({'object.text':'changeddata'});},addNewField:function(){this.setData({'newField.text':'newdata'})}})注意：直接修改this.data无效，不仅无法改变页面的状态，还会造成数据不一致。单次设置的数据不能超过1MB。请尽量避免一次设置过多的数据。不要把data中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题（仅支持设置可JSON化的数据）。目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.4.1　组件属性绑定组件属性绑定是将data里的数据绑定到微信小程序的组件上Page({data:{id:0}})示例代码如下。2.4.2　控制属性绑定控制属性绑定用来进行if语句条件判断，如果满足条件，则执行；否则不执行。Page({data:{condition:true}})示例代码如下。2.4.3　关键字绑定关键字绑定常用于组件的一些关键字。如复选框组件，checked关键字如果等于true，则代表选中复选框；如果等于false，则代表不选中复选框。示例代码如下。不要直接写checked="false"，其计算结果是一个字符串，转成boolean类型后代表真值。2.4.4　运算可以在{{}}内进行简单的运算，小程序支持以如下几种方式进行运算。Hidden1.三元运算{{a+b}}+{{c}}+dPage({data:{a:1,b:2,c:3}})2.数学运算view中的内容为3+3+d。2.4.4　运算5}}">3.逻辑判断{{"hello"+name}}Page({data:{name:'MINA'}})4.字符串运算{{object.key}}{{array[0]}}Page({data:{object:{key:'Hello'},array:['MINA']}})5.数据路径运算2.4.5　小试牛刀：天气微信小程序创建一个天气“weather”项目，如左图所示。步骤一：创建“weather”项目天气微信小程序，用来显示温度、最低温度、最高温度及其他天气情况，如右图所示。下面我们通过数据绑定的方式来显示天气情况（实例位置：源码\第2章\weather）。2.4.5　小试牛刀：天气微信小程序进入index.wxml、index.js、index.wxss文件，清空所有的内容，进入app.json文件，修改导航栏标题为“中国天气网”。步骤二：进入index.wxml文件，进行当天天气情况的界面布局，包括温度、最低温和最高温、天气情况、城市、星期、风向情况。代码如下。步骤三：℃2.4.5　小试牛刀：天气微信小程序进入index.js文件，在data里提供天气的数据，让这些数据在界面里显示出来。代码如下。步骤四：Page({data:{temp:"4",low:"-1℃",high:"10℃",type:"晴",city:"北京",week:"星期二",weather:"无持续风向微风级"}})进入index.wxml文件，将data里提供天气情况的数据绑定到页面里。步骤五：2.4.5　小试牛刀：天气微信小程序代码如下。{{temp}}℃{{low}}/{{high}}{{type}}{{city}}{{week}}{{weather}}天气情况界面效果如图2.21所示。2.4.5　小试牛刀：天气微信小程序.content{font-family:微软雅黑,宋体;font-size:14px;background-size:cover;height:100%;width:100%;color:#333333;}.today{padding-top:70rpx;height:50%;}.temp{font-size:80px;text-align:center;}进入index.wxss文件，为index.wxml文件添加样式，美化页面。代码如下。步骤六：.city{font-size:20px;text-align:center;margin-top:20rpx;margin-right:10rpx;}.lowhigh{font-size:12px;text-align:center;margin-top:30rpx;}.type{font-size:16px;text-align:center;margin-top:30rpx;}.week{font-size:12px;text-align:center;margin-top:30rpx;}.weather{font-size:12px;text-align:center;margin-top:20rpx;}添加样式后的界面效果如图2.22所示。目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.5.1　wx:if判断单个组件在微信小程序框架里，使用wx:if="{{condition}}"来判断是否需要渲染该代码块。示例代码如下。True使用wx:elif和wx:else来添加一个else块。5}}">12}}">232.5.2　blockwx:if判断多个组件wx:if是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，就可以使用一个标签将多个组件包装起来，并在上面使用wx:if控制属性。示例代码如下。view1view2并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。目录导航2.1　微信小程序目录结构介绍2.3　微信小程序注册页面的使用2.5　微信小程序条件渲染2.6　微信小程序列表渲染2.2　微信小程序注册程序的应用2.4　微信小程序如何绑定数据2.7　微信小程序定义模板2.8　微信小程序的引用功能2.9　WXS小程序脚本语言2.10　微信小程序WXSS样式渲染2.11　沙场大练兵：仿“香哈菜谱”微信小程序2.12　小结2.6.1　wx:for列表渲染单个组件在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。示例代码如下。{{idx}}:{{itemName.message}}{{index}}:{{item.message}}Page({data:{使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。示例代码如下。array:[{message:'foo',},{message:'bar'}]}})2.6.2　blockwx:for列表渲染多个组件wx:for应用在某一个组件上，如果想渲染一个包含多节点的结构块，wx:for需要应用在标签上。示例代码如下。{{index}}:{{item}}2.6.3　wx:key指定唯一标识符如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。wx:key的值以如下两种形式提供。字符串保留关键字示例代码如下。{{item.id}}Page({data:{objectArray:[{id:5,unique:'unique_5'},{id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},]}}2.6.3　wx:key指定唯一标识符如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。wx:key的值以如下两种形式提供。字符串保留关键字示例代码如下。{{item.id}}Page({data:{objectArray:[{id:5,unique:'unique_5'},{id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1