微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序(博文视点出品)

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

★少走弯路，高效开发

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

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

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

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

实战项目包括：

★WePY项目：

- 问卷小程序

- 摇一摇游戏

- 百度图片识别API

- 文字和信息发布小程序

- 使用Canvas绘制图片

★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等技术。精通网页后台开发、相关的项目管理等。

第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

　　6.1.1　摇一摇功能分析
　　小程序中的摇一摇功能，其实只需要一个简单的传感器就可以完成，即加速度传感器。
　　加速度传感器是一种能够测量加速度的传感器，通常由质量块、阻尼器、弹性元件、敏感元件和适调电路等部分组成。传感器在加速过程中，通过对质量块所受惯性力的测量，利用牛顿第二定律获得加速度值。根据传感器敏感元件的不同，常见的加速度传感器包括电容式、电感式、应变式、压阻式、压电式等。
　　一般而言，手机设备中的加速度传感器可以检测上、下、左、右的倾角变化，可用于手机游戏、拍照、设备姿势检测等。
　　小程序对加速度传感器进行了封装，使开发者不用操作加速度传感器本身，仅需要调用3个方法，就可以获得当前手机加速度器的情况和当前角度的值。这3个方法是：
　　l wx.stopAccelerometer(Object object)
　　l wx.startAccelerometer(Object object)
　　l wx.onAccelerometerChange(function callback)
　　摇一摇的基本功能，就是判断当前手机的状态是在摇动着还是平稳中。也就是说，在用户进入当前页面时：
　　l 使用wx.startAccelerometer(Object object)打开对该传感器的记录和监听。
　　l 在wx.onAccelerometerChange(function callback)这个API下监听变化状态，如果认为其摇动，数量加成，等待时间结束，返回数据。
　　l 在界面关闭或者游戏结束时，调用wx.stopAccelerometer(Object object)关闭加速度传感器。
　　摇一摇中的请求均可以使用接口轮询的方式访问服务器，不使用socket的方式。这样也方便后台服务器的接口代码编写。使用轮询的方式，就一定会使用小程序中的定时器等。
　　小程序的定时器和JavaScript的定时器一样，一般分为两种。
　　第一种，设定一个定时器，按照指定的周期（以毫秒计）来执行注册的回调函数，用于重复执行的内容，代码如下所示。
　　number setInterval(function callback, number delay, any rest)
　　// 使用
　　let timer = setInterval(
　　()=>{
　　// 需要执行的代码
　　},1000
　　)
　　使用该定时器执行的函数代码，可以使用clearInterval(number intervalID)方法取消，也就是说，对于上述1秒执行一次的代码，可以通过如下代码停止执行。
　　// 传入要取消的定时器的 ID
　　clearInterval(timer)
　　第二种，设定一个定时器，在定时结束以后执行注册的回调函数，也就是延迟一定时间执行，代码如下所示。
　　number setTimeout(function callback, number delay, any rest)
　　// 使用
　　let timer = setTimeout (
　　()=>{
　　// 需要执行的代码
　　},1000
　　)
　　同样，这个延迟定时器会在延迟1秒后执行函数规定的代码，也存在相应的代码停止执行方法，使用clearTimeout(number timeoutID)方法取消延迟定时器的执行，代码如下所示。
　　// 传入要取消的定时器的 ID
　　clearTimeout (timer)
　　本章项目的轮询和延迟开始等功能会大量使用这两个定时器的相关内容。
　　6.1.2　摇一摇项目规划
　　本实例不涉及用户的openid登录等内容，仅通过用户输入的手机号码和一开始输入的参与码进行判定，可以使用测试号完成该小程序的开发，而不用注册真实APPID。
　　在进入小程序时需要选择是创建一个新游戏还是参与一个游戏，需要输入两个用户信息相关的内容：
　　l 首先是用户的手机号，用于将来联系用户和用户单一识别。
　　l 其次是一个参与码，这个码意味着用户参与的是哪一次的摇一摇游戏，或者创建的游戏参与码是多少。
　　游戏时间的配置，需要一个小于1分钟的值，设定基本的单位为秒，可以通过这个时间设定一个游戏的结束时间。这个值只能设置一次，一个游戏时间针对一个参与码，只能由之前创建游戏参与码的人设置。
　　游戏的开始时间在创建者的设备中通过一个按钮控制，其他设备通过轮询的方式查询和读取接口，定时一致。因为并非网络游戏等实时性质极强的游戏，所以较小的延迟不会影响游戏的体验。
　　等到本机的所有计时结束，会返回给服务器相关的数据值，在有效时间内可以记录在数据库中，如果超出了有效时间，认为成绩无效。
　　最后将所有的数据传输给各个参与的设备，完整的逻辑如图6-1所示。
　　6.1.3　摇一摇接口定义
　　根据6.1.2节的规划，摇一摇小程序需要以下接口：
　　l 用户参与活动时的手机信息和参与码信息的接收接口，在此接口中同时会获得活动的时长。
　　l 用户创建活动时手机信息及参与码和时长相关的接口。
　　l 用户单击游戏开始的接口。
　　l 所有用户接收到游戏开始信息的接口。
　　l 用户返回摇动相关数据的接口。
　　l 用户在所有数据传输结束后根据参与码信息返回该参与码中的参与排行榜的人次、手机号码和摇动次数的接口。
　　可以在后台的服务器端提供6个接口，具体的接口和说明如表6-1所示。
　　6.2　项目编码
　　本节开始项目的具体编码，项目后台服务器依旧使用Laravel框架，同时因为本章的实例不涉及用户登录内容，所以本例同时也提供线上测试的地址。
　　6.2.1　摇一摇小程序的后台
　　依旧在之前的Laravel项目中编写。
　　（1）该项目的项目路由规划，根据上一节中的路由定义，首先在RouteServiceProvider.php文件中定义一个新的路由文件，代码如下所示。
　　// 摇一摇用户请求
　　Route::prefix('shake/api')
　　->middleware('api')
　　->namespace($this->namespace)
　　->group(base_path('routes/shake.php'));
　　（2）在routes文件夹下新建shake.php文件，并且将上一节中指定的路由定义在文件中，代码如下所示。
　　　　Route::group(['namespace' => 'Shake\Api'], function () {
　　// 参与
　　Route:: post('activity/join', 'IndexController@join');
　　// 创建
　　Route:: post('activity/create', 'IndexController@create');
　　// 游戏开始的接口
　　Route:: get('activity/start/{create_id}', 'IndexController@start');
　　// 用户获得开始的接口
　　Route:: get('activity/getStart/{join_id}', 'IndexController@getStart');
　　// 用户参加活动的数据
　　Route::post('activity/saveData', 'IndexController@saveData');
　　// 排行榜数据
　　Route:: get('activity/getData/{code}', 'IndexController@getData');
　　});
　　这6个相关的接口均将路由的请求转发到了对应的IndexController中，其中参与活动、创建活动和最后的提交数据都采用POST形式，其他均为GET形式，并且其参数直接放在路径代码中。
　　……

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