作者：荣蓉
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
实战微信小程序：JavaScript、WXML与Flexbox综合开发试读：
前言
移动应用开发的前景
随着科技的发展，手机已经成为每个人随时随地都要使用的“便携式电脑”。近年来，手机硬件配置越来越高，功能越来越丰富，系统越来越完善（并且一直被Android和iOS两大系统称霸），价格越来越平易近人，这些优势使得手机越来越普及，相应地，市场对移动应用开发的需求必然会越来越高。
本书写作目的
现在，市场上的应用基本可以分成三种开发方式：Android原生开发、iOS原生开发和跨平台开发。前两种开发方式都是原生开发，一般情况下会同时进行两个版本的原生开发，或者直接使用第三种——跨平台开发。近年来，跨平台开发陆续萌生出很多种框架，例如PhoneGap、Titanium、React Native等。开发者们也对这些框架有过一些争论，我们暂且不说这些框架孰好孰坏。
2016年，“微信之父”张小龙时隔多年公开亮相并称微信正在研究一种新的形态，叫“微信小程序”，经过一年的研究测试，终于在2017年1月正式上线。微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
微信小程序上线不到一天，便迅速引爆网络，一百多个微信小程序的名单出炉，各种互联网公司也争相投入开发，笔者从2016年起一直关注微信小程序的发展，也开发了一些应用。笔者希望可以把自己的开发经验分享给读者，也希望可以通过本书，由浅入深，为初学者提供开发指导，为开发者答疑解惑。同时希望借此书来认识更多志同道合的朋友。
如何阅读本书
本书在内容逻辑上可以分为4部分。
第一部分（第1～第2章）主要介绍了什么是微信小程序、微信小程序的发展前景等，让初学者很快了解微信小程序。
第二部分（第3～第4章）主要介绍了JavaScript和WXML，可以让零基础或者没有学习过JavaScript的读者在学习微信小程序时不会有语言障碍，能够读懂每一行代码，为学习微信小程序开发打下基础。
第三部分（第5～第9章）是本书的精髓，重点介绍了微信小程序的布局、组件、API接口等，详细地阐述了微信小程序的所有功能实现。希望读者能够通过这部分内容的学习，熟练掌握微信小程序的开发。
第四部分（第10～第11章）通过详细的案例分析，可以使读者从项目开始到最后发布有一个系统的学习过程，至此，读者完全有能力开发出自己的微信小程序。
读者对象
· 对微信小程序开发有兴趣的人员。
· 移动平台开发人员。
· JavaScript开发人员。
· 有编程经验想转行做微信小程序的开发人员。
· 计算机专业的学生。
代码下载
本书配套源代码的下载地址：https：//pan.baidu.com/s/1nvyjsQt；密码：wqtr，若下载有问题或有什么疑问，欢迎发邮件到：yll＠520wcf.com或verobook＠163.com。
致谢
感谢微信团队，创造了这一伟大的产品。
感谢电子工业出版社，审校此书，以及为本书能够快速出版而付出的巨大努力。
感谢方立勋老师，在百忙之中为本书题序，帮助我们完善本书。
感谢徐明华老师，在百忙之中给予指导和支持。
感谢工作和生活中帮助过我们的所有人，有你们的鼓励和支持才有本书的面世，谢谢你们。
欢迎访问作者的博客（http：//520wcf.com）和公众号。
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
· 下载资源：本书如提供示例代码及资源文件，均可在下载资源处下载。
· 提交勘误：您对书中内容的修改意见可在提交勘误处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
· 交流互动：在页面下方读者评论处留下您的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http：//www.broadview.com.cn/31314第一部分认识微信小程序1微信小程序介绍
随着互联网的高速发展，国内互联网应用走向多元化，各行各业都在转型加入互联网计划。李克强总理也提出制定“互联网+”行动计划，推动移动互联网、云计算、大数据、物联网等与现代制造业结合，促进电子商务、工业互联网和互联网金融健康发展，引导互联网企业拓展国际市场。但是传统企业的融合、转型与移动化该如何相结合呢？转型成功后用户流量和使用率的问题如何解决呢？
这时，微信小程序这款为移动时代而生的产品出现了，并有效地解决了中国传统企业在转型过程中出现用户流量和使用率的问题，同时也让世界对中国创新能力刮目相看。1.1 微信小程序是什么
微信小程序，简称小程序，其英文名为Mini Program。如今，几乎每台智能手机上都会安装微信应用程序，微信的用户也遍布全球。而微信小程序实现了在微信内部不需要下载安装，用户扫一扫或搜索一下即可打开应用程序。
2016年9月21日，微信小程序正式开始内测。在微信生态下，这个不需要下载安装、用完即走的微信小程序引起了大家广泛的关注。腾讯云也正式上线了微信小程序的解决方案，提供了微信小程序在云端的技术方案。
2016年1月11日，微信之父张小龙公开亮相，他解读了微信四大价值观。张小龙指出，越来越多的产品注册了公众号，因为在这里开发、推广传播产品的成本比较低。但拆分出来的服务号功能做得却并不理想，所以微信内部正在研究一个新的形态，即微信小程序。
2017年1月9日0点，微信小程序正式低调上线，其为开发人员提供了全新的组件和API技术，为用户开启了不一样的体验模式。
张小龙曾说：“让创造发挥价值，好产品应该是用完即走，微信应该是给用户提供便利，而非浪费时间。希望用户在微信里看到的都是自己愿意看到的东西，也希望用户能够留出更多的时间去做其他的事情”。从张小龙说的话我们能看出，微信小程序的目的就是把用户使用微信的动作都集中在微信上，而微信小程序也就将是另一个App Store。1.2 微信小程序的前景
其实，早在前两年，这种轻应用的模式就一直被大家所关注，不管是百度、UC还是Google，都在尝试基于Web模式做一种小成本、跨平台性好的轻应用，由于各种原因，最后都没有实现。而一直沉默的微信在2017年发布了新产品——微信小程序，打破了这个一直不能解决的问题。如今的微信掌握着数亿用户，也成为目前国内用户量最大的App应用。统计数据表明，微信用户日常在微信上花费的时间平均超过4个小时以上，这也是微信小程序之所以会成功的关键吧。可以看出，微信早已不满足于其在社交层面上的这点流量了，现在已经上升到要与操作系统分庭抗礼了。在未来，这个昔日免费的社交应用也将成为集社交、游戏、购物、生活服务于一身的“超级App”，从而进一步影响我们的生活，具体影响包括以下几个方面。（1） 对于开发者的影响。微信小程序推出后，开发者也许会发现，微信小程序的语法和前端语法没什么区别，目前来看，对前端开发者来说，从网页迁移到微信小程序成本很低。可见在将来，各行各业对小程序的需求会让前端开发人员迅速增长，而对于只会原生App的开发人员，就会增加一些压力了。（2） 对于互联网创业企业的影响。近年来，原生APP的开发和推广成本日益增高，从而造成创业企业早期用户积累的成本也越来越高。而通过微信小程序开发，依托于微信本身数亿的用户量，可以以更低的成本来完成早期用户的积累。在开发App之前，可以先用微信小程序开发，这样可以以更快、成本更低的方式进行试错和更新。（3） 对于小城市企业的影响。一直以来，小城市缺乏技术人员的问题难以解决，微信小程序出现后，这个问题就可以尝试解决了。小城市的企业培养一个前端技术开发人员远比培养一个后端开发人员、架构师、APP开发人员要容易得多，而且成本也降低了很多。（4） 对于互联网推广的影响。笔者记得在某贷宝盛行的时期，经常可以看到这样的场景：在一些超市的门口摆放着一张桌子，桌子上摆放了一堆礼品，旁边立着一个易拉宝，两个地推人员在宣传，让用户下载App即可送礼物。对于做市场和地推的朋友，这种场景可能并不陌生，这是线下推广时使用的老手段。而有了微信小程序后再去做地推时，只需要携带海报、宣传册等工具即可，这样成本会少很多。（5） 对于想转型的传统企业的影响。现在，各行各业都在互联网化，传统企业大批转型为互联网模式，所以眼下传统企业面临的问题就是技术不成熟、成本高。而微信小程序能为传统企业降低成本，为传统企业转型铺平道路，给传统企业试错和迭代更新的机会。传统企业通过这种模式把线上、线下和用户群体融合后，再考虑是否需要组建一支全方位的互联网团队。
上面介绍的是微信小程序对未来的一些影响，可能读者还是不能理解。其实微信小程序在很多场景中都可以应用，比如在餐馆点餐、在医院挂号、叫出租车、办理会员卡等。下面以在医院挂号场景来举例。在将来，我们在家里或者在医院可以使用微信小程序在线查询自己需要挂号的科室，并直接在线付款。付款成功后会生成二维码，在医院指定的机器前即可扫描手机二维码，自动打印挂号条，这样大大节约了患者等待排队的时间。如果能全面打通医院系统，以后我们甚至可以在医生开完药以后在线直接付款，再也不用排队了。所以微信小程序在未来的前景、影响难以估计，笔者认为，虽然微信小程序来得有些晚，改变不了过去已经饱和的移动互联网市场，但是足以影响移动互联网的未来。1.3 微信小程序与订阅号、服务号的区别
微信的订阅号、服务号和微信小程序都属于微信生态下的产品，所以很多人将它们进行比较，那么到底它们之间到底有什么区别呢？
首先来看一下微信的订阅号和服务号的区别：订阅号主要的功能是帮助企业或个人在微信中向用户传达资讯消息，为企业或个人提供一种新的信息传播方式。服务号可以帮助企业和组织在微信中向用户提供服务，为企业和组织提供了更强大的业务服务与用户管理能力，同时还提供了让用户直接与企业的客服进行沟通等功能。
综上所述，我们大致能看出，订阅号和服务号都是以微信的主体聊天界面为基础，所以它们的界面和功能早就约定好了规则。而微信小程序允许开发者自定义界面，还可以根据开发者的产品需求自定义功能，从而打破了订阅号和服务号一成不变的规则。
订阅号与服务号作为腾讯线上对线上模式的重要组成部分，我们已经感受到了其对我们生活的影响。低成本的推广模式配合微信庞大的用户群，使订阅号与服务号成为中小企业和个人商户的首选。微信小程序同样继承了微信的用户广、成本低的优势，但是其更主要的作用是打开线上对线下的大门，让人们在日常生活中经常接触的东西通过一种非常简易的模式在互联网上连接起来，达到更便捷的目的，这也是物联网发展的体现。微信小程序在上线之初并没有像订阅号与服务号那样迅速被大家所接受，但我们也能看到像摩拜单车这种非常适合微信小程序的公司通过与微信团队合作，利用微信小程序更好地为老百姓提供服务。相信随着物联网精神的普及以及腾讯对微信小程序的推广，微信小程序一定会创造出独特的未来。1.4 如何创建一个微信小程序
学习任何一门语言都是从最基本的“Hello World”开始的，所以，在学习微信小程序开发之前，我们先来创建一个自己的小程序。同时，微信公众平台为我们提供了微信小程序接入指南（https：//mp.weixin.qq.com/debug/wxadoc/introduction/index.html？t=2017117），其中列出了以下几项：（1） 产品定位及功能介绍（2） 微信小程序注册（3） 微信小程序信息完善及开发前准备（4） 开发者工具的使用（5） 代码审核与发布（6） 微信小程序申请微信认证（7） 微信小程序申请微信支付（8） 微信小程序绑定微信开放平台账号
以上操作在本书中会进行简单的介绍，下面主要介绍如何注册成为开发者和安装工具。1.4.1 成为微信小程序开发者
我们可以通过微信公众平台里的微信小程序入口（https：//mp.weixin.qq.com/cgi-bin/wx）来注册成为微信小程序开发者，注册页面如图1-1所示。图1-1 小程序注册页面
填写完邮箱、密码等信息后，单击“注册”按钮，激活邮箱，如图1-2所示。图1-2 激活邮箱页面
最后登记用户信息，如图1-3所示，但是微信公众平台为了真实性和安全性，目前只针对企业用户开放注册（2017年3月27日微信公众平台发布消息称，开放对个人开发者申请微信小程序的权限）。图1-3 登记用户信息页面
完成注册后，可以登录微信公众平台https：//mp.weixin.qq.com完善微信小程序信息，并且可以通过“用户身份”页面，为普通用户绑定项目开发者身份（注：已认证的账号最多可绑定20名开发者，未认证的账号最多可绑定10名开发者），如图1-4所示。图1-4 用户绑定页面1.4.2 安装开发者编辑器
要开发微信小程序，需要用到“微信Web开发者工具”，通过以下方式可以找到工具的下载地址：（1） 打开微信公众平台“https：//mp.weixin.qq.com”。（2） 将鼠标光标移至“小程序”选项上，单击“开发”按钮。（3） 单击顶部导航栏的“工具”按钮，在新页面的左侧栏中找到“下载”按钮。
也可以通过地址https：//mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html直接下载编辑器，微信官方提供了Windows 64、Windows 32、MAC 3个版本的编辑器，可以根据自己的电脑选择适合的开发工具并进行下载。
下载并安装完成后，运行编辑器即可。启动编辑器后，需要开发者使用微信扫描二维码验证登录，如图1-5所示。图1-5 开发者工具登录页面1.5 运行一个微信小程序
登录成功后，会出现如图1-6所示的页面，在这里选择调试类型：可以选择本地微信小程序项目或公众号网页开发。这里选择“本地小程序项目”，然后添加AppID、项目名称和项目目录，如图1-7所示（要获取AppID，可以登录https：//mp.weixin.qq.com，在网站的“设置”—“开发设置”页面中，可以查看到微信小程序的AppID，如图1-8所示）。图1-6 选择调试类型页面图1-7 添加项目页面图1-8 在“开发设置”页面中查看AppID
勾选“在当前目录中创建quick start项目”选项，会自动生成一个简单的微信小程序结构，不勾选此选项的话，则打开空白文件夹。如果是刚开始学习微信小程序，则建议勾选此选项，在此基础上编写小程序。
全部填写完成后，单击“添加项目”按钮，会自动跳转到编辑器的主页面，如图1-9所示。图1-9 编辑器页面1.6 本章小结
本章主要介绍了微信小程序的简史，以及发展前景，而且简单地讲解了微信小程序开发的前期准备工作和工作软件的安装与运行，后面会详细介绍微信小程序的组件、API、布局方式、丰富的案例，以及在开发中可能遇到的关于JavaScript和CSS的语法等。2体验微信小程序
第1章简单地介绍了一下微信小程序，同时也讲解了创建并运行一个微信小程序的案例。本章会详细介绍微信小程序工具以及微信小程序结构，包括微信小程序工具操作、目录结构、常用快捷键等。2.1 界面与操作
微信小程序开发工具的功能非常强大和便捷，其工具内部集成了代码编辑、开发调试及程序发布等功能，微信小程序开发工具界面如图2-1所示。
微信小程序开发工具界面基本划分为四大区域：顶部菜单区域、导航菜单区域、目录文件&模拟运行区域、编辑&调试开发区域。顶部菜单区域和导航菜单区域是固定的，目录文件&模拟运行区域和编辑&调试开发区域会根据选择导航菜单的不同功能而有所不同。
顶部菜单区域在开发小程序的过程中使用的机会并不多，其中“设置”页面用于配置开发模拟器运行程序时连接的网络代理（见图2-2）。“动作”页面用于刷新、后退、前进等操作。“帮助”页面用于显示开发工具的版本和版权声明等信息。导航菜单区域是开发者经常使用的功能区域。特别是其中的编辑和调试的功能对开发者来说是非常重要的功能。下面重点介绍这两个功能。图2-1 开发工具主界面图2-2 设置页面2.2 编辑功能
编辑区分为两个部分，在右侧的编辑区域可以对当前项目进行编写、文件添加和删除以及重命名等基本操作。在左侧的模拟器区域可以实时预览编辑的情况，如图2-3所示。编辑器同时也提供了比较完善的自动补全和自动保存功能，编写代码后，工具会自动帮助用户保存当前代码为编辑状态，如果直接关闭工具或者切换项目，也不会丢失当前代码的编辑状态。但是要注意，处于编辑状态的代码只保存到工具内部，并没有写到硬盘上，只有手动保存文件后，修改的内容才会写到硬盘上，并触发实时预览。图2-3 编辑区页面2.3 调试功能
调试工具分为七大功能模块：Console、Sources、Network、Storage、AppData、Wxml和Sensor，如图2-4所示。图2-4 调试工具选择区（1） Console选项卡有以下两大功能。
① 开发人员可以在此输入和调试代码，如图2-5所示。图2-5 Console页面调试
②小程序的错误提示输出会显示在此处，如图2-6所示。图2-6 Console页面输出错误提示（2） Sources选项卡主要的功能是显示当前项目的脚本文件。同浏览器开发不同，微信小程序框架会对脚本文件进行编译，所以在Sources选项卡中，开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用，如图2-7所示。图2-7 Sources页面（3） Network选项卡的主要功能是观察和显示request和socket的请求情况，如图2-8所示。图2-8 Network页面（4） Storage选项卡用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况，如图2-9所示。图2-9 Storage页面（5） AppData选项卡的主要功能是显示当前项目在当前时刻AppData的具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上，如图2-10所示。图2-10 AppData页面（6） Wxml选项卡的主要功能是帮助开发者开发WXML转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改对应的wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的WXML代码，如图2-11所示。图2-11 Wxml页面（7） Sensor选项卡有两大功能。
① 开发人员可以在这里选择模拟地理位置，如图2-12所示。图2-12 设置模拟地理位置
② 开发人员可以在这里模拟移动设备表现，用于调试重力感应API，如图2-13图2-13 调试模拟器重力感应2.4 项目功能
编辑器项目选项卡主要用于显示和设置项目的信息，其中显示的信息包括图标、AppID、本地开发目录、最新更新时间、最近上传时间以及代码包大小，如图2-14所示。· 预览：指上传源码到微信服务器并成功后会生成一个二维码，开发者用最新版本的微信扫描二维码后，即可在手机上体验到最新的效果。图2-14 项目设置页面
· 上传：指上传源码到微信服务器后，开发者可以在微信管理后台看到本地提交情况，此功能只限于管理员微信号操作。
· 开启ES6转ES5：在微信0.10.101000以及之后版本的开发工具中，会默认使用babel将开发者代码中的ES6语法转换为三端都能很好支持的ES5代码，帮助开发者解决因环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。
· 开启上传代码时样式文件自动补全：开启此功能后，开发工具会自动检测并补全缺失样式。
· 开启代码压缩上传：开启此功能后，会在上传代码时帮助开发者压缩代码，减小代码包的体积。
· 监听文件变化，自动刷新开发者工具：开启此功能后和当前项目相关文件改变时，会自动帮助开发者刷新模拟器。
· 开发环境不校验请求域名及TLS版本：开启此功能后，开发工具在开发环境中将不会校验安全域名和TLS版本。2.5 常用快捷键
为了提高开发效率，微信小程序的编辑器中设置了很多快捷键供开发者使用，下面介绍一些常用的快捷键的功能，如表2-1所示。表2-12.6 项目的目录与文件结构
在创建小程序项目时，小程序开发工具会默认生成一些文件，这些文件就是小程序的基本结构。除此之外，在开发过程中，可以根据产品需求自定义小程序的目录和文件，本章会简单介绍一下微信小程序的结构。
项目目录
微信小程序的主体部分由三个文件组成，这些文件必须放到项目的根目录下，如表2-2所示。表2-2
微信小程序页面主要有四种文件类型，如表2-3所示。
表2-3
文件结构
app.json文件是微信框架的配置文件，可以在里面对微信小程序进行全局配置，如窗口背景色、导航条样式、默认标题等。
app.js文件是脚本文件，可以在这个文件中监听处理小程序的生命周期和声明全局变量等，微信小程序提供了丰富的API，详细的API介绍请参考第8章内容。
试读结束[说明：试读内容隐藏了图片]