本书根据最新的微信最新版撰写, 首次全面诠释微信应用号 (小程序) 的接口讲解、开发技术、技术框架, 全景式地讲解微信应用号的服务及支撑能力, 如视图容器, 基础内容, 表单组件, 操作反馈, 导航, 媒体组件, 地图, 画布, 文件操作, 网络, 数据缓存, 地理位置, 界面, 微信登录等。本书还将提供多个完整DEOM演示示例和完整项目案例, 向读者展示开发微信应用号的过程、方法、技术和架构。
闫小坤，毕业于中国科学技术大学，资深开发者。曾就职于腾讯公司，从事腾讯微博、腾讯房产等产品的开发工作。逾7年开发经验，对网站、移动互联网、微信公众平台开发有丰富的经验，其撰写的《微信公众平台应用开发从入门到精通》已成为微信公众平台开发领域的经典书籍。
第1章 初识小程序 1
1.1 小程序是什么 2
1.1.1 小程序的优点 2
1.1.2 小程序的开放能力 2
1.1.3 小程序的前景 3
1.2 小程序开发文档与开发工具 4
1.2.1 小程序开发文档 4
1.2.2 微信Web开发者工具 5
1.2.3 开发工具Tips 8
1.3 大事记 11
1.4 “一秒钟有多长”小游戏 12
1.4.1 游戏规则 12
1.4.2 下载与运行 13
1.4.3 界面、样式与脚本 14
1.5 小结 18
第2章 开发框架配置和逻辑层 19
2.1 开发框架简介 20
2.1.1 底层实现 20
2.1.2 小程序与HTML 5的区别与联系 21
2.1.3 小程序概览 22
2.2 注册程序与页面 23
2.2.1 注册程序 23
2.2.2 注册页面 23
2.2.3 页面的路由 24
2.3 项目架构 24
2.4 配置 26
2.4.1 全局配置 26
2.4.2 页面配置 29
2.5 小技巧 30
2.5.1 页面路由时传递参数 30
2.5.2 下拉刷新 31
2.6 小结 32
第3章 开发框架视图层 33
3.1 样式语言WXSS 34
3.1.1 WXSS的引入方式 34
3.1.2 尺寸单位 37
3.1.3 选择器 41
3.2 标签语言WXML 44
3.2.1 WXML数据绑定与渲染 44
3.2.2 WXML模板与引用 47
3.2.3 WXML事件绑定 48
3.3 小结 51
第4章 组件与API 52
4.1 组件 53
4.1.1 视图容器 54
4.1.2 基础内容 55
4.1.3 表单组件 57
4.1.4 导航 58
4.1.5 媒体组件 59
4.1.6 其他组件 61
4.2 API 62
4.2.1 网络 62
4.2.2 文件 64
4.2.3 设备 65
4.2.4 导航 66
4.2.5 分享 67
4.2.6 获取小程序页面二维码 67
4.2.7 小程序模板消息 70
4.2.8 公众号模板消息打开相关小程序 72
4.2.9 公众号自定义菜单点击打开相关小程序 75
4.2.10 移动App分享小程序页面 80
4.3 Flex布局 81
4.3.1 flex-direction属性 83
4.3.2 flex-wrap属性 84
4.3.3 flex-flow属性 85
4.3.4 justify-content属性 86
4.3.5 align-items属性 87
4.3.6 align-content属性 90
4.3.7 项目属性 92
4.4 小结 94
第5章 博客园客户端——新闻资讯类小程序 95
5.1 项目介绍 96
5.1.1 项目结构 96
5.1.2 项目部署 97
5.1.3 项目配置 97
5.2 server端及API接口 99
5.2.1 博客列表API 100
5.2.2 全文内容API 102
5.2.3 新闻列表API 103
5.3 博客列表页 105
5.3.1 界面 106
5.3.2 博客模板 106
5.3.3 逻辑 108
5.4 博客详情页 110
5.4.1 界面 111
5.4.2 逻辑 112
5.5 新闻列表页 113
5.5.1 界面 114
5.5.2 新闻模板 114
5.5.3 逻辑 115
5.6 新闻详情页 117
5.6.1 界面 118
5.6.2 逻辑 118
5.7 公共JS脚本 119
5.7.1 公共配置 119
5.7.2 解析 119
5.8 小结 124
第6章 测测你是三国杀中的谁——调查测试类小程序 125
6.1 数据结构 126
6.1.1 JSON介绍 126
6.1.2 问题和答案的数据结构 127
6.2 项目结构 130
6.2.1 起始页 131
6.2.2 测试页 132
6.2.3 结果页 134
6.2.4 辅助JS 135
6.3 小结 136
第7章 微餐厅——餐饮管理系统 137
7.1 项目部署 138
7.1.1 搭建开发环境 138
7.1.2 上传代码 138
7.1.3 导入数据库 139
7.1.4 预览小程序 140
7.2 服务器端介绍 140
7.2.1 数据库设计 140
7.2.2 管理后台介绍 142
7.2.3 API接口 144
7.3 微信授权登录 145
7.3.1 微信登录 145
7.3.2 服务器端：code换取session_key 146
7.3.3 数据签名加密 148
7.4 在线排号页 149
7.4.1 服务器端接口 150
7.4.2 小程序端实现 150
7.5 确认取号页 153
7.5.1 服务器端接口 154
7.5.2 小程序端实现 154
7.6 我的排号 158
7.6.1 服务器端接口 158
7.6.2 小程序端实现 159
7.7 查看菜单 162
7.7.1 服务器端接口 162
7.7.2 小程序端实现 162
7.8 小结 165
附录A 小程序接入指南 166
附录B 延伸阅读 169
附录C 开发工具常用快捷键 172
第 6章
测测你是三国杀中的谁
——调查测试类小程序
读者应该看过或玩过类似“你是金庸小说中的谁”“12星座性格测试”“东北话八级测试”等调查、测试类小游戏。这类游戏能带动用户的好奇心（我应该是金庸小说中的谁？），并激起用户的分享欲望（我是金庸小说中的风清扬，赶快发到朋友圈让朋友知道啊），从而成为一款长盛不衰的小游戏。
这类游戏的特点很明显：
（1）有一系列调查问卷供用户回答，通常是选择一个选项或分数。
（2）根据用户的选择跳到下一题目（题目不一定连续）。
（3）最后显示答案，告诉用户的测试结果。
本章将介绍一个通用解决方案，所有题目和答案都以JSON格式存储。这样读者只需修改JSON文件的文案就能创建一个全新的测试类游戏。
关键知识点：form表单、图片、页面路由。
游戏界面如图6-1所示。
图6-1
6.1 数据结构
6.1.1 JSON介绍
JSON（JavaScript Object Notation）是一种轻量级数据交换格式，易于阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript Programming Language、Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，也使用类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。
JSON建构于两种结构：
? “名称/值”对的集合（a collection of name/value pairs）在不同语言中被理解为对象（object）、纪录（record）、结构（struct）、字典（dictionary）、哈希表（hash table）、有键列表（keyed list）或关联数组 （associative array）。
? 值的有序列表（An ordered list of values）在大部分语言中被理解为数组（array）。
这些都是常见的数据结构。事实上，大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间的交换成为可能。
JSON具有以下形式：
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，以“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。例如：
{'name': 'weixin developer'}
数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
['first', 'second']
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或数组（array）。这些结构可以嵌套。
6.1.2 问题和答案的数据结构
测试由问题和答案构成。用户通过回答一系列问题最终获得一个答案。
问题页面如图6-2所示。
图6-2
对应的数据结构如下：
{
"id": 1,
"question": "比起循规蹈矩但有理可据的常规工作，你更喜欢去做些含有风险性但收益可观的创造性活动。",
"answer": [
{
"option": "A",
"text": "是",
"action": "2"
},
{
"option": "B",
"text": "否",
"action": "3"
}
]
}
问题的数据结构见表6-1。
表6-1 问题的数据结构
id 问题ID
question 问题详情
answer 问题的选择项，为数组
option 问题选择项的标示
text 问题选择项的文本
action 问题选择项的动作
特别说明，每个问题有两个答案，你选择其中一个答案后，游戏会根据你的选项分配下一步的动作。action定义了两种动作：
? 跳转到第N题。例如，{"action": "2"}指的是选择该项后跳到第2题。
? 跳转到答案。例如，{"action":"result_A"}指的是选择该项后显示第A种答案。
答案如图6-3所示。
图6-3
{
"A": {
"name": "吕蒙",
"img": " ../../images/lvmeng.jpg",
"text": "你是一个富有志向而又深谋远虑的人，喜欢为自己制定高瞻远瞩的长远目标，为实现最终的胜利甘愿选择隐忍的生活方式，不管过程有多艰辛多漫长你都甘之如饴。你享受生活带来的充实感，善于观察生活中的细节，做事会带有很明确的目的性。你用深藏不露诠释了一种最深邃的进取。"
}
}
结果的数据结构见表6-2。
表6-2 结果的数据结构
结果字段 字段说明
name 三国杀人物姓名
img 三国杀人物图片
text 三国杀人物性格解说
……
新书资讯