作者：刘刚
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信小程序开发图解案例教程(第2版)试读：
内容提要
本书分两篇，介绍了微信小程序设计的基本知识和实战案例。第一篇为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、必备的微信小程序API、微信小程序设计及问答；第二篇为综合案例应用，包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式，讲解微信小程序设计的基本原理和知识，简单易懂，提供了丰富详尽的实战案例，带读者边做边学，快速掌握微信小程序的设计和实现。
本书可供对微信小程序开发有兴趣的读者自学，也可作为院校、培训机构关于微信小程序开发课程的教材。
第2版前言
为什么要学微信小程序微信小程序是微信团队在2017年1月9日正式发布的功能，它可以实现App软件的原生交互操作效果，但是不像App软件需要下载安装才能使用。微信小程序只需要用户扫一扫或者搜一下就可以使用，不仅符合用户的使用习惯，还释放了用户手机的内存空间，同时给企业提供了宣传自己产品的渠道。创建微信小程序就可以被更多用户找到自己的产品，宣传自己的产品。微信小程序的快速发展，为我们提供了很多的就业机会。让我们赶快成为一名小程序员吧！
使用本书，你可以通过3步学会微信小程序
Step1 通过图、文、代码、视频精讲快速理解小程序的基本原理和应用方法。
Step2 沙场大练兵——边做边学。
Step3 综合实战，感受真实商业项目制作过程。
小刚（刘刚）老师简介
● 一线项目研发、设计、管理工程师，高级项目管理师、项目监理师，负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据等多个国家级项目的设计与开发。
● 极客学院、北风网金牌讲师。
● 畅销书《微信小程序开发图解案例教程（附精讲视频）》《小程序实战视频课：微信小程序开发全案精讲》《Axure RP8原型设计图解微课视频教程（Web+App）》作者。
平台支撑，免费赠送资源
● 全部案例源代码、全书电子教案可登录人邮教育社区（www.ryjiaoyu.com.cn）或网盘（https://box. lenovo.com/l/q5WSJC，提取码：028a）下载。
● 全书高清精讲视频课程（扫描书中二维码或登录人邮学院观看，人邮学院登录方法见本书封底）。著者2018年10月第一篇微信小程序快速入门第1章认识微信小程序
2016年1月9日，腾讯公司启动了微信小程序产品的研发，于2017年1月9日正式发布。微信小程序也被称为微信应用号。不同于微信订阅号或公众号，微信小程序被赋予了应用程序的能力，它是一种无须安装即可使用的应用，实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。应用将无处不在，随时随地可用，无须卸载。我们一起来认识一下微信小程序吧！微信小程序介绍微信小程序开发准备微信小程序开发工具的使用沙场大练兵：Hello World的创建小结01.1 微信小程序介绍微信小程序介绍1.1.1 初识微信小程序
微信小程序（简称小程序）是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。（1）在微信中的“发现”界面，可以找到小程序的入口，如图1.1所示。图1.1 微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。（3）给好友或者在群里分享小程序。
小程序的界面和使用方法和App类似，图1.2所示是几个已发布的常用小程序界面。图1.2 常用微信小程序界面
用户需要下载、安装才可以使用App，安装时还会考虑App占用多大存储空间，哪些程序应该卸载掉以释放空间。微信小程序则无需安装，直接使用，不占用存储空间。用户在使用微信小程序后，可以用完即走。例如，我们去餐馆点菜，并不需要去下载这个餐馆的应用程序，只需要在餐馆扫描一下二维码，即可在小程序里点菜，之后并不需要去卸载应用程序，直接关闭小程序即可。
微信小程序看起来是程序，但它以完全不同于App的状态出现，具有更灵活的应用组织形态。1.1.2 微信小程序的功能
小程序提供的功能如下。（1）分享页功能。用户可以将小程序的当前页面分享给好友，如分享北京到上海的火车票列表页面，用户打开时是这个页面的实时数据，而不需要再次启动微信小程序。（2）分享对话功能。用户可以将对话分享给好友或者微信群。（3）线下扫码进入微信小程序功能。该功能提示用户附近有哪些微信小程序可以使用，扫描二维码就可以使用微信小程序。（4）挂起状态功能。例如，用户使用微信小程序时可以先接电话，接完电话后可以继续使用微信小程序进行相关操作。（5）消息通知功能。商户可以发送消息给接受过服务的用户，用户同时可以使用微信小程序的客服功能联系商户。（6）实时音视频录制播放功能。通过此功能可以随时随地进行直播或者录播。（7）硬件连接功能。通过使用NFC功能，可以把手机当成公交卡、门禁卡等使用，通过Wi-Fi连接功能，可以进行Wi-Fi连接。（8）小游戏功能。利用微信小程序制作的“跳一跳”小游戏，让游戏大门从此打开，让用户知道小程序也可以制作游戏。（9）公众号关联功能。微信小程序可与公众号进行关联，公众号可关联不同主体的3个小程序，还可关联同一主体的10个小程序。（10）搜索查找功能。用户可以根据关键字或品牌名称查找小程序。（11）识别二维码功能。用户长按识别小程序码可以进入小程序。
小程序不提供的功能如下。（1）小程序没有集中入口，没有应用商店。（2）小程序没有订阅关系，没有粉丝，只有访问量。（3）小程序不能推送消息。1.1.3 微信小程序的使用场景
从上线开始，各种小程序就如雨后春笋般出现，小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目。通过这些服务类目，我们能知道小程序的使用场景。服务类目分为个人服务类目和企业服务类目。个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大，如表1.1、表1.2所示。表1.1 个人服务类目续表表1.2 企业服务类目续表1.1.4 微信小程序能取代App吗
原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小程序最大的优势。从这个角度来看，小程序是“跨平台”的。
在现阶段，开发一套逻辑完整的应用程序，小程序的开发效率是低于App的。小程序独立出了一个封闭的生态。
小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组件，以前的echarts和hightcharts都无法使用。
小程序不支持WebView，大量已被静态化好的HTML页面完全没办法在小程序上展示。
小程序想取代Android和iOS还要走很长的路，是蓝海还是死海需要时间来验证。
小程序经过腾讯公司的扶持和发展，已经吸引了很多企业使用，作为与iOS、Android、公众号、网站并行的流量入口。1.1.5 微信小程序的发展历程
微信小程序从开始研发、正式发布到推广使用，经历了以下发展时期。（1）2016年1月9日，微信团队首次提出应用号的概念。（2）2016年9月22日，微信公众平台对外发送小程序内测邀请，内测名额200个。（3）2016年11月3日，微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布。（4）2016年12月28日，张小龙在微信公开课中解答外界对微信小程序的几大疑惑，包括没有应用商店、没有推送消息等。（5）2016年12月30日，微信公众平台对外发布公告，上线的微信小程序最多可生成10 000个带参数的二维码。（6）2017年1月9日，微信小程序正式上线。（7）2017年3月27日，个人开发者可以申请小程序开发和发布。（8）2017年4月17日，小程序代码包大小限制扩大到2MB。（9）2017年4月20日，腾讯公司发布公众号关注小程序新规则。（10）2017年5月12日，腾讯公司发布“小程序数据助手”。（11）2017年12月28日，微信更新的6.6.1版本开放了小游戏。（12）2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。（13）2018年1月25日，微信团队在“微信公众平台”发布公告称“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用”。（14）2018年3月，微信正式宣布小程序广告组件启动内测，内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力，开发者可以通过小程序来赚取广告收入。1.1.6 微信小程序带来的机会
微信小程序给很多想做程序员的人提供了机会，因为它的开发门槛很低，不需要太难的技术。学习微信小程序开发，就可以成为一名“小程序员”。例如，设计师、学生、创业者、待业青年、“网虫”、策划人员、编辑、草根站长等都可以转做程序员。
微信小程序给企业提供了流量入口，企业可以通过小程序推广自己的产品。经过腾讯公司的大力扶持，小程序已经成为各个企业非常看重的流量入口。1.2 微信小程序开发准备微信小程序开发准备1.2.1 基础技术准备
微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。1.2.2 开发准备
Step1：在“微信公众平台”注册微信开发者账号。单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，如图1.3（a）所示，可以打开帮助文档界面，如图1.3（b）所示。
在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。开发人员经常会用到这里的简易教程、框架的使用、组件的介绍、API、工具以及腾讯云支持等内容。
Step2：在文档工具里，根据自己的操作系统，下载微信小程序的开发工具，如图1.4所示。图1.3（a） 开发文档图1.3（b） 帮助文档图1.4 下载开发工具
Step3：按照提示完成开发工具的安装，安装完成后用微信扫描二维码登录。开发工具提供了小程序项目和公众号网页项目两个调试类型，如图1.5所示。图1.5 开发工具1.3 微信小程序开发工具的使用微信小程序开发工具的使用1.3.1 创建项目
在开发工具里单击“小程序项目”，进入到“小程序项目”界面，可以添加一个新的项目。在这个界面里需要填写项目目录、AppID和项目名称，如图1.6所示。图1.6 添加项目
获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2节中注册的账户，在“设置”→“开发设置”中，查看微信小程序的AppID，如图1.7所示。注意
不可直接使用服务号或订阅号的 AppID 。也可以不填写AppID，但功能会受限。图1.7 获取AppID注意
如果要以非管理员微信号在手机上体验该小程序，还需要“绑定开发者”，即在“用户身份”→“开发者”模块，绑定需要体验该小程序的微信号。
输入AppID后，在桌面上建立一个“demo”文件夹，并将其选择为项目目录，在项目名称中输入“demo”，勾选“建立普通快速启动模板”选项（还可以选择“建立插件快速启动模板”创建插件项目），单击“确定”按钮即可，如图1.8所示。图1.8 创建demo项目1.3.2 开发者工具界面
创建项目后，进入到微信开发者工具界面，界面大致可以分为6个区域：①菜单栏区域，②模拟器、编辑器、调试器显示与隐藏区域，③模拟器区域，④编辑器区域，⑤调试器区域，⑥工具栏区域，如图1.9所示。图1.9 开发者工具界面
① 菜单栏区域：包含项目、文件、编辑、工具、界面、设置、微信开发者工具菜单。
② 模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试器区域的显示与隐藏的便捷操作按钮。
③ 模拟器区域：用来显示小程序项目的界面。
④ 编辑器区域：用来进行代码编写的区域。
⑤ 调试器区域：用来进行调试的区域。
⑥ 工具栏区域：包含编译、预览、远程调试、切后台、清缓存、上传、测试、腾讯云、详情工具栏按钮。1.3.3 模拟器区域
模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，方便小程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的终端设备，如iPhone 5、iPhone 6等；设置模拟器区域的百分比大小；模拟设置Wi-Fi、2G、3G等网络连接情况，如图1.10所示。图1.10 模拟器区域1.3.4 编辑器区域
编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构；另一部分用来进行代码编辑，如图1.11所示。图1.11 编辑器区域（1）在项目目录上单击鼠标右键可以在硬盘打开文件目录，对文件目录重新命名，删除目录，在该目录下查找指定内容、新建文件等，如图1.12所示。图1.12 文件操作（2）在代码编辑区域里编写代码，可以通过模拟器区域，实时预览编辑的情况。修改 wxss、wxml 文件，会刷新当前页面（page），修改js文件或者json文件，会重新编译小程序，如图1.13所示。图1.13 代码编写（3）在代码编写过程中，开发工具提供自动补全功能。在编辑js文件时，开发工具会帮助开发者补全所有的 API，并给出相关的注释解释；编辑wxml文件时，会帮助开发者直接写出相关的标签；编辑json文件时，会帮助开发者补全相关的配置，并给出实时的提示，如图1.14所示。图1.14 自动补全功能（4）开发工具提供自动保存功能，书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修改内容才会真实地写到硬盘上，并触发实时预览。1.3.5 调试器区域
小程序的常用调试工具有：Console、Sources、Network、Storage、AppData、Wxml。除了这6个调试选项外，还有一些不常用的工具：Application为记录加载的资源信息，Security为安全和认证，Audits为性能诊断和优化建议，Sensor用来选择模拟地理位置，Trace为性能监测数据，在这里不做详细介绍。（1）Console窗口用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息，还可以进行代码编写和调试，如图1.15所示。图1.15 Console功能（2）Sources窗口用于显示当前项目的脚本文件，在 Sources中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，有require的主动调用，如图1.16所示。图1.16 Sources功能（3）Network用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等，如图1.17所示。（4）Storage窗口用于显示当前项目，使用wx.setStorage 或者 wx.setStorageSync 后的数据存储情况，如图1.18所示。
试读结束[说明：试读内容隐藏了图片]