作者：张益珲
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信小程序开发实战试读：
前言
为什么要写本书
近年来，微信小程序越来越火热，其依靠微信庞大的闭环生态，一出现就得到了广泛关注。小程序是一种无须下载且运行在微信平台内部的微型程序。2017年1月，小程序正式上线，到目前为止，其已经更新迭代了多个版本，稳定性基本完善，功能也越来越强大。目前，小程序为人们的日常生活提供了诸多便利，在自动售卖机上购买商品、使用共享单车、观看小视频与热门资讯等服务都可以在小程序上完成。
随着 5G技术的普及，当网速和流量不再成为限制用户体验的主要门槛时，我相信小程序还能发挥更加强大的作用。小程序插件化和云计算的设计模式也将是未来软件开发的趋势。
非常感谢读者在众多编程图书中选择本书作为学习资料，我也希望本书可以为您带来预期的收获。
本书有何特色
本书是一本入门级编程教程。所谓入门级，是指读者不需要有太多的编程经验，需要的只是兴趣和持之以恒的耐心。兴趣是最好的老师，尤其在编程领域，技术年年更新、月月更新，甚至日日都在更新。持续保持兴趣才能有不断学习的动力。同时，编程的过程也充满了乐趣，只要保持足够的耐心去积累和学习，在这个领域中就会有更多新的发现。
本书也是一本实战编程教程。编程知识，很多是理论的，如语法规则、编程规范、内置方法与变量等。但编程的最终目的是将其应用于实际项目，而学习编程最快的方式就是不断运用学习的知识进行实战开发。我编写本书的核心思路也是如此，力求以最快的方式让读者能够开发小程序，因此第11章和第12章为实战项目。
本书内容及知识体系
本书可以分为4个部分。
第 1部分为基础部分（第 1章至第 4章），主要介绍小程序开发的理论基础，包括开发语言的基础知识、开发环境的搭建及简单组件的应用。这一部分比较简单，容易引起读者的学习兴趣，当然，对于有编程基础的读者，也可以选择跳过这一部分内容，直接进行后面章节的学习。
第2部分为进阶部分（第5章至第10章），相对基础部分来说，这一部分内容略微复杂，包括小程序中高级组件的使用、自定义组件技术的使用、动画、云开发，以及关于数据与网络等相关技术。这一部分的内容虽然困难但并不枯燥，这些技术也是在实际开发中必须具备的编程技能。因此，不论是作为小程序工程师做小程序应用的全职开发，还是业余爱好者根据兴趣学习小程序编程，掌握这一部分的技能都非常重要。
第3部分为实战部分（第11章和第12章），第11章通过一个阅读类的项目新闻客户端带领读者综合运用前面章节所学习的内容，帮助读者融会贯通，学以致用；第 12 章则与读者一起开发一款完整的社区类读书应用。这两章的练习，不仅可以提高读者的技术能力，还可以让读者体会一个小程序应用从0到1的整个过程。
第4部分为扩展部分（第13章），跳出小程序开发，向读者介绍相关领域的更多开发技术。
适合阅读本书的读者
无论是职业开发者、业余爱好者、在校学生抑或是讲师，阅读本书都会有一定的收获。在这个日新月异的时代，每个人都是学生，我在编写本书的过程中查阅了大量资料，并进行了多次修改，但由于时间和能力有限，书中难免存在不足之处，希望广大读者能够提出宝贵的意见和建议（QQ：316045346）。
本书资源
致谢
本书能够到达您的手上，除了要感谢一直支持我的家人与朋友，最应该感谢的人是北京源智天下科技有限公司的王蕾，没有她的敦促指点和耐心细致地对稿件进行修改，我无法顺利地完成本书的编写。
张益珲第1章 走进小程序的开发世界
微信小程序简称小程序，是基于微信之上的、开放的应用平台。自2017年1月小程序功能发布起，小程序就一直受到广泛的关注。
与传统应用相比，小程序具有得天独厚的用户优势，微信活跃用户数是巨大的，用户传播性也是极强的。因此，一款有趣的小程序很容易在微信系统中广泛转发与传播。
另外，速度快、体验优质、无须下载，以及可以随时热更新的特性也使小程序成为一个十分方便、易用的线下工具，线下餐饮门店的在线点餐与付款、无人售卖商店的商品结算等场景都十分适用。
本章主要介绍小程序的发展历史，并演示几款小程序的应用场景。除此之外，本章也是学习小程序开发的准备章节，通过本章可以了解开发环境的下载与安装，完成小程序开发账号的申请，同时学会如何发布体验版的小程序，以及如何上架一款已经完成的小程序，最后尝试编写HelloWorld小程序，并且能够使用模拟器和真机进行调试。1.1 认识小程序
使用微信的用户或多或少都使用过小程序。其实，微信小程序又分为游戏小程序和应用小程序。通常将应用小程序称为小程序，而将游戏小程序称为小游戏。
在日常生活中人们经常会使用到小程序和小游戏。欢乐斗地主、腾讯桌球、腾讯四川麻将等小游戏都非常火爆，日常生活中人们使用比较频繁的各个应用程序也几乎都有小程序的版本，如新浪微博、知乎等。1.1.1 小程序的发展史
2016年9月21日，微信小程序正式开启内测，在内测期间，各种目光和评论都集中在微信小程序这个新兴的应用平台上，等待观望其后续的发展。
2017年1月9日，第一批小程序正式上线，用户可以在微信上体验各种小程序提供的服务。小程序的热度达到最高，各种褒贬也随之而来。
2017年12月28日，微信开放了小游戏功能，并且通过“跳一跳”小游戏再次引爆热点。
2018年1月18日，微信提供了小程序侵权的投诉渠道，平台规范性更加完善。
2018年1月25日，小程序开放与移动端App互相跳转和交互的功能。
2018年3月，小程序广告组件启动内测，开发者应用变现的能力增强。
2018年7月13日，小程序支持收藏功能，用户可以将喜欢的小程序直接添加到“我的小程序”中。
2018年8月10日，小程序后台数据分析工具进一步升级，运营人员可以在小程序后台看到更多用户数据。
整体来看，小程序正在快速蓬勃发展，虽然在此过程中遇到过很多质疑，但是并没有阻碍小程序前进的脚步。如今，小程序已经替代了许多轻型应用，并且使线下实体店可能以更小的成本拥有自己的线上服务平台。小程序已经在各个领域中为人们的日常生活带来了非常大的便利。同时，小程序的发展趋势也越来越具有开放性，更多的高级开发工具、用户分析工具和API接口都会提供给开发者使用，无论是对于用户还是对于开发者，这都是一个更好的时代。1.1.2 几款优秀的小程序
在微信消息主页面进行下拉即可进入小程序窗口，如图1-1所示。
小程序窗口被分为两栏，上面部分是用户最近使用过的小程序，根据使用时间进行排序，下面是用户收藏的小程序。在最近使用一栏中，最后的查看更多按钮可以跳转到一个新的小程序列表页，小程序列表页中会列举所有使用过的小程序及用户收藏的小程序。另外，微信会通过地理位置将附近的小程序推荐给用户，将线上与线下进行无缝接合，如图1-2所示。
目前，小程序具有完善的组件库、布局体系和功能接口。常见的界面效果和常用的功能在小程序上实现都非常方便。
热门微博是一款非常优秀的资讯类小程序，其采用信息流的设计方式将热门的微博内容整合推荐给用户，并且提供了登录注册、个人中心、微博详情、查看评论等功能，快速阅读热门微博和分享感兴趣的微博给微信好友都十分方便，图1-3所示为热门微博小程序示例。图1-1 小程序窗口图1-2 小程序列表页图1-3 热门微博小程序示例
唯品会小程序是配套唯品会移动端在微信平台的电商购物应用。唯品会小程序具有完整的用户个人中心、购物车、商品分类及商品推荐等功能，在小程序中可以直接完成选货、加购物车、结算、活动参与等操作，是一款功能非常完善的优质小程序，如图1-4～图1-7所示。
腾讯视频小程序是视频娱乐类小程序中非常优秀的一款，用户可以直接在小程序上观看自己喜欢的电影、电视剧、自媒体短视频等，如图1-8所示。图1-4 商品推荐图1-5 商品分类图1-6 购物车图1-7 个人中心图1-8 腾讯视频小程序
除上面列举的这几款优质的小程序外，生活中的各个场景几乎都有相关的小程序提供服务，读者可以在小程序搜索栏查找自己感兴趣的小程序进行体验。1.1.3 小程序的适用场景
首先，相比移动端的应用程序，小程序具有如下5个特点。
● 不需要下载安装，第一次使用门槛极低。
● 节省流量，节省安装时间，不占用桌面。
● 体验仅次于原生应用，但比网页应用好很多。
● 小程序平台更统一，操作流程更统一，更容易上手使用。
● 对于开发者来说，可以极大地降低开发成本，并且可以忽略平台差异。
通过以上列举的小程序的特点可以发现，小程序其实并非要代替移动端应用程序，而是解决了移动端应用程序的一些痛点。移动端应用程序的推广成本是非常高的，若要让用户花费时间和流量下载应用程序并且完成注册是一个非常困难的过程，而小程序依赖微信天然的用户体系，加之不需要花费太多时间和流量，用户会非常乐意尝试。
因此，一些即用即走的功能型应用，或者完整移动端应用中的某个功能亮点都非常适合独立成一个微信小程序。基于以上特点，小程序也非常易于与线下的场景相结合，通过线程扫码，可以快速整合线上与线下服务。
如果考虑业务场景是否适合使用小程序，可以从以下4个方面入手。
● 是否需要紧密结合线下，如果需要，小程序非常合适。
● 业务逻辑是否足够简单，小程序有体积限制，无法承载过于复杂的业务。
● 业务逻辑是否是即用即走型，小程序不会占用桌面，因此相对于移动端应用，不利于做连续性强的业务。
● 是否可以借助微信用户群，如果业务场景与微信用户体系不抵触，那么使用小程序就非常合适，推广业务也会比较容易。1.1.4 小程序的设计建议
每个移动端应用程序都有自己的设计风格，由于小程序基于微信的闭环生态，为了提供更好的一致性和更优质的用户体验，腾讯为开发者提供了一套设计指南。查看完整设计指南文档的地址如下：
https://developers.weixin.qq.com/miniprogram/design/index.html
本节主要介绍小程序设计中的几项基本原则，从而帮助读者开发简洁、高效且体验优质的小程序。
1.简洁友好
小程序的特点之一就是高效，因此在设计界面时，应尽量减少冗余信息，将当前界面最核心、最主要的功能展示出来。同时，一个界面中也不要有多个核心功能点，这样会使重点分散，为用户的使用带来困惑。
2.流程明确
小程序更适用于即用即走的功能性应用，因此在设计时，各个流程要环环相扣，明确指引用户一步一步地完成业务场景。切勿在某个业务流程中间穿插其他的业务或需要用户操作的行为，也不要打断用户当前的使用流程。
3.导航和异常处理
在设计小程序时要考虑用户的前进与返回，页面导航结构要清晰，让用户明确知道下一步或上一步的场景。同时，要处理好异常情况，因为程序在使用过程中难免会发生异常，所以要注意捕获与处理，必要时应将异常原因告知用户。
4.配色要与微信切合
由于小程序是微信平台内的平台，在设计时，其配色方案要和微信本身的风格保持一致，过大的色差会使用户产生不适。
5.使用与微信风格一致的工具组件
例如，下拉刷新与上拉加载功能组件，以及耗时任务的等待组件、功能按钮选择框、弹窗、提示框、输入框等组件应尽量与微信保持一致，在字体和文本风格颜色的选择上也应尽量与微信保持一致，这样可以为用户带来舒适的体验。1.2 开发前的准备
在正式进行小程序的开发之前，我们还需要做一些准备工作，如注册小程序开发账号，以及下载和安装微信开发者工具等。在小程序开发完成后，我们也需要了解如何进行小程序体验版的发布，以及如何将测试完成后的小程序提交上线。本节主要介绍小程序开发前的准备工作。1.2.1 注册小程序开发账号
在开发小程序之前，需要先在微信公众平台注册小程序开发账号。注册完成后可以在微信开发者工具上使用此账号进行小程序的开发。目前，小程序开放的注册范围有5种：个人、企业、政府、媒体和其他组织。我们在学习小程序开发时，直接注册个人的小程序账号即可。首先，进入微信公众平台账号注册页面，地址如下：
https://mp.weixin.qq.com
选择注册小程序类型的账号如图1-9所示。图1-9 选择注册小程序类型的账号
其次，填写完整注册所需的基本信息，在注册时需要使用一个有效的邮箱作为账号，并且注册完成后需要登录邮箱进行验证。
注册完成后，使用此账号登录微信公众平台，由于我们注册的账号为小程序账号，所以会直接进入小程序的管理后台。
进入小程序管理后台后的第一步是将小程序基本信息补充完整，一个小程序账号对应一个小程序。需要补充完善的小程序信息包括小程序的名称、简称、头像、介绍及服务类目。小程序后台中的版本管理功能用来帮助开发者管理小程序的版本，里面会将当前已上线的小程序版本（线上版本）、审核中的版本（审核版本）及开发中的版本（开发版本）分别列出，如图1-10所示。图1-10 小程序版本管理工具
在后台的成员管理工具中，可以对小程序的项目成员和体验成员进行管理。项目成员可以设置的权限包括运营者权限、开发者权限和数据分析者权限；体验成员可以添加用户，使其支持提前体验为发布上线的小程序。
反馈管理可以帮助开发者更快地追踪到用户在使用过程中遇到的问题，用户可以通过小程序提供的接口直接将意见提交到小程序后台供开发者查阅。
小程序后台的统计功能也非常重要，开发者可以在其中查看实时的小程序数据，也可以做一些来源分析、自定义事件等高级统计任务。
小程序后台汇总还提供了一些其他高级功能，如附近的小程序、物流助手、客服、模板消息等。如果读者有兴趣，可以在文档中查看它们的用途和使用方法。1.2.2 下载和安装微信开发者工具
准备好小程序账号之后，下一步我们需要下载和安装小程序开发所需要的开发工具。在如下网址可以下载最新的微信开发者工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
在下载时需要注意，官方提供了Windows 64位、Windows 32位和Mac OS 3个版本的开发者工具，读者可以根据自己所使用的计算机系统进行选择。本书以Mac OS为例进行介绍。
微信开发者工具的下载和安装十分简单，也无须额外的配置，在下载完成后，直接双击安装即可。使用微信开发者工具需要使用微信号进行登录，在申请小程序账号时，需要关联一个微信号作为小程序的管理员，可以用此微信号直接登录，也可以使用添加到小程序后台的开发者的微信账号进行登录，微信开发者工具的初始界面如图1-11所示，直接扫码进行登录即可。
登录成功后，界面如图1-12所示，可以在其中选择小程序项目。图1-11 微信开发者工具的初始界面图1-12 选择开发者工具中的小程序项目
如果是初次使用微信开发者工具，则需要创建一个新的小程序项目，在小程序项目目录页面单击加号按钮，创建一个新的小程序项目。在创建小程序项目时，需要填写小程序的AppID并选择建立普通快速启动模板，如图1-13所示。图1-13 新建小程序项目
小程序的AppID可以在小程序开发后台的开发设置中查看，如图1-14所示。
在新建完成小程序项目之后，默认的模板会自动创建一个获取用户信息的示例程序，如图1-15所示。图1-14 查看小程序的 AppID图1-15 模板创建的示例程序1.2.3 微信开发者工具的使用简介
微信开发者工具提供了非常强大的模拟器、编辑器及调试器的相关功能（见图1-15）。微信开发者工具的左上角有4个功能按钮：模拟器、编辑器、调试器和云开发。其中，模拟器按钮用于开关模拟器窗口，编辑器按钮用来开关编辑器窗口，调试器按钮用来开关调试器窗口，云开发按钮与开通云函数相关功能有关。
模拟器窗口默认位于微信开发者工具的左侧，开发者可以选择使用各种 iPhone 或Android模拟器设备进行代码运行效果的查看。
编辑器的主要作用是索引文件与编写代码。微信开发者工具的右边上部分为编辑器窗口，编辑器左边为文件目录，编辑器右边为代码编写窗口。
调试器在微信开发者工具的右下方，其中提供的控制台工具用来显示程序中打印的调试信息，源文件工具用来提供给开发者进行断点调试，网络工具与数据工具用来查看应用运行时的网络与数据情况。
熟练运用微信开发者工具提供的模拟器、编辑器和调试器工具可以极大地提高开发效率。微信开发者工具的导航栏上还有一行高级功能按钮，如图1-16所示。图1-16 高级功能按钮
使用图 1-16 列出的高级功能按钮可以进行编译模式的切换，或模拟将小程序切换到后台，以进行真机预览和真机调试。清缓存按钮的主要作用是将小程序的缓存进行清除，如用户登录状态等。关于真机调试的相关功能后面会专门展开介绍。1.2.4 发布小程序体验版与上架小程序
一款小程序在发布之前，首先要经过内部测试。内部测试通常需要开发人员、测试人员、产品人员、运营人员及粉丝用户一起参与。1.2.3节提及的预览功能，只能开发者自己在手机上进行体验，如果要进行多人参与的内测，可以发布小程序体验版本。
在微信开发者工具导航栏的右上角有一个双箭头按钮（与开发工具窗口的宽度有关，额外的按钮会被隐藏在这个双箭头按钮中），这个按钮会提供更多的功能，如图1-17所示。图1-17 更多功能按钮
更多功能菜单中提供了上传功能，单击“上传”，开发者工具会将当前的程序打包上传到小程序后台，在提交之前，需要选择一个版本号，如图1-18所示。图1-18 设置版本号
在小程序后台的版本管理工具中可以查看开发者提交的小程序版本，可以将其设置为体验版本，如图1-19所示。图1-19 设置小程序体验版本
在成功设置体验版本后，小程序后台会自动生成一个体验二维码。此小程序的体验成员可以通过微信扫描二维码对体验版小程序进行体验。
上架小程序需要先将完整的小程序代码打包上传，之后在小程序后台将此版本提交审核，然后微信小程序的审核团队会针对小程序的功能、可用性、是否合规进行审核，如果审核通过，开发者可以发布上线。1.3 编写HelloWorld程序
几乎学习任何一门编程技术，都是从HelloWorld程序开始的。HelloWorld程序虽小，但是“五脏俱全”，本节基于一个最简单的入门程序，展开介绍小程序开发的基础框架。1.3.1 分析小程序示例工程
1.2.2节创建了一个小程序示例项目，其目录结构如图1-20所示。图1-20 小程序示例项目的目录结构
可以看到，小程序项目的根目录下有两个文件夹，分别命名为pages和utils，根目录下还有4个全局文件，其中，3个是应用程序的配置文件，1个是工程配置文件。
在开发小程序时会遇到4种类型的文件：以.js为后缀的文件是核心的逻辑代码文件；以.json为后缀的文件通常用来存储配置信息；以.wxml为后缀的文件用来编写页面结构；以.wxss为后缀的文件是样式表文件，用来进行页面渲染样式的设置。
project.config.json配置文件用来对工程进行全局配置，如工程名称、目录路径、AppID等。project.config.json配置文件可进行配置的常用字段如表1-1所示。表1-1 project.config.json配置文件可进行配置的常用字段
setting选项可以配置的字段如表1-2所示。表1-2 setting选项可以配置的字段
compileType字段可选的字符串值如表1-3所示。表1-3 compileType字段可选的字符串值
app.js 文件是当前应用程序的入口文件，阅读此文件的代码可以发现，其中只调用了一个App（）函数。App（）函数的作用是注册小程序，并且会接收一个Object作为参数，其中会定义小程序的生命周期回调。需要注意的是，App（）函数必须在app.js文件中进行调用，并且只能调用一次。
App（）函数中传入的Object参数可以指定的回调函数如表1-4所示。表1-4 App（）函数中传入的 Object参数可以指定的回调函数
app.json 文件用来对小程序进行全局配置，其决定页面文件的路径、窗口表现等，可配置项如表1-5所示。表1-5 app.json文件用来对小程序进行全局配置的可配置项
窗口配置字段window对象的可配置属性如表1-6所示。表1-6 窗口配置字段 window对象的可配置属性续表
tabBar字段的可配置属性如表1-7所示。表1-7 tabBar字段的可配置属性
关于标签栏的list属性，其中可以定义一组标签，标签数量需要大于1个且小于6个。每个标签可配置的属性如表1-8所示。表1-8 每个标签可配置的属性
networkTimeout字段用来配置网络超时时间，其中可以配置的属性如表1-9所示。表1-9 networkTimeout字段配置网络超时时间可以配置的属性
试读结束[说明：试读内容隐藏了图片]