作者：黑马程序员
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信小程序开发实战试读：
前言
微信小程序是目前非常热门的技术之一，它是一种轻量级的应用，用户只要在微信中“扫一扫”或“搜一搜”即可打开，非常简单方便，实现了各种应用“触手可及”的梦想。
为什么要学习本书
微信小程序开发本身并不难，微信官方也提供了大量的文档资料，相比国外的技术学习门槛要低很多。但是对于初学者来说，仅仅依靠官方文档自学是不够的，因为实际的需求往往十分复杂，关键是如何找到合适的思路和解决方案，这就需要积累大量的案例实践经验，才能高效完成开发工作。本书比照开发中常用的一些功能选取教学案例，希望通过这些案例帮助初学者快速入门。这些内容一方面可以帮助读者提高学习兴趣，另一方面可以帮助读者学到实用的技术。考虑到企业应用中的需求，本书也加入了微信小程序常用框架知识的讲解和一个综合实战项目，帮助读者开阔视野，了解实际开发中的各种问题和解决方案，掌握解决实际问题的能力。
本书的主要内容和使用方法
本书一共分为8章，具体如下。
第1章讲解什么是微信小程序，微信小程序的优点和开发价值，并详细介绍微信开发者工具的安装与使用，以及微信小程序项目上线和发布的流程。
第2章通过“比较数字大小”“调查问卷”和“计算器”这3个案例，对小程序的文件结构、页面逻辑、数据绑定和页面渲染进行详细讲解。
第3章讲解“音乐”小程序项目，本项目主要围绕小程序常用组件和API进行讲解，页面结构主要使用flex布局和页面渲染的方式来实现。
第4章讲解“婚礼邀请函”小程序项目，该项目主要围绕小程序组件进行讲解，包括video视频组件、map地图组件等常用组件，其中视频播放可以使用视频组件或腾讯视频插件来实现。
第5～6章讲解小程序中多种API的用法，其中第5章讲解获取用户信息、选择收货地址、拨打电话、路由跳转、图片选择、使用腾讯地图插件实现定位等API，第6章讲解canvas（画布）、animation（动画）、语音播放与录制、上传文件、下载文件等。学习完这两章后，读者能够掌握这些API的使用场景，并结合所学知识完成项目业务功能的开发。
第7章讲解微信小程序原生框架的细节和第三方框架的使用，通过案例初步体验 WePY 框架、mpvue框架和WeUI库的作用和优势。
第8章讲解“点餐系统”小程序项目，该项目是对本书中所有知识的综合运用。在项目开发中，利用小程序的组件完成项目界面的布局，并且还讲解了与服务器端的交互操作，以及网络请求的封装与调用。
在学习的过程中难免遇到困难和不解，建议读者不要纠结于某个细节，可以先跳过问题往后学习。通常来讲，通过不断深入学习，前面不懂和疑惑的地方慢慢也就能够理解了。在学习编程语言的过程中，一定要多动手实践，如果在实践的过程中遇到问题，建议多思考，认真分析问题发生的原因，并在问题解决后总结经验。
致谢
本书的编写和整理工作由传智播客教育科技股份有限公司完成，主要参与人员有吕春林、韩冬、豆翻、张瑞丹等，全体人员在近一年的编写过程中付出了很多辛勤的汗水，在此对他们表示衷心的感谢。
意见反馈
尽管我们付出了很大的努力，但书中难免会有不妥之处，欢迎各界专家和读者朋友们来信给予宝贵意见，我们将不胜感激。电子邮箱：itcast_book@vip.sina.com。黑马程序员2018年11月于北京第1章 微信小程序入门
微信小程序于2017年1月9日正式上线后，受到了广大用户的关注，其较低的开发成本和微信庞大用户量的优势为许多商家提供了商机。为了让读者对微信小程序有一个整体的认识，本章将会介绍微信小程序的基本概念和特性，并针对开发环境的搭建和开发者工具的使用进行详细讲解。【教学导航】1.1 初识微信小程序1.1.1 什么是微信小程序
微信小程序是一种不需要安装即可使用的应用，用户只要“扫一扫”或“搜一搜”即可打开应用，无须安装或卸载。微信小程序运行于微信之上，它的交互类似于手机原生应用，但是每个应用的体积非常小（目前上限是2048KB），具有无须安装、触手可及、用完即走、无须卸载的特点。微信小程序与原生应用的关系如图1-1所示。
从图1-1中可以看出，只要用户的手机中安装了微信，就可以使用微信小程序。这使得微信小程序可以跨平台（支持Android、iOS），并且和微信更紧密地结合，实现“扫一扫”或“搜一搜”就能获取小程序，使用微信账号一键登录等效果。图1-1 微信小程序与原生应用的关系
由于微信的产品定位，使它不仅仅是一个即时通信的工具，而是发展成了一个服务的平台，用户在微信中就能完成订票、打车、订餐等服务。在小程序出现之前，这些服务是通过公众平台中的服务号来完成的，但是由于服务号的功能薄弱，不能满足需求，所以小程序就诞生了。相比原生APP，微信小程序有着天然的优势，即微信的用户量非常大，是互联网的流量入口之一，微信小程序可以更快速地获取用户，并且能被附近用户搜索到，能结合公众平台来推广等。
微信小程序自推出以后就大受欢迎。根据微信公开课2018年7月公布的数据，小程序的上线数量已超过100万，开发者也增加到150万人，小程序的用户突破6亿，日活跃用户数量达到1.7亿，覆盖了教育、媒体、交通、房地产、旅游、电商、餐饮等多个领域。由于微信小程序操作简单、使用方便，一些热门的原生 APP 也发布了小程序版本，如京东购物、美团外卖、摩拜单车、链家租房等。
若要打开一个微信小程序，可以通过搜索关键词、扫描二维码、群分享、好友分享等途径来实现。例如，单击微信中的搜索按钮，输入关键词“美团外卖”，可以查找与其相关的公众号、小程序、文章等，如图1-2所示。
在搜索结果中找到“美团外卖”小程序，等待大约几秒的加载时间后，即可看到图1-3所示的小程序界面。图1-2 查找微信小程序图1-3 美团外卖小程序
微信小程序方便、快捷的特点，给用户的使用带来很大便利。另外，微信团队考虑到小程序的产品定位，对于小程序支持和不支持的功能进行了界定，如表1-1所示。表1-1 微信小程序的功能界定
值得一提的是，微信小程序可以开发游戏，即微信小游戏，它是微信小程序中的一个类目，使用相同的开发者工具来制作。由于小游戏和小程序的产品定位不同，微信公众平台对两者进行了区分。在发布小游戏时，需要额外提交一些相关资质文档。1.1.2 微信小程序的账号
微信自诞生以来，一直以开放的方式发展，它提供了微信公众平台，可以让企业、媒体、开发者加入到平台中，为微信用户提供资讯和服务。在微信公众平台中，提供了4种类型的账号，分别是服务号、订阅号、小程序和企业微信（原企业号）。打开微信公众平台网站https://mp.weixin.qq.com，可以查看这4种账号的说明，如图1-4所示。图1-4 微信公众平台的账号分类
在图1-4中，小程序是指在微信公众平台中发布小程序所使用的账号。此外，订阅号主要用于为用户传达资讯，类似报纸、杂志；服务号主要用于服务交互，类似银行、114，提供查询服务；企业微信主要用于公司内部通信使用，在关注企业号前要先验证身份。
与订阅号、服务号相比，小程序是一种全新的提供服务的平台，可以在微信内便捷地获取和传播，拥有出色的使用体验。通过表1-2可以对比它们的差异。表1-2 小程序与订阅号、服务号的区别1.1.3 微信小程序的特点
微信小程序是继原生APP、Web APP之后出现的一种新的APP形态。原生APP随着Android和iOS两大平台的迅速发展而逐渐变得强大起来，但由于两个平台的互不兼容，就需要开发两个版本，开发成本比较高。使用HTML5开发的Web APP很好地解决了跨平台的问题，但是性能和用户体验不佳。为此，微信小程序借鉴了现有的Web技术，通过独立的运行环境实现了跨平台，并提供了接近原生APP的使用体验，具有明显的优势。下面通过表1-3对比微信小程序与原生APP、Web APP的区别。表1-3 微信小程序与原生APP、Web APP的区别
为了降低微信小程序的开发成本，提高开发效率，微信小程序的开发方式与Web APP相似，即通过WXML（类似HTML）、WXSS（类似CSS）和JavaScript进行开发，可以使Web开发人员快速上手，并且提供了丰富的组件和接口，从而具有更接近原生 APP 的使用体验。微信小程序相比Web APP也存在一些缺点，它不支持HTML标签和DOM（文档对象模型）操作，对于 CSS 的支持也是受限的，一些成熟的前端库和框架（如jQuery、Vue.js）也无法使用。如果将Web APP修改成微信小程序，需要进行大量的改动。
由此可见，微信小程序适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。例如，偶尔点一次外卖、偶尔买一张车票或电影票、偶尔租赁一次自行车等。有了微信小程序，就不用专门下载、安装一个原生APP，使用更加快捷、方便。1.1.4 微信小程序的发展前景
微信出现之后，受到广大用户喜爱，目前已发展成为人们必不可少的聊天工具，依托于微信之上的小程序的使用也越来越普遍。微信小程序是有创意的、高效的、便捷的，随着功能的不断完善，用户对微信小程序的未来也充满了期待。下面对微信小程序未来的发展前景进行介绍。1.生态体系
微信小程序是一个生态体系，将来能够更好地借助于扩展插件进行微信小程序的开发，为微信小程序用户开放更多权限，未来所发挥的空间越来越大。微信小程序通过加大对开发者的支持，能够实现更多的功能。企业也会大量引入微信小程序业务，如滴滴打车、美团外卖、货拉拉等。2.开放能力
微信小程序在发展过程中不断完善自己，其开放能力越来越强，能够匹配多种用户和场景。进一步完善微信小程序的开放接口，方便开发者进行深度挖掘，微信小程序的配套服务将会不断完善，对发展起到推动作用。3.用户黏性
微信小程序现在积累了大量的用户，且用户黏性高，让其他行业与微信用户有更好的链接，与微信更好地结合。因此微信小程序的发展空间是无限的。
随着微信小程序用户量的发展，用户对产品的诉求的不断提高，用户对产品的改进意见越来越多，会帮助微信小程序的发展。所以微信小程序的未来发展空间是巨大的。
微信小程序的申请全面开放后，主题类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册微信小程序。未来小程序和微信之间将实现更佳的链接，用户获取小程序更加方便。1.2 开发环境搭建
为了帮助开发人员简单高效地开发微信小程序，微信团队提供了一套“微信开发者工具”，该工具集成了公众号网页调试和微信小程序两种开发模式。在进入微信小程序开发前，需要先注册微信公众号，并安装微信开发者工具。本节将针对微信小程序开发环境的搭建进行详细讲解。1.2.1 注册微信公众号
微信公众号主要用来区分每个开发者，以及小程序的发布、审核上线等。注册微信公众号的具体步骤如下。（1）使用浏览器打开微信公众平台网站https://mp.weixin.qq.com，单击“立即注册”链接，如图1-5所示。图1-5 微信公众平台网站（2）根据页面中的提示，选择注册的账号类型，如图1-6所示。（3）在图1-6中单击“小程序”，就可以开始进行账号注册了。根据页面中的提示完成账号注册，然后登录账号，会进入到图1-7所示的页面中。该页面是小程序管理后台，提供了针对小程序的开发、发布、管理和统计等一系列的功能。（4）从图1-7中可以看出，小程序的发布流程共有两个步骤，第1步需要填写小程序的基本信息，下载小程序开发工具，进行小程序的开发；开发完成后，第2步提交代码，等待审核，通过后即可将小程序发布。在“设置”-“开发设置”中查看AppID，如图1-8所示。图1-6 选择账号类型图1-7 小程序发布流程图1-8 查看AppID
在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识。每个小程序账号只有一个AppID，因此每个账号只能发布一个小程序。如果需要发布多个小程序，需要注册多个小程序账号。1.2.2 安装微信开发者工具
在微信公众平台网站中找到微信开发者工具的下载地址，如图1-9所示。图1-9 微信开发者工具
从图1-9中可以看出，微信开发者工具支持Windows和Mac OS操作系统，读者根据自己的环境选择合适的版本下载即可。
下面以Windows 7操作系统为例，演示开发者工具的安装和使用，具体步骤如下。（1）双击下载后的安装包，安装程序打开后，会看到图1-10所示的安装向导。图1-10 安装向导小提示
在图1-10中，安装向导显示的工具名称为“微信Web开发者工具”，而安装完成后，该工具显示的名称为“微信开发者工具”。目前这两处命名不一致的问题还没有解决，本书选择使用“微信开发者工具”作为该工具的名称。（2）单击“下一步”按钮，阅读授权协议，如图1-11所示。（3）单击“我接受”按钮，然后选择安装路径，如图1-12所示。（4）单击“安装”按钮，即可开始安装。安装成功后，会在桌面创建快捷方式，双击快捷方式图标即可打开微信开发者工具。图1-11 许可协议图1-12 选择安装路径1.3 小程序的开发体验
在使用微信开发者工具时，需要先创建一个项目。为了方便开发，开发者工具提供了两种模板，分别是“普通快速启动模板”和“插件快速启动模板”，前者用于开发小程序，后者用于开发小程序的插件。对于初学者来说，使用“普通快速启动模板”创建小程序，可以获得一些示例代码，从而了解一个简单的小程序的代码组成。本节演示如何在微信开发者工具中基于“普通快速启动模板”创建一个Hello World小程序。1.3.1 创建项目
首次打开微信开发者工具时，会出现一个登录页，提示使用微信扫码登录。登录成功后，会看到图1-13所示的启动页，提示选择开发模式。
单击“小程序项目”，就可以创建一个新的小程序项目，如图1-14所示。图1-13 启动页图1-14 创建小程序项目
根据页面提示进行小程序项目的创建，选择一个在本地创建的空目录作为“项目目录”，如D:\wxapp\hello。在1.2.1小节注册微信小程序账号时获得了AppID，将其填入此处即可。“项目名称”可以随意填写，如Hello World。填写完成后，选中“建立普通快速启动模板”左边的复选框，然后单击“确定”按钮即可。1.3.2 开发者工具的使用
小程序项目创建成功后，会进入开发调试环境中，如图1-15所示。图1-15 小程序开发调试环境
从图1-15中可以看出，微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、编辑器和调试器组成。接下来对这些功能分别进行讲解。1.菜单栏
通过菜单栏可以访问微信开发者工具的大部分功能，常用的菜单如下。
• 项目：用于新建项目，或打开一个现有的项目。
• 文件：用于新建文件、保存文件或关闭文件。
• 编辑：用于编辑代码，对代码进行格式化。
• 工具：用于访问一些辅助工具，如自动化测试、代码仓库等。
• 界面：用于控制界面中各部分的显示和隐藏。
• 设置：用于对外观、快捷键、编辑器等进行设置。
• 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。2.工具栏
工具栏提供了一些常用功能的快捷按钮，具体解释如下。
• 个人中心：位于工具栏最左侧的第1个按钮，显示当前登录用户的用户名、头像。
• 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。
• 云开发：开发者可以使用云开发来开发小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库2.2.3开始支持。
• 模式切换下拉菜单：用于在小程序模式、搜索动态页和插件模式之间进行切换。
• 编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译模式。
• 编译：编写小程序的代码后，需要编译才能运行。默认情况下，直接按 Ctrl+S 快捷键保存代码文件，微信开发者工具就会自动编译运行。若要手动编译，则单击“编译”按钮即可。
• 预览：单击“预览”按钮会生成一个二维码，使用手机中的微信扫描二维码，即可在微信中预览小程序的实际运行效果。
• 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。
• 切后台：用于模拟小程序在手机中切后台的效果。
• 清缓存：用于清除数据缓存、文件缓存等。
• 上传：用于将代码上传到小程序管理后台，可以在“开发管理”中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的 AppID 为测试号，则不会显示“上传”按钮。
• 版本管理：用于通过 Git 对小程序进行版本管理。3.模拟器
模拟器用于模拟手机环境，查看不同型号手机的运行效果，如图1-16所示。图1-16 模拟器
在图1-16中，上方的iPhone 5表示手机型号，单击可以切换成其他手机。由于不同手机屏幕的 CSS 像素不同，宽高比也不同，在开发小程序时应对常见的手机屏幕进行适配。75%表示缩放百分比，可以调节预览画面的大小。WiFi表示网络环境，还可以切换成2G、3G、4G 或Offline（离线），不同环境的网速不同，从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为pages/index/index。4.编辑器
编辑器分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件，就可以在右栏中对该文件进行编辑。5.调试器
调试器类似于Google Chrome浏览器中的开发者工具。下面对调试器中的各个面板的功能进行简要介绍。
• Console:“控制台”面板，用于输出调试信息，也可以直接编写代码执行。
• Sources:“源代码”面板，可以查看或编辑源代码，并支持代码调试。
• Network:“网络”面板，用于记录网络请求信息，根据它可进行网络性能优化。
• Security:“安全”面板，用于调试页面的安全和认证等信息，如HTTPS。
• AppData:“App数据”面板，可以查看或编辑当前小程序运行时的数据。
• Audits:“审计”面板，用于对小程序进行体验评分。
• Sensor:“传感器”面板，用于模拟地理位置、重力感应。
• Storage:“存储”面板，用于查看和管理本地数据缓存。
• Trace:“跟踪”面板，用于真机调试时跟踪调试信息。
• Wxml:Wxml面板，用于查看和调试WXML和WXSS。
以上介绍的这些面板，在本书后面的章节中会进行更深入的讲解与实践，读者此时只要了解这些面板的基本作用即可。1.3.3 目录结构
Hello World小程序的目录结构如表1-4所示。表1-4 目录结构说明
在表1-4中，小程序一共有两个页面，分别是page/index（首页）和pages/logs（登录日志页）。首页就是之前在图1-16的模拟器中看到的页面，在该页面中单击“获取头像昵称”按钮，获取后会显示当前登录用户的微信头像，单击头像即可进入登录日志页，查看用户登录的历史记录，如图1-17所示。
在微信小程序中，每个页面由wxml、wxss、js和json文件组成，其中wxml和js文件必须存在，wxss和json文件可以省略。wxml和wxss文件类似于网页开发中的html和css文件，但是它们有所区别，具体会在后面进行讲解。
在了解了基本的目录结构后，下面通过图1-18演示这些页面之间的关系。图1-17 登录日志页图1-18 小程序的页面关系
对于有一定编程功底的读者，可以通过阅读代码来分析页面之间的关系。首先打开app.json文件，在文件中找到如下代码。1 {2 "pages":[3 "pages/index/index",4 "pages/logs/logs"5 ],6 ……
在上述代码中，第3～4行表示页面路径，例如，pages/index/index表示pages/index目录下的 index.*文件。由于一个页面由多个不同扩展名的文件组成，这里是把它们看成一个整体，因此无须加上扩展名。此处定义了两个页面，分别是index和logs，顺序排在前面的index将作为小程序打开后的初始页面。
接下来打开pages/index/index.wxml，查看小程序首页的结构，找到如下代码。1 2
在上述代码中，第6行的
在pages/index/index.js中找到bindViewTap事件处理函数的代码，具体如下。11 ……12 //事件处理函数13 bindViewTap: function() {14 wx.navigateTo({15 url: '../logs/logs'16 })17 },
在上述代码中，wx.navigateTo()方法用于跳转页面，从第15行代码可以看出，程序会跳转到logs页面，从而实现了单击头像跳转到登录日志页面的效果。
打开logs页面的逻辑文件pages/logs/logs.js，可以看到该页面引用了utils/util.js脚本文件，如下所示。这个脚本文件用于保存公共代码，从而在不同页面中引用。1 //logs.js2 const util = require('../../utils/util.js')3 ……1.3.4 项目设置
在微信开发者工具中，执行菜单栏中的“设置”-“项目设置”命令，可以对当前项目进行设置，如图1-19所示。
关于图1-19中的这些设置的具体含义如下。
• 项目设置：对当前项目进行设置。
• 域名信息：显示小程序的安全域名信息，合法域名可在管理后台进行设置。
• 调试基础库：选择基础库版本，用于在对应版本的微信客户端上运行。高版本的基础库无法兼容低版本的微信客户端。右边的79.45%表示该版本的用户占比。
• ES6转ES5：将JavaScript代码的ES6语法转换为ES5语法。图1-19 项目设置
• 上传代码时样式自动补全：自动检测并补全缺失样式。
• 上传代码时自动压缩：压缩代码，缩小代码体积。
• 使用npm模块：在小程序中使用npm安装第三方包。
• 启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令。
• 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书：在真实环境中会对这些信息进行校验。如果在开发环境中不进行校验，可以选中此项。1.3.5 快捷键
为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能，如 Ctrl+S 快捷键用于保存文件、Alt+Shift+F快捷键用于代码格式化等。常用的快捷键如表1-5所示。表1-5 快捷键说明1.4 团队开发与项目上线
在微信小程序开发的过程中，一个项目可能由多人共同完成。由于每个人的工作内容不同，因此需要对其进行权限管理。通过开发者权限来使用开发者工具完成小程序的开发，开发完成后通过开发管理来实现版本发布及上线。1.4.1 项目成员及权限1.人员的组织结构
小程序的开发团队一般由图1-20所示的人员组织结构组成。图1-20 项目成员组织结构
在图1-20中，项目管理人员负责统筹整个项目的进展和风险，把控小程序对外发布的节奏。小程序项目通过产品组、设计组、开发组、测试组之间的相互协调来完成。
开发小程序项目的一般工作流程如图1-21所示。图1-21 从提出需求到发布小程序的流程
在图1-21所示的开发流程中，由产品组提出需求，设计人员根据产品需求做出设计方案供开发人员使用，设计的主要内容包括流程和图形。开发组依据设计方案，进行程序代码的编写。代码编写完成后，对项目做最后的测试，由测试组编写测试用例并对小程序进行各种边界测试。2.权限管理
小程序管理后台允许开发团队中的不同身份的成员登录，通过权限控制来区分不同的用户身份，具体可以在“小程序管理后台”—“用户身份”—“成员管理”中查看。下面列举几个常见的权限，如表1-6所示。表1-6 权限控制
管理者可以很方便地分配这些权限给项目的各个成员，小程序的管理比传统的网页开发和APP应用开发更为简单便捷。开发团队的成员权限可以按照表1-7所示进行分配。表1-7 权限分配
试读结束[说明：试读内容隐藏了图片]