微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序

《微信小程序项目开发实战——用WePY、mpvue、Taro打造高效的小程序》的原则是实战，目标是高效开发微信小程序。借助WePY、mpvue、Taro等多个框架，帮助读者从零开始迅速掌握小程序的开发步骤和技巧。全书不仅涉及小程序的前台UI，还涉及后台逻辑的编写，旨在让读者真正获得小程序项目的开发能力。

《微信小程序项目开发实战——用WePY、mpvue、Taro打造高效的小程序》主要分为三个部分。

★第一部分介绍微信小程序的组件和API，以及官方的WePY框架的下载和使用方法。

★第二部分是WePY框架的实战，包括问卷、传感器、富文本显示、上传文件、Canvas等常用小程序的开发。

★第三部分是两个常用的小程序框架mpvue和Taro的实战案例，包括“历史今日”、星座测试小程序的开发。

《微信小程序项目开发实战——用WePY、mpvue、Taro打造高效的小程序》适合想要制作和学习微信小程序的读者，尤其适合零编程基础的爱好者和小程序开发的初学者，读者无须理解过于基础的部分，本书以需求中的功能为开发的重点，涉及大量流行的小程序实例。本书可以快速提高读者的兴趣，进而使读者更加深入地学习相关知识。

★张帆

巨人网络（上海）公司网页开发工程师。喜欢在博客、GitHub和简书上持续分享各种开发技术和编程实例，有丰富的项目经验，喜欢新兴技术和开发方式，喜欢JavaScript系的React.js、vue.js等技术。精通网页后台开发、相关的项目管理等。

适读人群 ：小程序WePY、mpvue、Taro高效开发，一套代码，多端复用，微信Alipay今日头条百度小程序轻松搞定，内含大量流行小程序实例

★?微信小程序的结构化开发方法

★少走弯路，高效开发

★本书的原则是实战，目标却是高效开发微信小程序。

★借助WePY、mpvue、Taro框架，让你从0开始迅速掌握小程序的开发步骤和技巧。

★全书不仅仅涉及小程序的前台UI，还涉及到后台逻辑的编写

★旨在让读者真正获得一个小程序项目的开发能力。

实战项目包括：

★WePY项目：

- 问卷小程序

- 摇一摇游戏

- 百度图片识别API

- 文字和信息发布小程序

- 使用Canvas绘制图片

★mpvue项目：

- “历史今日”小程序

★Taro项目：

- 星座测试小程序

　　微信小程序以一种极度轻量化、无处不在、用完即走的方式全面连接人与服务，在给用户带来了更好的体验的同时，大幅降低了开发的门槛和成本。因此，几乎所有企业都上线了小程序，小程序的数量和小程序开发者的数量都在持续增长。目前小程序的数量超过100万，小程序开发者的数量超过150万，小程序俨然成了当下最火热的开发者平台之一。
　　本书的目的就是帮助开发者快速开发一个小程序。本书抛弃了其他图书逐步介绍微信组件和API的手法，毕竟这些内容微信官方文档已经讲得很详细了。本书从实战入手，通过微信官方提供的WePY框架和第三方框架mpvue、Taro，演示7个小程序项目的全部制作步骤，尤其是Taro框架，还可以将微信小程序转换为其他小程序，如今日头条小程序。
　　★本书不同于其他书的特色还有：
　　提供几乎所有的项目源代码
　　为了便于读者理解本书介绍的小程序，书中介绍的项目均提供可以运行的源代码，读者可以通过博文视点官网下载本书的项目代码。
　　7个真实应用环境中流行的小程序项目
　　本书的实例选择了在小程序应用环境中常见的几种应用，最终的成品可以直接在项目环境中运行，读者不仅可以在学习中参考，也可以直接取出部分功能放在自己的项目中。
　　3个流行微信小程序开发框架
　　本书以微信官方提供的WePY框架开发为主，为方便读者，还提供了流行的mpvue和Taro两个小程序框架的实例。这些框架可以帮助读者快速高效地开发小程序。如果你是熟悉Vue或React的前端开发人员，可降低学习成本、迅速入门。
　　如果你想开发一个微信小程序，但不知道如何下手，
　　如果你想开发多种小程序（微信小程序、今日头条小程序等），却没有解决方案，
　　如果你想快速开发一个微信小程序，
　　如果你想从软件开发转向微信小程序开发，
　　那么本书是一本非常适合你的参考资料。

第1章 走进微信小程序 1

1.1 小程序的起源 1

1.1.1 什么是小程序 2

1.1.2 小程序的发展 3

1.2 开发小程序的第一步 4

1.2.1 注册小程序 4

1.2.2 设置小程序 6

1.3 小程序开发工具 8

1.3.1 下载和安装 8

1.3.2 图解常用功能 11

1.4 实战1：Hello World 13

1.4.1 编写页面链接 13

1.4.2 编写新页面内容 15

1.5 什么是WePY 17

1.5.1 为什么选择WePY 17

1.5.2 WePY开发环境的安装 18

1.6 实战2：WePY版Hello World 20

1.6.1 创建HelloWorld项目 20

1.6.2 编写页面代码 23

1.7 小结和练习 26

1.7.1 小结 26

1.7.2 练习 26

第2章 微信小程序组件 27

2.1 小程序的视图容器 27

2.1.1 最基础的组件：view 28

2.1.2 可滚动视图区域：scroll-view 28

2.1.3 轮播图片：swiper 28

2.1.4 可移动视图容器：movable-view 29

2.1.5 超过原生组件的层级：cover-view和cover-image 30

2.2 小程序的基础组件 32

2.2.1 图标组件：icon 32

2.2.2 文字组件：text 33

2.2.3 富文本组件：rich-text 34

2.2.4 进度条组件：progress 34

2.2.5 表单组件：form 35

2.2.6 极其重要的按钮组件：button 36

2.3 媒体组件和导航组件 37

2.3.1 导航组件：navigator 37

2.3.2 图片组件：image 38

2.3.3 视频组件：video和API：wx.createVideoContext 43

2.3.4 拍照组件：camera和API：wx.createCameraContext 45

2.4 地图组件和画布组件 50

2.4.1 地图组件：map 50

2.4.2 画布组件：Canvas和API：wx.createCanvasContext 51

2.5 小程序提供的HTML支持和开放能力支持 54

2.5.1 开放数据域：open-data 55

2.5.2 HTML等网页支持：web-view 56

2.5.3 开发者的收入来源：ad 58

2.5.4 小程序引导关注公众号：official-account 59

2.6 小结和练习 60

2.6.1 小结 60

2.6.2 练习 60

第3章 微信小程序API 61

3.1 小程序基础——网络请求API 62

3.1.1 发起请求 62

3.1.2 上传和下载 64

3.1.3 WebSocket 65

3.2 实战：简单的socket聊天小程序 68

3.2.1 服务器端开发 68

3.2.2 客户端开发 70

3.3 小程序的基础API——更新和设备信息 77

3.3.1 小程序的自动更新 77

3.3.2 获取用户终端信息 79

3.3.3 获取小程序相关信息 81

3.3.4 获取设备Wi-Fi状态 81

3.3.5 获取设备加速计、陀螺仪和方向 83

3.3.6 获取设备蓝牙和NFC 84

3.3.7 设备屏幕API 86

3.3.8 设备的扫码和振动 87

3.3.9 获取设备的剪贴板 88

3.3.10 获取设备位置的API 88

3.4 路由页面跳转和数据缓存API 90

3.4.1 页面之间的跳转 90

3.4.2 数据缓存添加和获取API 92

3.4.3 数据缓存删除API 94

3.5 小程序界面交互API 95

3.5.1 提示框和模态框 95

3.5.2 导航栏的单独设置 97

3.5.3 Tab Bar的设置 98

3.5.4 字体和滚动 101

3.5.5 其他显示API 102

3.6 媒体和文件 102

3.6.1 图片相关API 102

3.6.2 视频相关API 104

3.6.3 录音相关API 105

3.6.4 文件相关API 106

3.7 其他开放接口 108

3.7.1 客服API 108

3.7.2 转发API 110

3.7.3 收货地址 111

3.8 小结和练习 112

3.8.1 小结 112

3.8.2 练习 112

第4章 微信小程序的服务器端 113

4.1 后台API编写入门 113

4.1.1 后台技术的选择 114

4.1.2 后台技术环境搭建 114

4.1.3 直接上手的框架 117

4.1.4 搭建一个简单的框架服务器 117

4.1.5 MySQL的使用 120

4.1.6 对于后端技术的说明 121

4.1.7 路由创建 121

4.2 用户系统的搭建 122

4.2.1 用户系统的逻辑 122

4.2.2 用户系统的实现编码 124

4.2.3 用户系统的测试 132

4.3 其他常用服务器API 135

4.3.1 二维码API 135

4.3.2 运动数据API 140

4.3.3 获取用户手机号 148

4.4 小结与练习 151

4.4.1 小结 151

4.4.2 练习 151

第5章 实战：问卷小程序 152

5.1 问卷小程序简介 152

5.1.1 为什么需要问卷调查 153

5.1.2 需求分析 153

5.2 问卷小程序具体编码 154

5.2.1 后端编写 154

5.2.2 小程序编写 162

5.3 小结和练习 168

5.3.1 小结 168

5.3.2 练习 168

第6章 实战：摇一摇游戏 169

6.1 项目分析 169

6.1.1 摇一摇功能分析 170

6.1.2 摇一摇项目规划 171

6.1.3 摇一摇接口定义 172

6.2 项目编码 173

6.2.1 摇一摇小程序的后台 173

6.2.2 摇一摇小程序的首页 185

6.2.3 摇一摇小程序的填写页面 188

6.2.4 摇一摇小程序的摇动页面 194

6.2.5 摇一摇小程序排行榜 202

6.3 小结和练习 204

6.3.1 小结 204

6.3.2 练习 205

第7章 实战：百度图片识别API 206

7.1 项目分析 206

7.1.1 流行的识别技术 207

7.1.2 功能设计 207

7.1.3 路由设计 208

7.2 具体编码 208

7.2.1 系统后台编码 208

7.2.2 上传图片功能 215

7.2.3 小程序图片解析显示 219

7.3 小结和练习 221

7.3.1 小结 221

7.3.2 练习 221

第8章 实战：文字信息发布小程序 222

8.1 项目需求 222

8.1.1 功能划分 223

8.1.2 路由划分 223

8.2 具体编码 224

8.2.1 后台实现 224

8.2.2 新建小程序项目 233

8.2.3 首页实现 234

8.2.4 首页逻辑编写 237

8.2.5 首页样式编写 239

8.2.6 文章详情页实现 241

8.2.7 文章内容显示 243

8.2.8 文章评论显示 246

8.2.9 文章点赞功能 248

8.3 小结和练习 251

8.3.1 小结 251

8.3.2 练习 251

第9章 实战：使用Canvas绘制图片 252

9.1 如何使用Canvas绘制生成图片 252

9.1.1 为什么需要绘制生成图片 253

9.1.2 绘制生成图片的必要因素 253

9.2 实战1：在微信小程序中绘制需要的图片 254

9.2.1 需求分析 254

9.2.2 创建小程序 255

9.2.3 创建组件 256

9.2.4 图片主页 257

9.2.5 绘制图片 261

9.3 实战2：流行的手机背景生成小程序 262

9.3.1 系统规划设计 262

9.3.2 后台路由设计 264

9.3.3 系统后台编码 264

9.3.4 小程序页面编写 266

9.3.5 小程序逻辑编写 269

9.3.6 小程序绘制逻辑编写 273

9.4 小结和练习 275

9.4.1 小结 275

9.4.2 练习 275

第10章 实战：使用mpvue实现“历史今日”小程序 276

10.1 支持Vue.js语法的mpvue框架 276

10.1.1 mpvue框架基础 277

10.1.2 mpvue框架环境搭建 277

10.1.3 mpvue快速入门 280

10.1.4 项目工程文件说明 281

10.2 使用mpvue创建“历史今日”小程序 285

10.2.1 项目规划 285

10.2.2 项目新建页面 287

10.2.3 请求接口逻辑编写 288

10.2.4 项目显示编写 291

10.2.5 项目生成 295

10.3 小结和练习 296

10.3.1 小结 296

10.3.2 练习 297

第11章 实战：使用Taro实现星座测试小程序 298

11.1 支持React语法的Taro框架 299

11.1.1 什么是Taro 299

11.1.2 Taro快速入门 300

11.2 使用Taro框架创建星座测试小程序 303

11.2.1 接口说明 303

11.2.2 新建Taro小程序 304

11.2.3 星座测试小程序主页 305

11.2.4 星座测试小程序主页的组件 307

11.2.5 星座测试详情页 310

11.3 项目编译与生成 314

11.3.1 编译为微信小程序 314

11.3.2 编译为百度小程序 315

11.3.3 编译为支付宝小程序 318

11.3.4 编译为其他小程序 321

11.4 小结和练习 321

11.4.1 小结 321

11.4.2 练习 321