微信小程序开发实战 (陈伟) (z-library.sk, 1lib.sk, z-lib.sk)

由浅入深，按照功能模块，结合基础知识，详细讲解微信小程序的开发过程， 系统全面。 附带完整实战项目，从需求分析、数据库表设计、架构设计，到编码实现、 项目测试，逐步讲解，举一反三。 微信小程序 开发实战 微信小程序 开发实战 微 信 小 程 序 开 发 实 战 分类建议：计算机/程序开发 人民邮电出版社网址：www.ptpress.com.cn 陈伟  编著 读 者 可 以 通 过 扫 描 本 书 前 言 中 的 微 信 二 维 码 或 访 问 CSDN 学 院（http:/ /edu.csdn.net/ course/detai l /3456）观看作者录制的视频教程。 获 取 更 多 微 信 小 程 序 的 最 新 相 关 资 讯， 敬 请 关 注 作 者 头 条 号（https:/ /www.tout iao.com/ c/user/6279049606/）或 CSDN 博客（http:/ /blog.csdn.net/walkingmanc）。 拓展学习资源 ● 远程调试 ● 后台单点调试 ● 支付实例 ● 获取用户基本信息 ● 图片上传下载 ● 音乐播放器制作 ● 视频播放功能 精彩内容 ● https 通信协议 ● 本地缓存策略 ● 多选项卡 ● 上拉下刷操作 ● 通过 WebSocket 在线聊天 ● 录音功能 ● 地理位置应用 ● 获取设备信息 ● 蓝牙通信和设备数据交换 ● 绘图和动画 ● 模板消息 ● 使用卡券 ● 接入客服系统 ● 分享接口 微信小程序开发实战.indd 1,3 17/7/31 下午3:08

陈伟  编著 微信小程序 开发实战 微信小程序开发实战.indd 4 17/7/20 下午5:14

内 容 提 要 本书主要从微信小程序开发基础、微信小程序基本模块、综合实例应用这三个方面来介绍微信小 程序开发的知识。本书内容包含微信小程序申请及管理后台基本使用、开发调试、页面布局设计、页 面组件、后台环境搭建、网络请求及文件上传下载、WebSocket 功能、媒体数据及设备操作、界面交互 接口及开放接口等。本书在最后提供了两个完整的微信小程序项目案例，供读者融会贯通、举一反三。 全书内容循序渐进、通俗易懂，适合微信平台的开发人员、互联网行业营销人员等阅读，同样适 合对微信小程序感兴趣的人员阅读，也可作为大专院校学生学习了解微信小程序开发的参考用书。  编 著 陈 伟 责任编辑 张 涛 执行编辑 张 爽 责任印制 焦志炜  人民邮电出版社出版发行 北京市丰台区成寿寺路 11 号 邮编 100164 电子邮件 315@ptpress.com.cn 网址 http://www.ptpress.com.cn 北京鑫正大印刷有限公司印刷  开本：8001000 1/16 印张：13.75 字数：328 千字 2017 年 9 月第 1 版 印数：1 – 2 000 册 2017 年 9 月北京第 1 次印刷 定价：49.00 元 读者服务热线：(010)81055410 印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京东工商广登字 20170147 号

1 前 言 自进入移动互联网时代以来，信息互联互通对产业发展起到越来越重要的作用。纵观目前的产 业布局，移动互联网可谓无孔不入。移动互联网渗透到各行各业并促进行业发展升级，例如餐饮业、 零售业等，众多的 B2B 网站数不胜数。 在这场移动互联网盛宴之中，作为弄潮儿的腾讯推出了微信公众号平台，基于微信公众号平台 推出了订阅号、服务号和企业号。自从腾讯推出公众号以来，涌现了一大批专业微信服务号定制开 发公司，专门为传统行业开发定制公众号，但是公众号主要是针对企业和公司而推出的，个人没有 资格申请，所以很多个人开发者被挡在了微信公众号之外。而后，腾讯在移动互联网领域再度发力， 推出微信小程序，企图取代一直在移动互联网市场占主导地位的 Android App 和 iOS App，颠覆整 个移动互联网行业。微信小程序以其独特的优势迅速获得媒体关注，并掀起新一轮移动互联网浪潮。 首先微信小程序无需下载安装，只需要扫一扫即可在线使用，使用完也无需卸载，非常方便快捷。 其次，微信小程序开发过程简单容易，基于微信框架，无需太复杂的基础知识也可以开发出自己的 微信小程序。最近，腾讯将微信小程序面向个人用户开放，更加方便个人开发者去开发微信小程序 应用。 基于微信基础架构的微信小程序功能强大，通过开发微信小程序，我们可以共享微信中数以亿 计的基础用户。无论是推广服务还是宣传产品，都可以得到非常好的营销效果，这也是很多传统行 业的商家争先恐后将业务迁移到微信上的一个原因。目前对微信小程序感兴趣的人越来越多，而目 前市面上关于微信小程序应用的书籍比较少，因此笔者编写了这本书。希望它能对那些对微信小程 序感兴趣或者想通过微信小程序来拓展业务的人士有所帮助，同时起到抛砖引玉的作用。 本书内容 本书内容主要分为三部分。 第一部分是微信小程序开发基础，包括第 1～3 章，主要讲解了微信小程序申请及管理后台基 本使用、开发调试模式、项目构成和目录结构。 第二部分是微信小程序开发的基本模块，包括第 4～12 章，主要讲解了微信小程序的页面布局 设计、页面组件、逻辑层处理、视图层、Maven+Spring+SpringMVC+MyBatis 后台环境搭建，以及 网络请求及文件上传下载、WebSocket 功能、媒体、数据及设备操作、界面交互接口及开放接口。 第三部分综合运用前面讲解的知识来开发实际项目，包括第 13 章和第 14 章，主要讲解了“我爱 看电影”和“日常事项助手”两个项目。 在逻辑结构上，本书力求循序渐进，从基础讲起，按照功能模块，结合基础知识来讲解微信小 程序每个操作模块的具体开发过程。最后以两个实际项目为例，从需求分析、数据库表设计、架构 设计，直到编码实现，逐步讲解，力求让读者达到融会贯通、举一反三的效果。

2 读者对象 本书主要面向的读者对象包括从移动互联网应用开发者转向微信平台的开发人员、互联网行业 营销人员、项目经理和对移动互联网感兴趣的传统企业主。有一定编程基础的学生也可以将本书作 为了解微信小程序开发的教材，对于其他没有编程基础，但是对微信小程序非常感兴趣的人员也可 以将本书作为入门教程。希望本书能带你进入微信小程序的绚烂世界！ 拓展资源 读者可访问 http://edu.csdn.net/course/detail/3456，进入 CSDN 学院观看作者录制的视频，或微 信扫描下方二维码，联系本书作者获取相关视频。

1 目 录 第 1 章 微信小程序申请及管理后台 基本使用 ...............................................1 1.1 微信小程序是什么 ...................................1 1.2 小程序申请注册流程 ...............................2 1.3 小程序管理后台基本操作........................4 第 2 章 小程序开发调试模式 ...........................8 2.1 小程序后台调试模式概述........................8 2.2 云服务器调试模式 .................................11 2.3 本地调试模式 .........................................18 2.4 端口映射模式 .........................................18 第 3 章 项目结构和目录结构 .........................22 3.1 项目结构 .................................................22 3.2 小程序启动执行流程 .............................24 3.3 QuikStart 代码解读 .................................27 第 4 章 页面布局设计 .....................................29 4.1 微信小程序 UI 设计规范 .......................29 4.1.1 友好礼貌 .....................................29 4.1.2 清晰明确 .....................................29 4.1.3 便捷优雅 .....................................36 4.1.4 统一稳定 .....................................37 4.1.5 视觉规范 .....................................38 4.2 小程序组件库的使用 .............................39 4.3 小程序页面布局 .....................................42 4.3.1 Flexbox 模型 ...............................42 4.3.2 布局示例 .....................................47 第 5 章 页面组件..............................................49 5.1 MVVM 前端架构....................................49 5.2 视图容器组件 .........................................50 5.2.1 视图区 view 组件........................50 5.2.2 可滚动视图区 scroll-view 组件....51 5.2.3 滑块视图容器 swiper..................52 5.3 基础内容组件 .........................................52 5.3.1 icon 图标组件 .............................52 5.3.2 text 组件 ......................................53 5.3.3 progress 进度条组件...................53 5.4 表单组件 .................................................53 5.4.1 按钮 button..................................53 5.4.2 checkbox 及 checkbox-group ......54 5.4.3 form 表单组件 ............................54 5.4.4 input 输入框组件 ........................55 5.4.5 label 组件 ....................................55 5.4.6 滚动选择器 picker ......................56 5.4.7 picker-view 选择器 .....................59 5.4.8 radio 单选框 ................................60 5.4.9 slider 滑动选择器 .......................60 5.4.10 switch 开关选择器....................61 5.4.11 textarea 多行文本输入框组件 ...62 5.5 导航组件 .................................................62 5.6 媒体组件 .................................................63 5.6.1 音频组件 audio ...........................63 5.6.2 视频组件 video ...........................65 5.6.3 图片组件 image ..........................66 5.7 地图组件 .................................................67 5.8 画布组件 canvas .....................................70 5.9 客服会话组件 .........................................70 第 6 章 逻辑层处理 ......................................... 72 6.1 什么是小程序逻辑层 .............................72 6.1.1 小程序响应式实现原理 .............72 6.1.2 如何实现变化追踪 .....................72 6.2 小程序配置 .............................................73 6.2.1 页面文件路径配置 .....................73 6.2.2 窗口样式配置 .............................73 6.2.3 选项卡配置 .................................75 6.2.4 调试开关 .....................................76

2 6.2.5 网络超时配置 .............................77 6.3 逻辑层处理 .............................................77 6.3.1 App 逻辑层 .................................77 6.3.2 Page 页面逻辑层.........................78 第 7 章 视图层 ..................................................80 7.1 什么是视图层 .........................................80 7.2 wxml 文件 ...............................................80 7.2.1 数据绑定 .....................................80 7.2.2 条件渲染 .....................................81 7.2.3 列表渲染 .....................................82 7.2.4 模板 .............................................82 7.2.5 事件 .............................................82 7.2.6 文件引用 .....................................84 7.2.7 wxss 样式文件 ............................84 第 8 章 搭建 Maven+Spring+SpringMVC+ MyBatis 后台环境 ..............................86 8.1 安装 Maven .............................................86 8.2 在 MyEclipse 中集成 Maven ..................87 8.2.1 安装 Maven 插件 ........................87 8.2.2 配置 Maven 插件 ........................88 8.3 集成 Spring MVC，MyBatis 及 log4j ....................................................89 第 9 章 网络请求及文件上传下载...............100 9.1 网络请求接口 request ...........................100 9.2 文件上传接口 uploadFile .....................104 9.2.1 设计文件上传界面 ...................104 9.2.2 小程序陷阱提醒 .......................106 9.2.3 文件上传 ...................................108 9.3 文件下载接口 downloadFile.................110 9.3.1 预备知识 ...................................110 9.3.2 文件下载接口的使用 ...............112 第 10 章 小程序 WebSocket 功能 ..............116 10.1 什么是 WebSocket ..............................116 10.2 WebSocket 使用 ..................................117 10.2.1 建立 WebSocket 连接 .............117 10.2.2 WebSocket 服务器端开发 ......118 第 11 章 媒体、数据及设备操作................. 125 11.1 图片操作 .............................................125 11.1.1 选择图片路径 .........................125 11.1.2 预览图片 .................................127 11.1.3 获取图片信息 .........................128 11.2 录音操作 .............................................129 11.3 音频播放 .............................................130 11.3.1 播放本地音频文件 .................130 11.3.2 播放录制的音频 .....................132 11.4 音乐播放 .............................................133 11.5 控制音频组件 .....................................135 11.6 选择视频 .............................................136 11.7 文件操作 .............................................137 11.8 数据缓存 .............................................138 11.9 获取位置 .............................................139 11.10 打开位置 ...........................................140 11.11 查看位置 ...........................................141 11.12 地图组件控制 ...................................142 11.13 设备操作 ...........................................142 11.13.1 获取系统信息 .......................142 11.13.2 拨打电话和扫码 ...................143 第 12 章 界面交互接口及开放接口 ............ 145 12.1 交互反馈 .............................................145 12.1.1 消息提示框 .............................145 12.1.2 显示模态弹窗 wx.showModal ........................146 12.1.3 操作菜单 .................................147 12.2 应用内导航 .........................................148 12.3 动画创作 .............................................149 12.4 动画分组 .............................................151 12.5 绘图功能 .............................................152 12.6 开放接口 .............................................153 12.6.1 登录 .........................................153 12.6.2 会话密匙 .................................155 12.7 数据加密 .............................................157 12.8 获取用户信息 .....................................157 12.9 微信支付 .............................................159 12.10 模板消息 ...........................................160 12.10.1 获取访问凭证 .......................161

3 12.10.2 发送模板消息 .......................163 12.11 客服消息 ...........................................168 12.12 分享功能 ...........................................168 12.13 页面二维码 .......................................169 第 13 章 项目实战——我爱看电影 ............170 13.1 需求分析 .............................................170 13.2 数据库设计 .........................................170 13.3 页面设计 .............................................171 13.4 功能实现 .............................................171 13.4.1 小程序后台连接数据库 .........171 13.4.2 首页设计 .................................176 13.4.3 首页逻辑层 .............................178 13.4.4 首页后台实现 .........................179 13.4.5 详情页设计 .............................184 13.4.6 详情页后台实现 .....................184 第 14 章 项目实战——日常事项助手 ........ 187 14.1 项目基础知识准备 .............................187 14.1.1 ES6 基础知识 .........................187 14.1.2 工具类 .....................................194 14.1.3 promise 函数 ...........................195 14.2 实现思路 .............................................196 14.2.1 日期 .........................................196 14.2.2 存储 .........................................197 14.3 编码 .....................................................197 14.3.1 日历 .........................................197 14.3.2 年月选择 picker 组件 .............201 14.3.3 事项存储 .................................202

第 1 章 微信小程序申请及管理后台基本使用 1.1 微信小程序是什么 微信小程序是一个不需要下载、安装就可使用的应用，它的出现使应用触手可及，用户扫一扫 或者搜一下即可打开应用。微信小程序体现了“用完即走”的理念，用户不用关心是否安装太多应 用的问题。应用将无处不在，随时可用，但又无需安装、卸载。 简单来说，微信小程序不用安装就能使用，它的内存也非常小，每一个小程序都不超过 1MB。 微信小程序（以下简称“小程序”）的出现，为我们带来许多便利和好处。 1．少了安装 App 的麻烦 在 App 时代，如果要使用一项应用的功能，通常需要完成以下步骤。 （1）在 App Store 或 Android 应用市场，寻找能实现相应功能的应用。 （2）下载并安装该应用。 （3）在手机桌面，找到应用。 （4）打开并使用应用。 而在小程序时代，只需要搜索或者“扫一扫”，即可打开应用。没有了下载、安装环节，任何 功能的获取和使用变得更加简单、直接。 2．释放手机内存 除了使用更加便捷之外，小程序的“小体积”也能大大减轻手机的负担。 相信大多数人手机里都装了不少 App。一般情况下，安装一个 App，得花上几 MB、上百 MB， 甚至几 GB 的内存。如果手机内存比较小，一旦多安装了几个 App，难免要面临内存不够的困扰。 在这种情况下，大小不超过 1 MB 的小程序，就成了手机内存紧缺的救星。有了小程序，就不 需要安装那些平时大部分时间用不上却又不得不装的 App 了。 3．让手机桌面更简洁 小程序问世后，也许你的手机桌面上的许多 App 将会消失。 那些功能简单、使用频率低的 App 将会被小程序替代，它们不会在手机桌面上再占据一席之

第 1 章 微信小程序申请及管理后台基本使用 2 地，而是折叠在微信这个“超级 App”里面，等到使用时再被“召唤”出来。 1.2 小程序申请注册流程 小程序的申请注册流程如下。 （1）进入微信公众平台官方网站，单击右上方“立即注册”，如图 1.1 所示。 ▲图 1.1 小程序注册入口页面 （2）选择注册账号类型的页面，单击左下方的“小程序”，如图 1.2 所示。 ▲图 1.2 选择注册账号类型 （3）填写需要注册的邮箱、密码以及验证码后，单击“注册”按钮。注意，需要填写之前没有 在公众号注册过的邮箱，每个邮箱仅能申请一个小程序，填写完成后会发送一封确认邮件到邮箱， 如图 1.3 所示。 （4）登录注册用的邮箱，激活账号，如图 1.4 所示。 （5）接下来填写主题类型、企业名称、营业执照注册号等主体信息。可以选择的主体类型包括： 个人、企业、政府、媒体、其他组织。目前，个人类型的小程序号暂不支持微信认证、微信支付及 高级接口能力，建议大家注册企业类型的小程序号。如果没有企业信息，也可以选择个人类型的小 程序号进行注册，如图 1.5 所示。

完 1.2 小程序申请注册流程 3 ▲图 1.3 填写注册信息 ▲图 1.4 激活账号 ▲图 1.5 填写主体信息

第 1 章 微信小程序申请及管理后台基本使用 4 （6）接下来填写管理员姓名、身份证号和手机号码等信息。确认无误后，单击“继续”，如图 1.6 所示。 ▲图 1.6 登记管理员信息 （7）接下来就和注册公众号一样，等待微信官方审核即可。 1.3 小程序管理后台基本操作 注册完成后，我们可以登录小程序管理后台来看基本的操作。 1．首页 首页中主要是相关的认知情况及一些常见功能的快捷链接地址，如图 1.7 所示。 ▲图 1.7 小程序后台管理首页

完 1.3 小程序管理后台基本操作 5 2．开发管理 我们可以在开发管理界面看到在开发者工具里面提交的小程序版本，提交的版本经过审核后才 可以上线。 3．用户身份 在用户身份页面，管理员可以绑定开发者用户，被绑定的开发者账号经过管理员授权同意后就 具有调用小程序接口，并为该小程序账号开发后台的功能了。在用户身份中还可以绑定体验者用户， 体验者账户可以访问小程序的功能，供测试使用，如图 1.8 所示。 ▲图 1.8 用户身份管理页面 4．数据分析 当小程序上线后，数据分析功能可以通过报表的方式显示每天或者一个时间段内用户的使用情 况，方便管理员跟踪小程序的用户数据，如图 1.9 所示。 ▲图 1.9 数据分析页面

第 1 章 微信小程序申请及管理后台基本使用 6 5．模板消息 我们在小程序中可以通过配置模板信息来向用户发送消息通知，例如小程序提供的在线购买功 能，当用户下单后，我们可以通过在模板消息里面配置一个支付成功的消息模板，然后在程序中使 用该消息模板来向用户发送消息通知，如图 1.10 所示。 ▲图 1.10 模板消息管理页面 6．客服消息 在客服消息管理模块，我们可以将客服人员的个人微信号添加进来。这样当客户通过小程序发 送咨询消息时，客服人员的个人微信号就可以收到这些咨询消息了，如图 1.11 所示。 ▲图 1.11 客服消息管理 7．微信支付 微信小程序中的微信支付和微信服务号的微信支付是一样的，我们通过这里成功申请微信支付 后，就可以在外面的后台程序中使用微信支付相关的接口来完成在线收款功能了。 8．设置 设置包括两部分：基本设置和开发设置。其中，基本设置主要显示小程序的相关基本信息，开

完 1.3 小程序管理后台基本操作 7 发设置主要包括两部分内容，如图 1.12 所示。 ▲图 1.12 设置界面 开发者 ID（包括 AppID 和 AppSecret）是我们在开发后台功能时进行认证的凭证，而服务器域 名是后台程序所在的服务器的域名地址。

第 2 章 小程序开发调试模式 2.1 小程序后台调试模式概述 我们要开发小程序后台程序，就不可避免地要进行后台程序的调试，那么进行小程序后台程序 调试时是依据什么原理的呢？我们该如何设置才能进行小程序后台程序的调试呢？要明白这些，先 要明确小程序是如何通过网络和后台程序进行通信的。 小程序和服务器进行网络通信的方式有 4 种，分别是 https 协议、WebSocket 网络通信、文件 上传和文件下载。 在开发网络通信功能之前，必须先在小程序管理后台配置网络通信的服务器信息，如图 2.1 所示。 ▲图 2.1 微信小程序网络通信服务器地址配置 正如图 2.1 中所显示的一样，配置的这些服务器地址必须已备案至少 24 小时，且不支持 IP 地 址及端口号。也就是说，我们必须有一个已备案至少一天且端口是 80 的服务器资源。 图 2.1 中的 4 项服务器地址配置信息正好对应 4 个 API 接口，分别是 wx.request 发起请求 接口、WebSocket 系列接口、wx.uploadFile 文件上传接口和 wx.downloadFile 文件下载接口，如

完 2.1 小程序后台调试模式概述 9 图 2.2 所示。 ▲图 2.2 服务器地址配置信息和接口调用的对应关系 只有当我们在小程序管理后台配置了这些服务器地址后，才可以在网络通信接口中向这些地址 发起调用请求，否则会报错，如图 2.3 所示。 ▲图 2.3 报错页面 所以，我们必须准备一台支持 https 协议的服务器环境，小程序后台程序需要部署到这样的一 台服务器环境中去。根据对开发人员的便利性，主要有如下 3 种配置方案。 1．云服务器测试调试模式 直接申请一台配置有 https 的云服务器，在开发机器上安装一个自动部署工具。我们每保存一 次代码，则自动发布更新到云服务器，在云服务器上完成功能测试，通过在云服务器端记录 log 日 志的方式来调试程序。 这种方式对开发不是很便利，无法在开发机上测试程序功能，只能自动更新部署到服务器上以 后才能验证测试程序功能，对开发的要求比较高。

第 2 章 小程序开发调试模式 10 2．本地调试模式 在打开微信 Web 开发者工具中时不输入 AppID，这时系统会自动生成一个“touristappid”字 符串作为 AppID，如图 2.4 所示。 当开发工具不关联 AppID 时，进行网络请求调用时将不对 url 进行检查，也就是说你可以调用 类似于 http://localhost 这样的本地 url，而且能获得正确的返回值。 例如，我在默认示例程序中的 bindViewTap 事件处理函数中发起 request 网络请求，请求地址 是 localhost，并且在事件回调函数 success 中打印出返回值，代码如下所示： wx.request({ url: 'http: //localhost', data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {},// 设置请求的 header success: function (res) { console.log(res.data + 'success') }, fail: function () { console.log('fail') }, complete: function () { console.log('complete') } }) 本地后台服务器“localhsot”的 url 的返回值如图 2.5 所示。 ▲图 2.4 本地调试 ▲图 2.5 本地服务器 对事件处理函数进行本地调试，结果如图 2.6 所示。 可以看到，当不关联 AppID 时，我们可以直接对网络请求进行本地化调试。也就是说，我 们可以在本机直接开发小程序后台程序，然后在小程序的页面端直接调用 localhost 本地 url 来向

完 2.2 云服务器调试模式 11 后台程序发起请求进行调试。当有的功能调试完毕并测试通过后，我们再将后台程序部署到云服 务器上去，并将所有 localhost 本地 url 改成云服务器域名地址即可，这样在很大程度上方便了开 发调试过程。 ▲图 2.6 本地调试 但是正如图 2.6 所示，采用本地调试的方法有一个局限性，由于本地调试情况下没有关联真实 的 AppID，所以导致调用某些接口时返回的数据并非真实的数据，而是工具生成的模拟数据，例如 wx.login、wx.operateWxData 接口等。因为这些接口是要和整个微信生态系统交互的，例如获取微 信用户数据，只有真实登录了微信生态系统，才可能获取到这些数据，所以在本地开发模式下，只 可能返回模拟的数据。但是需要注意的是，返回的这些模拟数据的数据格式和真实数据是完全一样 的，只是数据的值可能不正确，在一般情况下并不会影响程序的开发和调试。 3．端口映射模式 通过端口映射和网络地址转换，将对域名的请求映射到本机端口。例如，我们申请并备案了一 个域名，并且在微信小程序管理后台的 request 合法域名处配置好该域名，这时通过映射将小程序 对该域名的请求映射到本地机的 80 端口即可。这样调用域名，会调用到开发机器本地的程序，和 本地开发几乎没有区别。 以上 3 种模式都是实际可行的，在具体开发过程中，我们应该按照自己的风格习惯选择其中的 一种或几种模式的组合。下面详细介绍每种模式的具体实现方式，同时，需要说明的是，本书所采 用的是第 2 种方式和第 3 种方式的结合，采用本地调试的模式来开发小程序后台功能，对于一些复 杂接口，将通过域名映射的方式来进行开发和调试。 2.2 云服务器调试模式 首先要有一台云服务器，可以去阿里云或者腾讯云中申请，然后我们要申请一个域名并完成备 案。上述工作完成后，我们开始配置云服务器，让它能支持 https 协议。 以最常用的阿里云服务器和腾讯云服务器为例，分别讲解设置过程。 首先，前提是我们已经申请了云服务器，并且已经将备案的域名配置到了该云服务器，也就是 说，在浏览器中输入域名时能打开网站首页，但此时是 http 协议而不是 https 协议，例如我在阿里

第 2 章 小程序开发调试模式 12 云的网站，如图 2.7 所示。 ▲图 2.7 未配置 https 支持的网站主页 阿里云本身提供了 SSL 协议服务，是收费的，而且价格还不便宜。在阿里云管理控制台中的 “云解析 DNS”菜单项页面中，我们可以看到相关的介绍，如图 2.8 所示。 ▲图 2.8 数字证书介绍 单击进入“了解更多数字证书”，可以看到产品报价页面，如图 2.9 所示。 ▲图 2.9 数字证书相关产品价格表 价格可以说是非常昂贵的，作为个人开发者来说，一般不会使用这些收费昂贵的数字证书服务，