小程序云开发实战

因为小程序自己存储数据的能力有限，因此不可能将大量的数据保存在客户端，并且将数据保存在本地既不安全，也没法与其余小程序用户共享，因此大多数小程序都须要一个服务端，服务端能够用多种技术实现，如 PHP、Node.js、Python、Asp.net、Java EE 等。无论使用哪一种技术实现服务端，开发一款小程序都须要至少配备两个程序员，一个是开发小程序的程序员，一个是开发服务端的程序员；并且这两个程序员之间还须要不断沟通，以便确认共同遵循的接口。

开发一款小程序须要两名或更多的程序员参与，一直困扰着不少小的创业公司，由于多雇佣一我的，就会增长不少成本。因此基于这个痛点，不少公司推出了云开发技术，例如 Bmob 就是较早推出云开发的公司，所谓云开发，就是将服务端的功能都封装起来，而后向客户端提供 API 访问这些封装的功能。服务端的主要功能无外乎数据存储、文件上传下载、视频/音频流等功能。这些功能大多开发都不困难，但比较费时，因此将其封装起来供客户端调用是一个很是好的主意。

腾讯最近推出了本身的云开发系统，不过这个云开发系统目前只能用于小程序，并且只提供了以下三种：

• 云数据库
• 云存储
• 云函数

云数据库是指在服务端提供的数据库服务，小程序云提供的数据库属于文档数据库，文档数据库有别于关系型数据库。传统的关系型数据库中能够保存若干个表，每个表由若干条记录组成。但文档数据库保存的是 JSON 格式的数据，每个 JSON 文档至关于关系型数据库中的一个表。也就是说，文档数据库保存的是 JSON 文档的集合。很是流行的 MongoDB 就是典型的文档数据库。云数据库个组成部分对应的关系以下表所示。

关系数据库	文档数据库
数据库（DataBase）	数据库（DataBase）
表（table）	集合（collection）
行（row）	记录（record/doc）
列（column）	字段（field）

云存储为小程序提供了远程上传和下载文件的能力。下载能够提供权限管理，小程序能够经过相应的 API 实现文件的上传和下载功能。

云函数就是一段能够运行在服务端的代码，之因此要将部分代码在服务端运行，主要有以下两个缘由：

• 部署多个用户共享，且容易维护的代码
• 获取敏感信息，如 AppID、OpenID 等

搭建云开发环境

如今让咱们来开发第一个与云的小程序，首先应该下载最新版的微信开发者工具，而后在小程序后台获取 AppID。使用云开发功能，必须使用真实的 AppID，不能使用测试用的 AppID。

启动微信开发者工具，新建立一个小程序工程。在建立小程序工程的过程当中，须要输入 AppID 和项目名称，而后在最下面的目标列表中选择“创建云开发快速启动模板”选项，以下图所示。

建立完支持云开发的小程序工程后，工程目录结构和 IDE 主界面以下图所示。当前工程默认带了一些例子（模板中的例子）来帮助理解和开发基于云的小程序。

若是第一次使用这个 AppID 开发基于云的小程序，应该单击界面上方的“云开发”按钮，会显示以下图所示的页面。

这是一个开通云服务的页面，单击“开通”按钮，就会开通用于云开发的服务。在开通的过程当中会出现以下图所示的确认对话框，单击”肯定“按钮进入下一个设置页面。

这个页面是”新建环境“页面，以下图所示。须要输入“环境名称”，一个任意的字符串。在下面列出了基础版的配置，如数据库存储空空间、云函数数量等。若是想要更多的资源，那之后确定是要收费的，天下没有免费的午饭。不过这个配置作实验和用户量不是很是大的小程序仍是够用的。

单击“肯定”按钮，建立一个环境，而后进入以下图所示的云开发控制台。在这个控制台中能够管理用户、云数据库、云存储、云函数及统计分析，而且会显示相关的信息，现在日 API 调用：

若是想建立新环境，能够将鼠标放在右侧当前环境 minicloud 上，会弹出以下图所示的菜单，单击”建立新环境“菜单项则会建立一个新的环境，目前每一个小程序帐号课免费建立两个新环境。

部署 login 云函数

模板会默认建立一个 login 云函数，用于返回 OpenID（标识当前微信登陆用户的 ID），因此在开发基于云的小程序以前，首先要先部署 login 云函数。

选中 login 云函数，在右键菜单中单击“上传并部署”菜单项进行部署，以下图所示。

成功部署 login 云函数后，回到小程序的主页面，单击“点击获取 openid”按钮，如图所示，则会经过 login 云函数获取 openid。

 

如今咱们来开发第一个基于云的小程序，这个小程序很是简单，就是在一个集合中插入一条数据，也就是一个 JSON 格式的文本。

一个集合就至关于一个表。选择环境后，小程序就会默认有一个数据库，因此就不须要单首创建数据库了，只须要在该数据库中建立若干个集合（表）便可。

首先打开云开发控制台，切换到“数据库”页面，单后单击左上角的“添加集合”，弹出以下图所示的“添加集合”对话框，输入集合的名字，而后单击“肯定”按钮添加集合。

建立一个新集合后的效果以下图所示。能够经过单击右侧的“添加记录”导入 json 或 csv 文件，每一个文件最大 50 MB。不过本课并不会经过云开发控制台导入，而是使用代码来插入文档。

得到 openid 后，会跳到 userConsole 页面，所以咱们在这个页面的 onLoad() 函数中向 test 集合插入一个 json 文档。

在小程序开发工具中定位到 userConsole.js 文件，并找到 onLoad() 函数，以下图所示。

在 onLoad() 函数中会从全局变量（globalData）中获取 openid。操做集合首先要经过 init() 函数初始化环境，init() 函数的语法格式以下：

wx.cloud.init({env:envname}) 

其中，envname 是字符串类型的值，表示要使用的环境名，由于在前面已经建立了一个名为 minicloud 的环境了，因此本例的 envname 的值是'minicloud'。

使用下面的代码获取数据库和集合对象：

const db = wx.cloud.database() const test = db.collection('test') 

其中，test 是前面创建的集合名。

最后使用 add() 方法插入 json 格式的数据，完整的代码以下：

wx.cloud.init({env:'minicloud'}) const db = wx.cloud.database() const test = db.collection('test') test.add({ // data 字段表示需新增的 JSON 数据 data: { name: "Bill", age:30 }, success: function (res) { // 输出成功插入后的id以及其余信息 console.log(res) } }) 

如今从新运行程序，获取 openid 后，就会在小程序开发者工具的 Console 中看到以下图的信息。

回到云开发控制台，会看到 test 集合多了以下图所示的数据，这代表 json 文档已经插入成功。

如今来完善前面编写的基于云的小程序，这个小程序尽管能够向云数据库中插入数据，不过代码与模板代码混在了一块儿，在真正的小程序项目中，不可能让用户先单击按钮得到 openid，再进行下面的操做，所以如今须要从新编写基于云的小程序，主要包括以下功能。

• 从文本输入组件中输入姓名和年龄，单击“插入数据”按钮向云数据库插入包含姓名和年龄的数据。
• 从文本输入组件中输入记录 ID，单击“查询数据”按钮，从云数据库中查询相关的数据，并将查询到的数据中的姓名和年龄显示在页面上。

小程序的主界面以下图所示。

为了在咱们本身页面上实现这些功能，首先在小程序工程中建立一个 main 目录，并建立以下图所示的文件。

接下来修改 app.json 文件，将 main 页面变成首页（第一个显示的页面），也就是将“pages/main/main”放在 pages 数组的第一个元素的位置，修改后的 app.json 文件的内容以下：

{
  "cloud": true, "pages": [ "pages/main/main", "pages/userConsole/userConsole", "pages/storageConsole/storageConsole", "pages/databaseGuide/databaseGuide", "pages/addFunction/addFunction", "pages/deployFunctions/deployFunctions", "pages/chooseLib/chooseLib" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black" } } 

如今从新运行小程序，会看到 main 页面已经成为了小程序的首页。因为本例的页面须要用到一些组件，于是须要先在 main.wxml 文件中输入下面的代码完成 main 页面的布局。

<view> <input style='margin-top: 40rpx;' placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" /> <input style='margin-top: 40rpx;' placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" /> <button style='margin-top: 40rpx;' bindtap='insertData'>插入数据</button> <input style='margin-top: 40rpx;' placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" /> <button style='margin-top: 40rpx;' bindtap='queryData'>查询数据</button> <text style='margin-top: 40rpx;'> 姓名：{{nameResult}} </text> <text style='margin-top: 80rpx;'> 年龄：{{ageResult}} </text> </view> 

在 main.wxml 文件中，包含 3 个 <input>组件和 2 个 text 组件，这 5 个组件分别与 age、name、recordId，nameResult 和 ageResult 五个变量绑定，修改和获取这 5 个组件的值也只须要考虑这 5 个变量便可。

在小程序中调用云 API 以前，必需要获取小程序的 openid，这个 openid 表示当前小程序的用户 ID。因为进入小程序必需要经过微信，于是小程序使用与微信相同的用户验证体系，所以，小程序就不须要单独登陆了，而 openid 就是小程序是否登陆的凭证。

获取 openid 的代码已经包含在模板中了，只须要找到 index.js 文件，并搜索 onGetOpenid() 函数，会看到以下的代码。

onGetOpenid: function() { // 调用云函数 wx.cloud.callFunction({ name: 'login', data: {}, success: res => { console.log('[云函数] [login] user openid: ', res.result.openid) app.globalData.openid = res.result.openid wx.navigateTo({ url: '../userConsole/userConsole', }) }, fail: err => { console.error('[云函数] [login] 调用失败', err) wx.navigateTo({ url: '../deployFunctions/deployFunctions', }) } }) } 

上面的代码用于调用名为 login 的云函数获取小程序的 openid。一般只须要将 onGetOpenid() 函数中的代码直接复制到 main.js 文件中的 onLoad() 函数便可。

向云数据库插入数据的代码前面已经学过，一下子你们能够看本例完整的代码。从云数据库中查询数据可使用下面的代码。

db.collection(集合名）.doc(记录ID）.get(
    {
        // 查询到数据后触发，res参数值包含的查询到 数据 success:function(res) { }, // 未查询到数据触发 fail:function(res) { } }) 

main.js 中完整的实现代码以下：

// miniprogram/pages/main/main.js const app = getApp() Page({ /** * 页面的初始数据 */ db:undefined, test:undefined, data: { name:'', age:'', recordId:'', nameResult:'', ageResult:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this // 调用login云函数获取openid wx.cloud.callFunction({ name: 'login', data: {}, success: res => { console.log('[云函数] [login] user openid: ', res.result.openid) app.globalData.openid = res.result.openid wx.cloud.init({ env: 'minicloud' }) that.db = wx.cloud.database() that.test = that.db.collection('test') }, fail: err => { console.error('[云函数] [login] 调用失败', err) wx.navigateTo({ url: '../deployFunctions/deployFunctions', }) } }) }, // 单击“插入数据”按钮调用该函数 insertData:function() { var that = this try { // 将年龄转换为整数类型值 var age = parseInt(that.data.age) // 若是输入的年龄不是数字，会显示错误对话框，并退出该函数 if(isNaN(age)) { // 显示错误对话框 wx.showModal({ title: '错误', content: '请输入正确的年龄', showCancel: false }) return } // 向test数据集添加记录 this.test.add({ // data 字段表示需新增的 JSON 数据 data: { name: that.data.name, age: age }, // 数据插入成功，调用该函数 success: function (res) { console.log(res) wx.showModal({ title: '成功', content: '成功插入记录', showCancel:false }) that.setData({ name:'', age:'' }) } }) } catch(e) { wx.showModal({ title: '错误', content: e.message, showCancel: false }) } }, // 单击“查询数据”按钮执行该函数 queryData:function() { var that = this // 根据记录ID搜索数据集 this.db.collection('test').doc(this.data.recordId).get({ // 找到记录集调用 success: function (res) { // 将查询结果显示在页面上 that.setData({ nameResult:res.data.name, ageResult:res.data.age }) }, // 未查到数据时调用 fail:function(res) { wx.showModal({ title: '错误', content: '没有找到记录', showCancel: false }) } }) }, // 下面的函数用于当更新input组件中的值时同时更新对应变量的值 bindKeyInputName: function (e) { this.setData({ name: e.detail.value }) }, bindKeyInputAge:function(e) { this.setData({ age: e.detail.value }) }, bindKeyInputId:function(e) { this.setData({ recordId:e.detail.value }) }, }) 

如今从新运行小程序，并添加一些数据，看到云开发控制台中的 test 集合下多了几条记录，以下图所示，这代表已经将数据成功插入 test 集合。

如今回到小程序开发界面，在“查询按钮”上方的文本输入框中输入一条记录的 ID，单击“查询数据”按钮，会看到按钮下方会显示以下图的查询结果，若是未查询到结果，会显示一个提示对话框。

成功经过 login 云函数获取 openid 后，会显示以下图的页面。如今就可使用云 API 来开发小程序了。

 

 

关注“极客起源”公众号，下载本文源代码，公众号二维码以下：