描述

开本: 32开纸张: 胶版纸包装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302472766丛书名: 移动开发丛书

产品特色

编辑推荐

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

内容简介

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

作者简介

闫小坤，毕业于中国科学技术大学，资深开发者。曾就职于腾讯公司，从事腾讯微博、腾讯房产等产品的开发工作。逾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

前　　言

前言

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

媒体评论

在线试读

第 6章测测你是三国杀中的谁——调查测试类小程序读者应该看过或玩过类似“你是金庸小说中的谁”“12星座性格测试”“东北话八级测试”等调查、测试类小游戏。这类游戏能带动用户的好奇心（我应该是金庸小说中的谁？），并激起用户的分享欲望（我是金庸小说中的风清扬，赶快发到朋友圈让朋友知道啊），从而成为一款长盛不衰的小游戏。这类游戏的特点很明显：（1）有一系列调查问卷供用户回答，通常是选择一个选项或分数。（2）根据用户的选择跳到下一题目（题目不一定连续）。（3）后显示答案，告诉用户的测试结果。本章将介绍一个通用解决方案，所有题目和答案都以JSON格式存储。这样读者只需修改JSON文件的文案就能创建一个全新的测试类游戏。关键知识点：form表单、图片、页面路由。游戏界面如图6-1所示。图6-16.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 问题IDquestion 问题详情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 三国杀人物性格解说
6.2 项目结构完整代码可以查看下载资源的ch06/sgs。项目结构如图6-4所示。图6-4项目有3个page：起始页、测试页、结果页。项目的配置文件如下：文件：app.json1 {2 “pages”:[3 “pages/sgs/index”,4 “pages/sgs/show”,5 “pages/sgs/result”6 ],7 “window”:{8 “backgroundTextStyle”:”light”,9 “navigationBarBackgroundColor”: “#fff”,10 “navigationBarTitleText”: “测测你是三国杀里的谁”,11 “navigationBarTextStyle”:”black”12 }13 }6.2.1 起始页起始页的界面如图6-1所示。程序的主体是显示三国杀封面图，并显示“开始测试”按钮。参考程序：pages/sgs/index.wxml1 2 3 测测你是三国杀里的谁4 5 6 7 8 点击 “开始测试”按钮进入测试页面。参考程序：pages/sgs/index.js1 //index.js2 //获取应用实例3 var app = getApp()4 Page({5 //事件处理函数6 start: function() {7 wx.navigateTo({8 url: ‘../sgs/show’9 })10 }11 })6.2.2 测试页测试页的界面如图6-2所示。程序的主体是展示一系列题目供用户回答，并显示“下一题”按钮。参考程序：pages/sgs/ show.wxml1 2 3 {{answer.question}}4 5 6 7 8 {{answer[‘answer’][0][‘text’]}}9 10 11 12 {{answer[‘answer’][1][‘text’]}}13 14 15 16 17 第4到16行定义一个form表单，内置两个单选框供用户选择。第15行定义一个用于提交的button按钮，绑定到formSubmit方法。用户点击“下一题”后，会根据JSON数据跳到下一题，或者进入结果页。参考程序：pages/sgs/ show.js1 //show.js2 var sgsdata = require(‘../../utils/sgsdata.js’)3 //获取应用实例4 var app = getApp()5 Page({6 data: {7 answers:{},8 answer:{},9 checked_0:false,10 checked_1:false11 },12 //表单提交事件处理函数13 formSubmit: function(e) {14 var nextId = e.detail.value.nextId;15 if(nextId == “”){16 return;17 }18 if(nextId.indexOf(‘result’) != -1){//result_N show result19 var results = nextId.split(‘_’);20 wx.navigateTo({21 url: ‘../sgs/result?id=’ results[1]22 })23 }else{24 this.setData({25 checked_0:false,26 checked_1:false,27 answer:this.data.answers[nextId]28 29 });30 }31 },32 onLoad: function () {33 var ans = sgsdata.getAnswer();34 this.setData({35 answers:ans,36 answer:ans[0]37 });38 }39 })6.2.3 结果页结果页的界面如图6-3所示。程序的主体是展示答案，包括人物角色、图片、性格解读。参考程序：pages/sgs/result.wxml1 2 3 4 你是三国杀中的{{result.name}}5 6 7 8 {{result.text}}9 10 对应的js逻辑如下：参考程序：pages/sgs/result.js1 //result.js2 var sgsdata = require(‘../../utils/sgsdata.js’)3 //获取应用实例4 var app = getApp()5 Page({6 data: {7 result:{}8 },9 onLoad: function (options) {10 var id = options[‘id’]11 var results = sgsdata.getResult();12 this.setData({13 result:results[id]14 });15 }16 })第10行，通过options获取上一个页面传递过来的参数。对应的WXSS如下：参考程序：pages/sgs/result.wxss1 /**result.wxss**/2 .result_container {3 height: 100%;4 display: flex;5 flex-direction: column;6 align-items: center;7 justify-content: space-between;8 box-sizing: border-box;9 } 10 11 .result_title{12 margin-bottom: 20rpx;13 }14 .result_content{15 margin-top: 10rpx;16 padding: 10rpx;17 border: 1px solid #F8F8FF;18 }第2行result_container定义测试结果的容器样式。第11行result_title定义测试结果的标题样式。第14行result_content定义测试结果的解读样式。6.2.4 辅助JSutils/sgsdata.js用于保存问题和结果的json数据。根据小程序框架模块化的要求，我们提供两个对外接口：? getAnswer提供所有问题数据。? getResult提供所有结果数据。参考程序：utils/sgsdata.js1 function getAnswer(){2 var data = [{“id”:1,”question”:”比起循规蹈矩但有理可据的常规工作，你更喜欢去做些含有风险性但收益可观的创造性活动。”,”answer”:[{“option”:”A”,”text”:”是”,”action”:”result_A”},{“option”:”B”,”text”:”否”,”action”:”3″}]},…………];3 return data;4 }5 6 function getResult(){7 var result = {“A”:{“name”:”吕蒙”,”img”:”../../images/lvmeng.jpg”,”text”:”你是一个富有志向而又深谋远虑的人，喜欢为自己制定高瞻远瞩的长远目标，为实现终的胜利甘愿选择隐忍的生活方式，不管过程有多艰辛多漫长你都甘之如饴。你享受生活带来的充实感，善于观察生活中的细节，做事会带有很明确的目的性。你用深藏不露诠释了一种深邃的进取。”}},…………};8 return result;9 }10 11 module.exports = {12 getAnswer: getAnswer,13 getResult:getResult14 }6.3 小结本章通过编写“测测你是三国杀里的谁”项目向读者介绍了JSON的基本知识，包括如何在页面路由中传递数据、form表单的使用、如何使用图片。本章的项目是一个通用方案，读者可以自行修改问题和答案的逻辑和数据，创造新的调查测试游戏。

书摘插画