小程序与云开发实战 36 讲

课程介绍

小程序依托微信超过 10 亿的海量用户，它无需安装即可使用的完美用户体验，已经成为商家竞相争夺的大蛋糕，同时，小程序开发快速、容易部署广受程序员的喜爱，作为程序员的我们，还有什么理由不学习小程序开发呢/p>

本达人课为小程序以及云开发快速入门课程，主要分为 6 部分内容。

• 入门部分：这部分内容结合着小实例来讲解小程序的开发环境搭建以及开发的基本步骤，然后介绍了小程序中常用的布局，如水平排列和垂直排列布局等。

• 组件部分：主要介绍了小程序开发中常用的组件，如 text 组件、icon 组件、进度、滚动视图、轮询图、各种表单组件、多媒体组件。

• API 部分：主要介绍了小程序开发中常用到的 API，如 络 API、多媒体 API、数据存储 API、位置 API、界面 API 和开发接口 API。

• WeUI 部分：主要介绍了 WeUI 高级 UI 组件的核心使用方法，包括基础组件和 Badge 的用法。

• 云开发部分：包括云数据库、云存储和云函数的核心 API 讲解。

• 实例部分：主要介绍了 6 个小项目实例，其中美团客户端的例子支持小程序支付功能。

学完本达人课后，读者可以快速掌握小程序的核心开发技术，熟练使用小程序的各种组件以及 API 开发包括服务端的小程序，并可以开发出复杂的小程序应用。

• 零基础学区块链和以太坊开发
• Python 爬虫和数据分析实战

课程内容

导读：小程序风口已经到来，你准备好了吗

小程序是腾讯公司推出的，可以运行在微信中，加载速度比 H5 快，开发效率也比 App 快，所以小程序是获得用户、成为流量入口的最佳选择。随着小程序的成熟，微信体内的各入口将全面转入小程序形态。现在开发小程序的创业公司越来越多，甚至很多大公司也加入了小程序开发的序列，作为程序员的我们，是否会开发小程序，将会成为职场上升值加薪的重要筹码。

到目前为止应用程序的类型已经经历了 3 个时代：PC 时代、App 时代和轻应用时代，其中 PC 时代是指桌面应用以及 Web 应用，这个时代从 2008 年基本结束了，从此以后开始进入 App 时代，App 主要指的是 Android App 和 iOS App，这一时代一直到 2016 年，虽然 Android App 和 iOS App 功能很强大，但安装和升级很费劲，大的 App 可能是有几十 M，甚至上百 M，所以从 2016 年开始，轻型应用开始走入我们的视线，这其中以微信小程序为主，其他的还包括支付宝小程序、百度轻应用、快应用等，这 3 个时代如下图所示。

那么微信小程序对于我们技术人员有哪些创业机会呢展示新创业机会之前，我们得要重新审视这两点。

（2）不要把小程序当作 Web App

小程序是完全基于微信生态的产品，所以它无论在 UI 设计上还是在功能上，都和微信本身紧密结合，所以在开发和运营时，都要首先从微信这个大环境的角度出发，它可以是一个只有某项核心功能的简化版 App，也可以是一个解决用户临时需求的小工具，但无论如何，它都是基于微信而生的。

下面就来看看小程序的新机遇在哪里/p>

（1）新交互

所谓的新交互，是指跟原来不一样的玩法，比如说基于群的互动和娱乐，它不仅仅是用群的方式来获取群的流量红利，更多的是基于这种群的关系去开发出更多适合群的场景的玩法出来，它将会是最新且变异量最大的一种。

尤记得在 2017 年 1 月 9 小程序上线发布会上，张小龙举了一个例子，大意就是几个喜欢看球的男生，建了一个微信群，小程序的窗口可以浮在群聊之上，在小程序里面播放视频并实时显示比分，在群里大家还可以讨论的热火朝天，甚至可以玩一些“押注”的小游戏，这样的场景可能会有很多，比如女生一起拉个群看综艺，或者一起拉个群线上 K 歌等。

互联 最性感的地方，就在于能在线还原生活中的场景，并且门槛更低、体验更好。

2018 年，小程序的新交互方式给我展示了这个可能性其实是爆发式的，诸如头脑王者、各种吃鸡游戏、猜歌达人等都是为场景化而生，这种新型的交互方式门槛低、用户精准，在产品有足够的谈资和趣味性很容易在圈子里面引起大家的热议。

（2）新人群

所以现在有些人，专注到中老年市场、农村市场的有服务能力的人群，比如果农，可以很方便地生成自己的店铺并上架商品，这个就是新人群的一种，甚至更简单的，每天为中老年的女性用户推送一条养生相关的视频或者音频，也能快速的实现用户增长。

（3）新场景

小程序上线初始，主推的就是“location”属性，赋能线下商家在线触达其用户。小程序是 站或者 App 的话，二维码就像他们的 址或者 App 链接，在此之前，从来没有如此低门槛低成本的解决方案。比如对一个包子馒头店的老板，可以通过“个人 + 群 + 小程序”的形式，持续耕耘好自己的一亩三分地。在这个形态中，可能存在帮助线下商家更好地用好“微信能量”的机会。

零售的本质是人和商品，以前的零售，无论是线下零售还是线上 店，除了商品本身，都有自己的客户，但客户是不融合互通的，所以呈现线性增长。新零售的核心就是线上线下互通融合，随着线上线下完全融合，线上客户与线下客户形成叠加和交叉，形成指数级的效应。小程序作为连接线下的最佳工具，将成为新零售时代，线下门店拥有“线上店”最简便和最佳的方式。

好了，讲了这么多小程序的好处，以及如何用小程序盈利、小程序的新机遇等，但有一个前提，需要先学会开发小程序。从下一课开始，我们就开始学习小程序开发，为了让读者能更好地掌握小程序的开发技术，本系列文章的最后提供了 6 个实战案例，以便让读者可以将理论和实战相结合。

下面详细说明一下本系列文章的主要内容。

• 小程序开发环境安装和配置
• 开发第一个小程序：石头剪子布
• 小程序布局，主要涉及到水平排列、水平折行排列、垂直排列、垂直折行排列、水平和垂直排列对齐方式、水平等间隔排列等
• 基础组件（text 组件、icon 组件和 progress 组件）
• 滚动视图
• 轮询图
• 表单组件（button、checkbox、input、label、radio、switch、picker 等）
• API 详解（ 络、多媒体 API、文件、数据、位置等 API）
• 用 WeUI 开发小程序
• 实战案例一：高仿 iOS 计算器
• 实战案例二：快递查询
• 实战案例三：电影订票
• 实战案例四：绘制图表
• 实战案例五：小程序版 上商城
• 实战案例六：美团客户端（带支付功能）

读者通过本系列文章，不仅可以深入了解小程序开发的所有技术，还可以获得大量的实战经验。

第01课：小程序初体验

微信小程序概述

注册小程序账

在开始学习小程序之前，先来看一下如何搭建小程序的开发环境。微信平台上的任何东西，要想使用，首先需有一个账 ，小程序也不例外，先到到 官 去注册一个小程序账 ，进入该页面，单击右上角“立即注册”链接，会显示如下图的注册页面。

如果读者有自己的企业，或为单位注册，可以选择相应的类型。如果读者只是个人，可以尝试选择“其他组织”，并任意填写组织代码等信息，据说可以通过，由于本人并没有做这方面的尝试，所以并不能保证一定等通过，读者可以试一下。选择其他类型需要相关的资质证明，如果选择企业需要企业营业执照等信息。

在注册的过程中要用企业账户向腾讯官方的账 打款 0.06 元进行验证（要求在 10 天之内打款，否则验证失败，而且只能是 0.06 元）。不管验证是否成功，款都会退回到原来的企业账户，验证是自动的，但并不是实时的。腾讯的服务端应该是隔一段时间进行一次验证，可能会等几个小时，请耐心等待。

在验证通过之前，仍然可以用注册 Email 登录小程序后台，但无法获取小程序 AppID，验证通过后，会通过站内短信（在小程序后台右上角）进行通知。要注意的是，登录小程序后台的过程中要使用手机微信扫描二维码进行登录，请用管理员的微信扫描登录小程序后台。

当成功注册小程序账 后，可以进入官 页面进行登录，登录的过程中需要使用管理员的手机微信扫描二维码。刚一登录进小程序的后台管理页面，会看到如下图所示的主页面。

这个 AppID 是我做的一个小程序（极客题库）的 AppID，不过就算大家知道了这个 AppID，也用不了，因为登录时需要用管理员的微信扫描才可以，或者成为该项目的开发者，否则是无法使用别人的 AppID 的。

设置小程序信息

即使有了 AppID，也不能立即发布小程序，在此之前，还需要设置小程序的基本信息，点击“设置”链接，在右侧点击“基本设置”，会出现一些设置项，如小程序名称、小程序头像等。如果设置完，会有类似下图所示的信息。

用户可以单击普通二维码和小程序码的相应下载按钮，下载不同尺寸的二维码和小程序码，下图是极客题库小程序码的样式。

单击“小程序项目”按钮，会显示如下图的小程序项目管理页面。

一切都搞定后，单击“确定”按钮创建小程序项目，主界面如下图所示。

下面先看一下猜拳游戏的主界面，如下图所示。

我们发现，就算按前面的布局，仍然不能像上图所示那样摆放组件，这是因为还需要将下面代码调整一下样式（index.wxss 文件）。

前面的布局代码主要调整了 userinfo-avatar 的宽度和高度，让图像显示得更大一些。最后，还需要修改一下 app.wxss 文件的代码，将 padding 属性的值改成 50 rpx 0，代码如下：

当然，现在可能仍然无法显示图像，因为 imagePath 变量还没有设置，而且图像还没有放到工程目录。现在读者可以到 上找三张图片，分别是剪子、石头和布，当然，也可以用本例提供的图像，并在小程序工程根目录建立一个 images 目录，将这三个图像文件放到该目录中。

控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布三个图像，当单击“停止”按钮后，会停到其中一个图像上，这里涉及到如下两个动作：

• 用定时器快速切换图像。
• 图像下方的按钮，当一开始单击时，文本变成了“停止”，当再次单击该按钮后，按钮文本又变成了“开始”，也就是说，一个按钮同时负责开始和停止图像快速切换两个动作。

控制图像快速切换和按钮文本变化两个动作的代码都要写在 index.js 文件中。首先将这三个图像文件名存储在一个全局的数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到 image 组件中，修改按钮的文本只需要修改 title 变量即可。

这里涉及到两个主要变量：imagePath 和 title，这两个都定义在 data 对象中，单击按钮会执行 guess 函数（在 index.wxml 文件中使用 bindtap 属性指定按钮的单击事件函数名），该函数也需要在 index.js 中编写，完整的实现代码如下：

是不是这个猜拳游戏很简单呢，这么点儿代码就搞定了，现在可以通过左侧的模拟器来测试我们的成果了。大家可以单击“开始”按钮，看看图像是否会快速切换，再单击“停止”按钮，看看是否会停止在某个图像上。

真机测试小程序

现在轮到用真机测试我们的成果了。如果只想在真机上测试，用管理员微信登录小程序 IDE 都可以，单击 IDE 工具栏中的“预览”按钮，会弹出一个带二维码的页面，如下图所示。用管理员的账 登录手机微信，扫描该二维码，猜拳游戏就会在手机上运行。

真机调试小程序

如果在模拟器上开发小程序，很容易在 Console 中查看调试信息，但如果在真机上运行呢实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序，然后点击右上角的省略 （…）菜单，会弹出如下图所示的菜单。

点击 vConsole 按钮，就会显示打开真机上的 Console，并显示调试信息，如下图所示，关闭 Console，用同样的操作即可。

如果不想使用 style 属性，可以将 flex-direction:row 放在样式中，例如，可以在 index.wxss 文件中添加如下的样式。

然后修改 index.wxml 文件中的代码如下：

• 折行
• 压缩每一个 view 的宽度

那么到底会发生哪种情况呢们不妨做一个实验，代码如下：

上面的代码很明显，view 中包含了 9 个子 view，保存 index.wxml 文件后，会显示如下图所示的效果。

注意：选择不同的手机模拟器（如 iPhone6 Plus、iPhone5），效果可能是不同的，因为每一行能显示的彩色方块数量是不同的。

垂直排列

只需要设置 flex-direction 的值为 column，就可以将水平排列改成垂直排列，代码如下：

在这段代码中，将顶层 view 的高度设为 300 px，而每一个子 view 的高度是 100 px，所以垂直方向三个 view 会紧挨着显示，效果如下图所示。

很明显，所有的子 view 都被压缩在垂直高度 300 px 的空间内（宽度未改变），那么能否让垂直排列的子 view 折列呢看下一部分的介绍。

垂直折列排列

折列和折行的方式一样，只需要加上 flex-wrap:wrap 即可，可以使用 style 属性添加，或在样式中添加，然后使用 class 属性引用样式。下面的代码使用 style 属性添加了 flex-wrap:wrap。