产品特色

编辑推荐

本书全面诠释微信小程序的技术框架、开放接口与开发技巧，全景式地讲解微信小程序的服务及支撑能力，通过多个完整DEMO示例与项目案例展示微信小程序的开发流程、方法、技术、架构与实践。

内容简介

本书由前腾迅软件开发工程师根据微信公开上线新版本编写，全面诠释微信小程序的技术框架、开放接口、开发技巧，全景式地讲解微信小程序的服务及支撑能力，如视图容器、基础内容、表单组件、操作反馈、导航、媒体组件、地图、画布、文件操作、网络、数据缓存、地理位置、界面、微信登录、模板消息、获取二维码、微信分享等。本书注重实际项目开发，提供包含新闻资讯类、调查测试类、餐厅类小程序的完整项目案例，向读者展示开发微信小程序的过程、方法、技术和架构。读者通过学习本书，完全可以掌握企业级实际项目的开发。
本书适合微信小程序开发初学者，企业微信小程序开发者、公众号运营者及移动互联网开发人员阅读，也适合有一定开发基础但对微信小程序项目开发不熟悉的程序员使用。

前言序言

编写本书的目的
开放是一种能力。微信从诞生以来，就一直以开放的姿态发展。微信公众□台、微信开放□台、企业号等既给微信带来大量自媒体人、开发者、企业用户，又给广大开发者提供了无数机会，让小个体都可以有品牌。现在又有了微信小程序，微信公众□台提供了一种新的开放能力，开发者可以快速开发一个小程序。
按照微信之父张小龙的说法，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题，应用将无处不在、随时可用，但又无须安装卸载。这将对移动互联网时代的移动应用开发带来颠覆性的影响。
按照“可能吧”和“有可能学院”创始人阿禅的说法，小程序是一个生态，这个生态希望连接更多线下场景，生态里出现的产品分为3个阶段：
1．摸索与搬迁阶段
□．工具阶段
3．场景化阶段
每个阶段都会有新的业务、功能、服务和场景出现。人们慢慢发现，小程序会像微信公众号一样成为标配，也像水电一样成为基础设施而无处不在。
如何阅读本书
全书分为三部分，共7章内容。
□□部分（□□章）：介绍微信小程序的基础知识和开发环境的搭建。通过本部分的学习，读者可以通过简单的配置搭建开发环境，开发出□□个DEMO应用，为后面的学习打下基础。
第二部分（第□、3、4章）：重点介绍微信小程序的各种服务和接口，包括但不限于视图容器、基础内容、表单组件、操作反馈、导航、媒体组件、地图、画布、文件操作、网络、数据缓存、地理位置、界面、微信登录、模板消息、获取二维码、微信分享等内容。读者在学完本部分之后，能够对微信小程序提供的全部服务有所了解。本部分提供众多案例供读者学习。
第三部分（第5、6、7章）：以大项目为例，每章实现一个小程序的功能，包括博客园客户端——新闻资讯类小程序、测测你是三国杀中的谁——调查测试类小程序、微餐厅——餐饮管理系统。相信读者学习后完全有能力开发企业级的小程序。
读者对象
● 对微信小程序开发感兴趣的人员
● 微信公众账号运营人员
● 移动互联网开发人员
● HTML 5开发人员
● 已有微信开发基础，但对项目开发不熟悉的开发人员
● 有编程经验，希望转型做微信小程序开发的人员
技术交流
由于笔者水□有限，加之编写时间仓促，书中难免会出现一些错误或不准确、不全面的地方，恳请读者批评指正。为了更好地和读者交流，笔者建立了一个网站。
同时，读者有任何问题，可以发送邮件到davidsp@foxmail.com邮箱，笔者会尽快给予回复。
致谢
感谢腾讯公司的微信团队，是他们创造了这款伟大的产品。
感谢清华大学出版社的王金柱编辑，他在我写作过程中提供了很多帮助和支持。
谨以此书献给我的家人以及微信公众□台和所有离不开微信的朋友们。
闫小坤
□017年3月于北京

目录

□□章  初识小程序 1
1.1  小程序是什么 □
1.1.1  小程序的优点 □
1.1.□  小程序的开放能力 □
1.1.3  小程序的前景 3
1.□  小程序开发文档与开发工具 4
1.□.1  小程序开发文档 4
1.□.□  微信Web开发者工具 5
1.□.3  开发工具Tips 8
1.3  大事记 11
1.4  “一秒钟有多长”小游戏 1□
1.4.1  游戏规则 1□
1.4.□  下载与运行 13
1.4.3  界面、样式与脚本 14
1.5  小结 18
第□章  开发框架配置和逻辑层 19
□.1  开发框架简介 □0
□.1.1  底层实现 □0
□.1.□  小程序与HTML 5的区别与联系 □1
□.1.3  小程序概览 □□
□.□  注册程序与页面 □3
□.□.1  注册程序 □3
□.□.□  注册页面 □3
□.□.3  页面的路由 □4
□.3  项目架构 □4
□.4  配置 □6
□.4.1  全局配置 □6
□.4.□  页面配置 □9
□.5  小技巧 30
□.5.1  页面路由时传递参数 30
□.5.□  下拉刷新 31
□.6  小结 3□
第3章  开发框架视图层 33
3.1  样式语言WXSS 34
3.1.1  WXSS的引入方式 34
3.1.□  尺寸单位 37
3.1.3  选择器 41
3.□  标签语言WXML 44
3.□.1  WXML数据绑定与渲染 44
3.□.□  WXML模板与引用 47
3.□.3  WXML事件绑定 48
3.3  小结 51
第4章  组件与API 5□
4.1  组件 53
4.1.1  视图容器 54
4.1.□  基础内容 55
4.1.3  表单组件 57
4.1.4  导航 58
4.1.5  媒体组件 59
4.1.6  其他组件 61
4.□  API 6□
4.□.1  网络 6□
4.□.□  文件 64
4.□.3  设备 65
4.□.4  导航 66
4.□.5  分享 67
4.□.6  获取小程序页面二维码 67
4.□.7  小程序模板消息 70
4.□.8  公众号模板消息打开相关小程序 7□
4.□.9  公众号自定义菜单点击打开相关小程序 75
4.□.10  移动App分享小程序页面 80
4.3  Flex布局 81
4.3.1  flex-direction属性 83
4.3.□  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  项目属性 9□
4.4  小结 94
第5章  博客园客户端——新闻资讯类小程序 95
5.1  项目介绍 96
5.1.1  项目结构 96
5.1.□  项目部署 97
5.1.3  项目配置 97
5.□  server端及API接口 99
5.□.1  博客列表API 100
5.□.□  全文内容API 10□
5.□.3  新闻列表API 103
5.3  博客列表页 105
5.3.1  界面 106
5.3.□  博客模板 106
5.3.3  逻辑 108
5.4  博客详情页 110
5.4.1  界面 111
5.4.□  逻辑 11□
5.5  新闻列表页 113
5.5.1  界面 114
5.5.□  新闻模板 114
5.5.3  逻辑 115
5.6  新闻详情页 117
5.6.1  界面 118
5.6.□  逻辑 118
5.7  公共JS脚本 119
5.7.1  公共配置 119
5.7.□  解析 119
5.8  小结 1□4
第6章  测测你是三国杀中的谁——调查测试类小程序 1□5
6.1  数据结构 1□6
6.1.1  JSON介绍 1□6
6.1.□  问题和答案的数据结构 1□7
6.□  项目结构 130
6.□.1  起始页 131
6.□.□  测试页 13□
6.□.3  结果页 134
6.□.4  辅助JS 135
6.3  小结 136
第7章  微餐厅——餐饮管理系统 137
7.1  项目部署 138
7.1.1  搭建开发环境 138
7.1.□  上传代码 138
7.1.3  导入数据库 139
7.1.4  预览小程序 140
7.□  服务器端介绍 140
7.□.1  数据库设计 140
7.□.□  管理后台介绍 14□
7.□.3  API接口 144
7.3  微信授权登录 145
7.3.1  微信登录 145
7.3.□  服务器端：code换取session_key 146
7.3.3  数据签名加密 148
7.4  在线排号页 149
7.4.1  服务器端接口 150
7.4.□  小程序端实现 150
7.5  确认取号页 153
7.5.1  服务器端接口 154
7.5.□  小程序端实现 154
7.6  我的排号 158
7.6.1  服务器端接口 158
7.6.□  小程序端实现 159
7.7  查看菜单 16□
7.7.1  服务器端接口 16□
7.7.□  小程序端实现 16□
7.8  小结 165
附录A  小程序接入指南 166
附录B  延伸阅读 169
附录C  开发工具常用快捷键 17□

精彩书摘

第 6章
测测你是三国杀中的谁
——调查测试类小程序
读者应该看过或玩过类似“你是金庸小说中的谁”“1□星座性格测试”“东北话八级测试”等调查、测试类小游戏。这类游戏能带动用户的好奇心（我应该是金庸小说中的谁？），并激起用户的分享欲望（我是金庸小说中的风清扬，赶快发到朋友圈让朋友知道啊），从而成为一款长盛不衰的小游戏。
这类游戏的特点很明显：
（1）有一系列调查问卷供用户回答，通常是选择一个选项或分数。
（□）根据用户的选择跳到下一题目（题目不一定连续）。
（3）□后显示答案，告诉用户的测试结果。
本章将介绍一个通用解决方案，所有题目和答案都以JSON格式存储。这样读者只需修改JSON文件的文案就能创建一个全新的测试类游戏。
关键知识点：form表单、图片、页面路由。
游戏界面如图6-1所示。
图6-1
6.1  数据结构
6.1.1  JSON介绍
JSON（ Object Notation）是一种轻量级数据交换格式，易于阅读和编写，同时也易于机器解析和生成。JSON基于 Programming Language、Standard ECMA-□6□ 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，也使用类似于C语言家族的习惯（包括C、C++、C#、Java、、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.□  问题和答案的数据结构
测试由问题和答案构成。用户通过回答一系列问题□终获得一个答案。
问题页面如图6-□所示。
图6-□
对应的数据结构如下：
{
"id": 1,
"question": "比起循规蹈矩但有理可据的常规工作，你更喜欢去做些含有风险性但收益可观的创造性活动。",
"answer": [
{
"option": "A",
"text": "是",
"action": "□"
},
{
"option": "B",
"text": "否",
"action": "3"
}
]
}
问题的数据结构见表6-1。
表6-1  问题的数据结构
id 问题ID
question 问题详情
answer 问题的选择项，为数组
option 问题选择项的标示
text 问题选择项的文本
action 问题选择项的动作
特别说明，每个问题有两个答案，你选择其中一个答案后，游戏会根据你的选项分配下一步的动作。action定义了两种动作：
? 跳转到第N题。例如，{"action": "□"}指的是选择该项后跳到第□题。
? 跳转到答案。例如，{"action":"result_A"}指的是选择该项后显示第A种答案。
答案如图6-3所示。
图6-3
{
"A": {
"name": "吕蒙",
"img": " ../../images/lvmeng.jpg",
"text": "你是一个富有志向而又深谋远虑的人，喜欢为自己制定高瞻远瞩的长远目标，为实现□终的胜利甘愿选择隐忍的生活方式，不管过程有多艰辛多漫长你都甘之如饴。你享受生活带来的充实感，善于观察生活中的细节，做事会带有很明确的目的性。你用深藏不露诠释了一种□深邃的进取。"
}
}
结果的数据结构见表6-□。
表6-□  结果的数据结构
结果字段 字段说明
name 三国杀人物姓名
img 三国杀人物图片
text 三国杀人物性格解说
……

作者简介

闫小坤，毕业于中国科学技术大学，资深开发者。曾就职于腾讯公司，从事腾讯微博、腾讯房产等产品的开发工作。逾7年开发经验，对网站、移动互联网、微信公众□台开发有丰富的经验，其撰写的《微信公众□台应用开发从入门到精通》已成为微信公众□台开发领域的经典书籍。