微信小程序开发快速入门.pdf

CMYCMMYCYCMYK微信小程序开发快速入门-定稿-扉页.pdf 1 2017/4/18 10:41:41 内 容 简 介 本书全面系统地讲解了微信小程序入门知识。开篇讲解了小程序的特点与开发逻辑，以及如何申请和创建一个小程序项目与环境搭建，接着通过多个小程序实例来全面体验和讲解开发框架、实现过程及主要代码框架等，然后介绍小程序组件、开发方式、网络、缓存、位置和界面交互，以及开发过程与组件的应用技巧、各个微信原生 API 接口小程序开发的技巧等。每章具有多个小程序实战案例，让读者快速掌握该章所讲的知识，并实践小程序各项功能的应用及使用技巧。本书结构清晰，由浅入深，可帮助读者快速掌握小程序的开发。适合于各种前端开发者，以及各种 APP 设计、开发和自学者。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 微信小程序开发快速入门/黄曦，沙拉依丁苏里坦著.北京：电子工业出版社，2017.6 ISBN 978-7-121-31331-8.微.黄 沙.移动终端应用程序程序设计.TN929.53 中国版本图书馆 CIP 数据核字（2017）第 076300 号 策划编辑：刘 伟 责任编辑：刘 伟 印 刷：北京季蜂印刷有限公司 装 订：北京季蜂印刷有限公司 出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编：100036 开 本：7201000 1/16 印张：18.5 字数：355 千字 版 次：2017 年 6 月第 1 版 印 次：2017 年 6 月第 1 次印刷 定 价：59.80 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至 ，盗版侵权举报请发邮件至。本书咨询联系方式：010-51260888-819，。前言 为什么写本书 2017 年 1 月 9 日，小程序如期发布，给本就异常火爆的前端领域又注入了一股新的力量，甚至很多公司已经开始招聘小程序开发者，其应用也呈现出蓬勃发展的趋势。然而开发人员中也出现了一些不同的声音，有人认为它的出现又为前端领域增加了负担，因为与现有的 Web 标准不同，它需要前端开发者开发了应用后，再去适配另一个小程序环境，以此来批评微信不拥抱标准，自立门户，不够开放。实际上在我们看来，小程序并没有为前端人员增加负担，反而为前端开发者创造了新的价值。因为小程序是更接近原生 APP 的一个新的开发框架，不符合HTML5 标准，在这个意义上，它实际上是为开发者提供了新的开发渠道，虽然小程序并未提供类似 APP 的应用商城为开发者带来应用分发的经济效益，但小程序本身内置提供支付功能的 API，便于更快更方便地开发出既为用户带来价值又能为开发者或企业带来收益的小程序应用，这本身对开发者和企业而言，有足够的想象和拓展空间。另外，小程序虽然不符合现有的 HTML5 标准，但是依然沿用了 JavaScript、CSS 以及 HTML 的语法基础，其 JavaScript 甚至支持 ES6 语法，并且小程序在这些基础上做了不少的扩充，并引入了新的 MINA 框架，开发者需要采用该框架进行开发，但其上手难度对于较为熟练的前端开发人员来说，门槛非常低。而与“增加了前端人员负担”的观点相反，无论是在安卓、iOS 平台，还是平台下不同屏幕大小的手机，微信都通过小程序框架，为小程序提供了一致的呈现效果，在这一点上，反而彻底将前端开发人员从机型适配的苦海中解脱了出来。微信小程序开发快速入门 IV 而且对于小程序开发，微信提供了完整的开发编译环境，在这个层面上，也为前端人员节省了大量的环境架构工作量，使用微信开发者工具，可以立即着手开发小程序。目前常用的小程序已超 150 个，基本涵盖了生活中的大部分场景，且数量还在快速增加中。其带来的价值正在悄然中迅猛到来，已经成为前端开发人员必须掌握并提高自身价值的新技能。如果说 2016 年没有掌握 Node.js 开发的前端人员会失去竞争力的话，那么2017 年，没有熟练掌握微信小程序开发的前端人员，在前端开发人员队伍中，也一样会缺少竞争力。本书特色与内容架构 循序渐进、由浅入深 作为一本开发者使用的学习参考书，本书讲解知识点时，遵从循序渐进的原则，将所有需要掌握的知识点做了系统化的组织和编排，每讲述一个知识点，均有相应的内容和案例解说，让读者在每一章节中都体会到自己的成长。本书参考了官方文档的知识结构，为了使读者尽快入门，按照由浅入深的原则对章节进行了重新编排，帮助读者快速上手。案例生动翔实，图示丰富 本书大部分案例都只针对相应的知识点，在完整介绍知识点的前提下尽可能精简内容和代码，读者阅读实例会感觉到非常轻松，学习知识点的时候，没有多余知识点分散精力，集中掌握小程序开发的目标，降低学习成本和理解的难度。另外，在讲解知识点时，对不容易理解的地方书中使用了丰富的图表来展示，必要时用编号、标记等清楚地标记了操作的顺序和重点，让读者把更多的精力放在开发和实践中。语言朴实，风趣幽默 虽然是一本讲解编程方面的图书，但本书并没有采用教科书式的刻板语言，前言 V 而是尽可能用通俗的语言，风趣地解读其中的内容，力保读者在轻松、愉悦的环境中完成学习。适用读者和致谢 本书写作的目的是为了让所有对小程序感兴趣的人可以快速上手。技术人员可以通过本书的技术开发章节快速了解小程序的开发以及调试方法；创业者或产品经理可以从本书中迅速了解小程序的适用性以及优势；运营人员可以迅速入门掌握运营规范以及应该避免的问题。读者可以根据需要选择不同的章节进行阅读参考。由于小程序更新频繁，本书中所介绍的开发接口以及工具版本可能并不是当前的最新版，在一些细节上与最新版本的小程序可能会有些不同，读者在具体动手开发时需要以官方的当前版本为准。本书主要由沙拉依丁苏里坦与黄曦创作，写作过程中得到了轻课 CEO 肖逸群的大力支持和鼓励，还有唐敬之、郑祝萍、顾立人、王启元、米昱杰、何川、刑菁、王超群和刘剑等人参与了编辑整理工作，以及轻课提供的平台与资源，在此表示由衷的感谢。并感谢家人、朋友们以及同事们一直给予的帮助和鼓励。写作过程中难免有所纰漏，欢迎读者批评指正，并提出宝贵建议。黄曦 沙拉依丁苏里坦 2017 年 3 月 轻松注册成为博文视点社区用户（），扫码直达本书页面。提交勘误：提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。与作者交流：与作者交流：在页面下方【读者评论】处留下您的疑问或观点，与作者和其他读者一同学习交流。页面入口：http:/ 目录 第 1 章 小程序特点与开发逻辑.1 1.1 互联网正在变得越来越“轻”.1 1.2 什么是小程序.5 1.2.1 小程序的由来.5 1.2.2 小程序的发展与展望.6 1.3 你的产品适合做小程序吗.9 1.4 小程序特色：即用即走.12 1.5 小程序与订阅号、服务号的异同.13 1.6 消息推送与传播分享.16 1.7 普通用户怎么玩转小程序.16 1.7.1 普通用户启动小程序方法.16 1.7.2 普通用户在小程序里面能做什么.17 第 2 章 微信小程序开发申请入门与环境搭建.18 2.1 小程序申请方法以及流程.18 2.2 小程序开发环境搭建.20 第 3 章 初识微信小程序：小程序的 Hello World.24 3.1 小程序 MINA 框架介绍.24 3.2 小程序基本结构.26 3.3 微信 Web 开发者工具使用方法介绍.35 3.4 手把手教你做 DemoHello World 小程序.39 3.4.1 Demo 的简要开发步骤.39 目录 VII 3.4.2 验证小程序可执行目录结构.42 3.4.3 数据与事件的绑定.44 3.5 本章要点总结.47 第 4 章 微信小程序入门：小程序的开发方式.48 4.1 WXML 及其数据绑定.48 4.2 WXSS小程序的 CSS 样式.57 4.2.1 新的尺寸单位 rpx.57 4.2.2 样式导入.58 4.2.3 内联样式.59 4.2.4 选择器.59 4.3 事件.60 4.4 视图容器.63 4.4.1 view 视图容器.64 4.4.2 scroll-view 可滚动视图区域.64 4.4.3 swiper 滑块视图容器.70 4.5 基础内容.75 4.5.1 图标组件 icon.75 4.5.2 文本组件 text.77 4.5.3 进度条组件 progress.78 4.6 导航.81 4.7 手把手教你做 Demo简易通讯录.84 4.8 本章要点总结.93 第 5 章 小程序开发实战：全面掌握小程序组件.95 5.1 表单组件.95 5.1.1 按钮组件 button.95 5.1.2 标签组件 label.98 5.1.3 多项选择器组件 checkbox.102 5.1.4 单项选择器组件 radio.106 5.1.5 滚动选择器组件 picker.107 5.1.6 滑动选择器组件 slider.115 微信小程序开发快速入门 VIII 5.1.7 开关选择器组件 switch.117 5.1.8 输入框组件 input.123 5.1.9 多行输入框组件 textarea.129 5.1.10 表单组件 form.131 5.2 媒体组件.136 5.2.1 音频组件 audio.136 5.2.2 视频组件 video.140 5.2.3 图片组件 image.147 5.3 地图组件 map.151 5.4 画布组件 canvas.155 5.5 手把手教你做 Demo用表单完善通讯录.156 5.6 本章要点总结.158 第 6 章 小程序 API（1）：网络、媒体和缓存.159 6.1 小程序接口规范.159 6.2 网络.160 6.2.1 发起请求.160 6.2.2 上传、下载.163 6.2.3 websocket.166 6.3 媒体.170 6.3.1 图片.170 6.3.2 视频.176 6.3.3 录音.178 6.3.4 音频播放控制.179 6.3.5 音乐播放控制.180 6.3.6 音频组件控制.185 6.3.7 视频组件控制.186 6.3.8 文件.187 6.4 数据缓存.191 6.4.1 wx.setStorage(OBJECT).192 6.4.2 wx.setStorageSync(KEY,DATA).193 目录 IX 6.4.3 wx.getStorage(OBJECT).194 6.4.4 wx.getStorageSync(KEY).195 6.4.5 wx.getStorageInfo(OBJECT).195 6.4.6 wx.getStorageSync(KEY).196 6.4.7 wx.removeStorage(OBJECT).197 6.4.8 wx.removeStorageSync(KEY).198 6.4.9 wx.clearStorage().198 6.4.10 wx.clearStorageSync().198 6.5 手把手教你做 DemoWebsocket 从服务端到小程序.199 6.5.1 安装 Node.js 环境.199 6.5.2 新建 app.js 文件响应请求.201 6.5.3 编写小程序.205 6.5.4 发送 GET 请求.215 6.6 本章要点总结.217 第 7 章 小程序 API（2）：位置、设备与界面设计.219 7.1 位置.219 7.1.1 wx.getLocation(OBJECT)获取位置.219 7.1.2 wx.chooseLocation(OBJECT)打开地图选择位置.221 7.1.3 wx.openLocation(OBJECT)使用微信内置地图查看位置.2