微信小程序开发实战

实验预计耗时：60分钟

1. 课程背景

1.1 课程目的

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

本实验通过小程序的注册，开发工具的安装以及第一个小程序应用的创建为例，带领大家熟悉小程序开发的流程和微信开发者工具的使用。

1.2 课前知识准备

学习本课程前，学员需要了解以下前置知识：

• 小程序与普通网页开发的区别
• 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。
• 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
• 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具

2.实验环境

2.1 实验操作环境

本课程需要以下实验操作环境：

1. 可以接入互联网的笔记本电脑或者台式机（本实验使用Windows系统）
2. 要求有腾讯云账号，能够访问腾讯云官网https://cloud.tencent.com
3. 安装微信开发者工具，网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.2 实验架构图

本实验案例以一个简单的在线书城（前端通过小程序展示图书，图书数据存储在CVM服务器中，图片信息存储在COS对象存储中）为例，涉及图书搜索，搜索列表页，搜索详情页和借阅图书等模块，关系如下：

现代应用的 API 设计通常遵守 Restful 规范，因此，在此示例中，我们设计的在线书城的 API 为以下形式

• /all GET：返回所有的图书信息
• /book/{id} GET：根据图书 id，返回图书的信息
• /search/q?=kw：通过检索关键字kw返回图书的信息。

后端的接口架构如下图所示：

2.3 实验的数据规划表

下载图书图片

下载miniprogram_backend

下载online-bookstore

3. 实验流程

本实验案例以腾讯云云函数为平台，构建一个简单的图书管理系统，用户可以通过 URL 访问获取文章信息和文章列表。

本实验涉及两个任务，实验环境部署和小程序基础开发。而任务2-小程序基础开发，通过四个步骤完成了图书管理系统小程序的搭建。本实验步骤流程如下：

4. 实验步骤

任务1 开发前准备工作

【任务目标】

您可以在本任务中，部署小程序开发所需要的前期准备，并试着创建第一个小程序应用。

【任务步骤】

1、注册小程序

1.进入小程序注册页（https://mp.weixin.qq.com/wxopen/waregister?action=step1），根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。注册信息如下图所示。

2.账号注册成功后，用浏览器打开网页：https://mp.weixin.qq.com/ 。填写注册时的账号信息并登录。在小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作，下图为登录后的后台管理界面。

3.在小程序后台 ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

2、安装开发工具

1.前往开发者工具下载页面（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），下载稳定版本的微信开发者工具。

2.有关开发者工具更详细的介绍可以查看 《开发者工具介绍》（https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html） 。

3、创建第一个小程序应用

1.打开小程序开发者工具，用微信扫码登录开发者工具，然后新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，点击确定，你就得到了你的第一个小程序了。

点击顶部菜单编译，然后就可以在微信开发者工具中预览你的第一个小程序，如下图所示：

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序（快速启动模板仅有获取用户头像和昵称功能）。

任务2 小程序基础开发

【任务目标】

本任务会教您如何开发和部署图书管理系统的微信小程序。

【任务步骤】

1、用 COS 存储图书图片信息

1.登录腾讯云官网，登录 对象存储控制台，访问地址：https://console.cloud.tencent.com/cos5，然后创建的存储桶。填写存储桶基本信息，此处注意选择公有读私有写，后续可以匿名访问资源，实际项目中根据实际情况选择。

新建完成后可以在列表中查看：

2.上传图书的图片到存储桶中；

图书图片下载

上传完成后可以在文件列表中看到相应的文件。

2、搭建在线书城的后台

1.购买一台 CVM（需要带外网访问）并安装 Ubuntu 18.04的系统，如下图所示：

2.CVM 购买成功后，登录 CVM 的控制端。首先切换到管理员权限：

sudo su

3.运行下列命令，安装 pip3（Ubuntu 18.04中有 Python2和 Python3两个版本，默认的 pip 是对应的 Python2版本）。

apt install python3-pip

4.安装包

安装 flask 包；

pip3 install flask

安装 jsonify 包；

pip3 install jsonify

5.修改后端代码（后端代码为：miniprogram_backend/app.py），将其中所有图书数据字段中的image地址改成上一步上传到对象存储 COS 中的图片地址：

下载miniprogram_backend

可以使用替换功能，如下图所示：

5.将 app.py上传至云服务器（或在云服务器上创建一个 app.py，再将内容粘贴进去）

创建 miniprogram_backend 目录；

mkdir miniprogram_backend

切换至创建的 miniprogram_backend 目录；

cd miniprogram_backend/

编辑app.py（将复制的内容粘贴进去）。

vim app.py

6.运行后端代码，如下图所示：

python3 app.py

打开浏览器，调用后台的数据接口并查看：

(1) 所有图书信息的接口：访问云服务器公网 IP（这里的 IP 换成你的 CVM 地址）。

(2) 按图书ID编号查询书籍的接口：访问公网 IP/book/1（这里的 IP 换成你的 CVM 地址）的地址。

(3) 搜索书名中包含查询关键字的书籍信息：访问公网 IP/search/?q=腾讯（这里的 IP 换成你的 CVM 地址）的地址

3、通过 API 网关暴露服务器接口

1.进入 API 网关控制台，新建 API 网关，如下图所示：

2.进入 API 网关控制台，单击顶部菜单栏右侧API管理，选择通用API，单击新建按钮创建 API。

首先我们创建获取全部图书信息的接口，具体步骤如下所示：

(1) 进行前端配置

(2) 进行后端配置，填写后端域名为云服务器公网IP，后段路经为/；

(3) 选择返回类型为 JSON，点击完成按钮完成 API 的创建。

(4) 发布服务；

(5) 因为是服务是发布在发布环境中，所以在测试服务时需要在默认外网域名后加上 release。具体操作如下图所示：

公网访问地址/release/all

3.创建按照ID获取图书信息的 API 网关（具体步骤和上一步骤大体相同，注意接口的路由信息是不一样的），操作步骤如下所示：

(1) 进行前端配置；

(2) 进行后端配置，填写后端域名为服务器公网IP，路径为/book/{id}；

(3) 选择返回类型为JSON，点击完成按钮完成API的创建。

4.创建获取按照关键字搜索符合条件的图书信息的API网关，具体步骤和上一步骤大体相同，注意接口的路由信息是不一样的，操作步骤如下所示：

(1) 进行前端配置；

(2) 进行后端配置，填写后端域名为服务器公网IP，路径为/search/；

(3) 选择返回类型为JSON，点击完成按钮完成API的创建。

(4) 发步后，可以在浏览器测试API路径是否正确

4、完善在线书城的小程序项目

下载online-bookstore

1.在微信开发者工具里导入项目（online-bookstore文件夹），导入项目时需重新关联项目id，按提示操作即可。具体步骤如下所示：

2.在项目中将默认的 API 网关替换成你定义的 API 网关，位置分别在：

• pages/index/index.js 内约64行
• pages/detail/detail.js 内约21行

检验修改结果，在左侧预览页输入关键字进行搜索：

点击图书名可以查看详情页：

3.在小程序的后台管理页面，在开发->开发设置->服务器域名，点击开始配置；

4.粘贴API域名request合法域名一栏（注意去除多余的http://），然后点击保存并提交；

5.在微信开发者工具内右上方，点击上传发布小程序项目；

6.在微信管理后台页确认审核；

(1) 在版本管理内找到开发版本，选择选为体验版本；

(2) 在页面路径选择后，点击提交；

(3) 接下开就可以测试你的小程序啦。

至此，您已经完成了微信小程序开发实战的全部任务。

5. 注意事项

如实验资源无需保留，请在实验结束后及时销毁，以免产生额外费用。