微信小程序是一种新的App替代品，其定位是在微信公众号的生态链中，使用微信本身作为应用平台，无须更新和下载，开箱即用。本书由浅入深、循序渐进，使零基础的读者能够熟练掌握使用微信开发小程序应用。


本书分为8章，第1~2章是关于小程序的应用场景和小程序本身的介绍，包括小程序涉及的技术和IDE开发环境的使用。第3章是HTML 5、CSS 3、JavaScript的语法介绍，然后引申出小程序使用的WXSS、WXML、JavaScript的相关语法。第4章是小程序开发组件的介绍，每个组件都配备了上手示例，帮助读者加深印象。第5章是一个完整的小程序项目的开发步骤。第6章是调用微信API的介绍，对常见API提供了示例编码和分析。第7章是一个完整的项目，包括前、后端，通过项目实战让读者上手真正的小程序开发。第8章是对小程序新API（蓝牙、卡券）等的补充。


本书内容精练、重点突出、实例丰富，是面向广大程序员的编程入门参考书，也是学习小程序开发入门的较佳实践，同时也非常适合大中专院校师生自学，从而掌握新技术，拓宽知识体系。

★从易到难、循序渐进，更轻松地掌握微信小程序开发的各种知识。
★广泛涉及、重点突出，更全面系统地学习小程序开发的各种方法。
★理论结合实践，更深入地理解小程序的控件和API的使用方法。
★案例讲解使用工程化思想，真正掌握小程序系统开发的精髓。

前 言
★对于商家来说：
App打开率越来越低！
App开发成本越来越高！
App部署难度越来越大！
App上线周期越来越长！


★对于用户来说：
手机存储空间越来越不够用！
App越来越用不着！
垃圾通知越来越多！
安全性越来越差！


★★这一切，用小程序都能解决！
微信小程序通过极低的开发成本，大量简化了相关的开发操作和应用信息获取，结合HTML 5和微信的API，几乎能开发出类似App的大多数功能！
迄今为止，已经有大量的应用接入微信小程序端，并迅速攫取了大量的用户，部分应用的使用体验甚至要高于应用本身App的体验。通过微信小程序提供的API，可以方便地实现对手机信息、照片信息及其他媒体信息的获取和操作，而其推送和使用微信账号的登录效果远远方便于原生应用使用第三方插件的体验效果。
对于初学者而言，这是一次技术革新的机会，你可能是开发小白，可能只是一个大学生，可能面对各种移动开发无从选择。本书帮你零基础走进微信小程序开发。作者结合自己多年的后端项目开发和培训经验写作了本书，全面地介绍了微信小程序开发基础、微信小程序通用API、HTML 5与WXML、CSS 3与WXSS、JavaScript等技术，并通过完整的实例介绍了微信小程序开发的步骤和基本架构。


★小程序能做什么
大多数内容发布类App都可以被小程序所代替，因为微信小程序是一种轻度的云端应用。目前来看，小程序主要应用范围如下：
目前已经有很多常用的App都开发出了自己的小程序（如下图所示），这样我们就不用再下载这些应用，直接在微信里打开或搜索这些小程序即可。 本书对读者的帮助本书是针对小程序开发的完全零基础入门读物，所以本书包括了小程序的基础、微信API的基础、网页开发（HTML 5 CSS 3 JavaScript）的基础，还有完整工程化的项目案例，本书的知识体系如下图所示：


★本书的特点
1．重点突出全书共分8章，采用从易到难、循序渐进的方式进行讲解。内容涉及了微信小程序从开发到实际项目实践的全过程。
2．涉及广泛由于程序是相对网页开发的一种技术，为了方便读者学习，本书首先让读者了解HTML、CSS、JavaScript等Web基础开发技术，并掌握小程序的开发环境和工具。读者在掌握开发环境和工具的基础上，逐渐学习微信小程序特有标签和API，掌握小程序的系统构建。读者可以边学习边实践，更快掌握微信小程序开发的各种知识。
3．重点实践书中每个API和控件都有练习实例，并且包含了完整的代码。例程都采用了分步骤实现方法，这样读者可以很清晰地知道每个技术的具体实现步骤，从而提高学习效率。
4．理论和实践相互结合由于小程序本身相关技术较多，即使读者理解其控件和API对于如何开发一个小程序可能也无从下手。本书通过传统讲解的方式并结合每一个实例，帮助读者解决这个问题。通过对具体项目的实践，读者可以对这几种技术及其相互结合有更深入的理解。
5．工程化思想本书对于案例的讲解，并非传统的只讲述代码部分，而是采用工程化的思路，从项目需求开始进行分析、系统设计、原型图设计，再到具体的编码部分。
本书采用一个从零开始的案例，对系统做整体分析，让读者先对小程序系统有整体把握，然后通过对开发过程以及知识点的详细讲解，使读者真正掌握系统开发的精髓。


★本书的内容安排本书一共8章，章节规划如下所示。
第1~2章是微信小程序的概述。讲述了微信小程序的基础，包括对于小程序的介绍和开发环境的搭建，以及第一个基础的小程序演示等。
第3章是Web开发基础知识。讲述了Web静态开发的HTML 5、CSS 3、JavaScript等知识，并且将其与微信WXSS、WXML做了相关的综述对比。
第4章和第6章是微信小程序标签与API。讲述了微信小程序开发中的WXML标签和微信小程序为开发者提供的API，并且对于每一个知识点进行了介绍和实例分析。
第5章和第7章是两个完整的项目实践。通过实践开发两个具有典型代表性的微信小程序应用程序，从零开始，并提供详细开发步骤，介绍了微信小程序应用程序的开发过程，通过对整个流程的介绍，既复习了前面学习的知识，也了解了项目实践的流程和技巧。
第8章补充了微信在2017年3月最新开发的一些API，包括蓝牙、卡券、收货地址等，由于微信开发对ES 6的支持，本章也简单介绍了ES 6语法的变化。
本书由浅入深，由理论到实践，尤其适合初级读者逐步学习和完善自己的知识结构。适合阅读本书的读者? 希望做微信小程序开发的人员。? Web网页开发人员。? 微信开发人员。? 微信公众号管理人员。? 想将原生App制作为微信小程序的人员。? 想降低App开发成本的初创企业。? 大中专院校的学生。致谢参与本书编写的还有谢郁、杨艳玲、赵毅峰、刘宁、刘海琛、刘轶、姜永艳、李玉莉、杨超、林江闽、薛淑英、赵东、陈宇、陈超，在此一并表示感谢。

★张帆
巨人网络（上海）公司网页开发工程师。喜欢在博客、GitHub和简书上持续分享各种开发技术和编程实例，有着丰富的项目经验，喜欢新兴技术和*开发方式，喜欢JavaScript系的React.js、vue.js等技术。精通网页后台开发、相关的项目管理精通网页后台开发、相关的项目管理等。
★陈思含
厦门卫星定位应用股份有限公司（厦门）开发工程师。从事于交通领域大数据的处理以及B/S相关系统的开发，精通Java领域的相关开发，精通JavaScript、CSS、HTML等小程序相关的技术，并且有长期开发以及运营微信公众号的经验。

1 微信小程序开发 1
1.1 初识微信小程序开发 1
1.1.1 什么是微信公众号 1
1.1.2 什么是微信小程序 3
1.1.3 微信小程序的应用领域 4
1.1.4 怎样学好微信小程序 5
1.1.5 微信小程序的前景 6
1.2 小程序开发需要的技术 8
1.2.1 JavaScript技术 8
1.2.2 CSS技术 9
1.2.3 HTML（XML）技术 10
1.3 小程序开发所使用的技术 11
1.3.1 开发文件结构 12
1.3.2 配置程序 12
1.3.3 逻辑层 16
1.3.4 WXML 20
1.3.5 WXSS 25
1.4 搭建小程序开发环境 27
1.4.1 IDE下载 27
1.4.2 Windows系统的IDE安装 29
1.5 上手实践：第一个Hello WX程序 31
1.6 小程序新能力 34
1.6.1 个人开发者申请小程序 35
1.6.2 小程序的基本信息管理 37
1.6.3 已有公众号绑定小程序 40
1.6.4 小程序的分享和跳转新模式 41
1.7 小结 43
1.8 实践与练习 43


2 熟悉小程序开发工具 44
2.1 熟悉微信开发者工具 44
2.1.1 微信开发IDE简介 44
2.1.2 IDE调试窗口 45
2.1.3 小程序的测试与重启 49
2.1.4 小程序的调试 50
2.1.5 小程序的控制台 53
2.1.6 IDE项目窗口 55
2.1.7 项目的关闭与新建 56
2.1.8 IDE项目编辑窗口 57
2.2 小结 59
2.3 实践与练习 59


3 小程序开发基础 60
3.1 HTML入门 60
3.1.1 HTML简介 60
3.1.2 HTML的用途与结构 61
3.2 HTML基础 62
3.2.1 HTML语法基础 62
3.2.2 HTML元素 63
3.2.3 HTML属性 77
3.2.4 WXML与HTML 78
3.3 CSS入门 79
3.4 CSS基础 79
3.4.1 CSS基础语法 80
3.4.2 CSS样式 82
3.4.3 CSS框模型 95
3.4.4 CSS定位 101
3.4.5 CSS与WXSS 106
3.5 JavaScript入门 106
3.5.1 JavaScript简介 106
3.5.2 JavaScript前景 107
3.6 JavaScript基础 108
3.6.1 JavaScript注释 108
3.6.2 JavaScript变量 108
3.6.3 JavaScript数据类型 112
3.6.4 JavaScript对象 118
3.6.5 JavaScript函数 122
3.6.6 JavaScript运算符 127
3.6.7 JavaScript逻辑控制语句 128
3.7 小结 142
3.8 实践与练习 143


4 小程序开发组件 144
4.1 视图组件 144
4.1.1 视图容器（view）组件 144
4.1.2 可滚动视图区域（scroll-view） 147
4.1.3 滑动界面（swiper） 147
4.2 基础内容 149
4.2.1 小图标（icon） 149
4.2.2 文本组件（text） 150
4.2.3 进度条组件（progress） 152
4.3 表单组件 153
4.3.1 按钮组件（button） 153
4.3.2 多选择框（checkbox） 156
4.3.3 表单form 159
4.3.4 输入框组件（input） 160
4.3.5 label元素 163
4.3.6 滚动选择器picker 163
4.3.7 单选控制器（radio） 166
4.3.8 滑动选择器（slider） 168
4.3.9 开关选择器（switch） 170
4.3.10 文本框控件（textarea） 172
4.4 导航 174
4.5 媒体组件 176
4.5.1 音频组件（audio） 177
4.5.2 上手实践：音乐播放器 177
4.5.3 图片控件（image） 180
4.5.4 上手实践：相册 180
4.5.5 视频控件（video） 184
4.5.6 上手实践：带弹幕的视频播放器 184
4.6 地图 187
4.6.1 地图 187
4.6.2 上手实践：微信中的腾讯地图定位 188
4.7 画布 189
4.7.1 画布控件（canvas） 190
4.7.2 上手实践：使用canvas实现画布的绘制 190
4.8 小结 192
4.9 实践与练习 192


5 项目实战1——日记本 193
5.1 需求分析 193
5.1.1 需求确定 193
5.1.2 功能确定 194
5.1.3 系统设计 194
5.1.4 原型设计 197
5.2 具体编码 199
5.2.1 项目初始化 199
5.2.2 测试环境搭建 201
5.2.3 用户系统编码 203
5.2.4 日记系统编码 218
5.3 小结 233
5.4 实践与练习 235


6 微信提供的API解析 236
6.1 网络 236
6.1.1 发起请求 236
6.1.2 上传与下载 238
6.1.3 WebSocket 240
6.2 媒体 243
6.2.1 图片 243
6.2.2 录音 245
6.2.3 语音控制 246
6.2.4 音乐控制 248
6.2.5 视频控制 252
6.2.6 上手实践：获取本地视频和播放控制 254
6.3 文件 256
6.4 数据缓存 260
6.5 位置 264
6.5.1 获取位置 264
6.5.2 查看位置 265
6.5.3 地图组件控制 266
6.5.4 上手实践：地图控制和查看 267
6.6 设备 269
6.6.1 系统信息 269
6.6.2 网络状态 271
6.6.3 重力感应 271
6.6.4 罗盘 272
6.6.5 拨打电话 272
6.6.6 扫码 272
6.6.7 上手实践：获取所有手机信息和网络状态 273
6.7 界面 274
6.7.1 交互反馈 274
6.7.2 设置导航条 277
6.7.3 导航 278
6.7.4 动画 280
6.7.5 下拉刷新 284
6.7.6 上手实践：带有控制的动画 285
6.8 绘图 287
6.8.1 在canvas上画图 289
6.8.2 canvas坐标系 290
6.8.3 渐变 291
6.8.4 上手实践：使用canvas绘制笑脸 294
6.9 开放接口 296
6.9.1 登录 296
6.9.2 用户信息 301
6.9.3 微信支付 302
6.9.4 模板消息 303
6.9.5 客服消息 307
6.9.6 分享 315
6.9.7 获取二维码 316
6.10 小结 316
6.11 实践与练习 317


7 项目实战2——在线阅读 318
7.1 项目准备工作 318
7.1.1 项目需求分析 318
7.1.2 项目系统设计 319
7.1.3 设计1：用户模块 319
7.1.4 设计2：小说阅读模块 321
7.1.5 项目使用到的技术 321
7.2 项目服务器端编码 322
7.2.1 服务器端介绍 322
7.2.2 Laravel框架的安装与配置 322
7.2.3 服务器功能路由划分 324
7.2.4 服务器数据库搭建 325
7.2.5 服务器的配置 327
7.2.6 服务器的项目结构 328
7.2.7 服务器端登录页面的代码实现 328
7.2.8 服务器端管理主页的代码实现 330
7.2.9 服务器端管理用户的代码实现 332
7.2.10 小程序的接口文档 332
7.2.11 后台管理页面搭建 339
7.2.12 服务器端的测试 347
7.3 项目微信小程序端编码 352
7.3.1 微信小程序页面设计 353
7.3.2 搭建微信小程序项目 353
7.3.3 微信小程序“首页”菜单的代码实现 355
7.3.4 微信小程序“用户历史”菜单的代码实现 357
7.3.5 微信小程序“用户注册”页面的代码实现 361
7.3.6 微信小程序“小说阅读”页面的代码实现 367
7.4 小结 371
7.5 实践与练习 371


8 小程序新增API 372
8.1 蓝牙API 372
8.1.1 获取蓝牙适配器 372
8.1.2 关闭蓝牙模块 374
8.1.3 获取本机蓝牙状态 375
8.1.4 搜索蓝牙设备 377
8.1.5 上手实践：蓝牙管理器 386
8.2 其他新增API 389
8.2.1 获取收货地址 390
8.2.2 打开小程序设置界面 391
8.2.3 操作剪贴板 392
8.2.4 支持微信卡券 393
8.2.5 监听网络变化 395
8.3 ES 6的支持 396
8.4 小结 398
8.5 实践与练习 398

1.1.4 怎样学好微信小程序


微信小程序虽然已经正式发布，但是版本还处于一个不稳定的环境下，所以较Java、C 这样成熟的技术而言可能会变动较大。所以，要学好这样一门新技术，可能需要下面的一些能力：
1．基本的技术基础
（1）JavaScript（简称JS）基础。微信小程序基于JS，并且支持原生JS进行逻辑开发，所以有一定的JS基础是非常重要的。
（2）CSS基础。虽然用于布局样式的WXSS并不是单纯的CSS，但是也是基于CSS技术的一种封装，所以有一定的CSS基础对于学习WXSS也是必要的。
（3）HTML（XML）基础。用于布局的WXML同样也是对于HTML（XML）的一种封装应用，所以HTML基础对于学习也是有一定意义的。
2．基本的编程思维
（1）熟悉基本的编程思想，拥有写网页或者是App的思维模式。
（2）拥有不错的逻辑思维能力，明确需求达到的目标。
3．解决问题的能力
（1）熟练应用Google、Baidu等搜索引擎，找到相应的解决办法。
（2）学会使用GitHub、StackOverflow等社区找到解决方案。
4．自学能力
能够不断自主学习相应的知识和计算机的最新技术，这也是在编程学习中最重要的一点。其实小程序的开发还是很简单和便捷的，但是这并不意味着它是一个简单的程序，腾讯将服务和接口打包开放给了开发者，这使得开发人员的工作和难度大大减少了，但是正如任何一个入门简单的行业和技术一样，学习曲线都是冗长的。所以想要实现在一个技术行业的不断成长，总结和学习是非常重要的。
注意：本书不会太多地涉及JS、HTML等技术，只是一个粗浅的学习过程，并不是从原理开始讲起，只会涉及一些简单的、我们需要使用的技术。剩下的需要读者不断地自主学习。