小程序云开发实践总结

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：次

1.云开发简介

由于存储数据的能力有限，无法在客户端存储大量数据，在本地存储数据和与其他小程序用户共享数据都不安全。所以大多数小程序都需要一个服务器，可以通过各种技术来实现，比如PHP、Node.js、Python、ASP.NET、Java EE等等。无论用哪种技术实现服务器，开发一个小程序至少需要两个程序员，一个是开发小程序的程序员，一个是开发服务器的程序员。此外，两位程序员需要不断沟通，以确认他们一起遵循的界面。

开发一个小程序需要两个或两个以上的程序员参与，这一直困扰着很多小创业公司，因为多雇一个人会增加很多成本。所以基于这个痛点，很多公司都引入了云开发技术。例如，Bmob是较早引入云开发的公司。所谓云开发就是封装服务器的功能，然后为客户端提供对这些封装功能的API访问。服务器的主要功能有数据存储、文件上传下载、视频/音频流等。这些函数大部分不难开发，但是很耗时，所以打包让客户端调用是一个非常好的主意。

腾讯最近推出了自己的云开发系统，但这个云开发系统目前只能用于小程序，只提供以下三种。

云数据库云存储云功能云数据库是指在服务器端提供的数据库服务。小程序云提供的数据库属于文档数据库，不同于关系数据库。传统的关系数据库可以存储多个表，每个表由多个记录组成。但是，文档数据库以JSON格式存储数据，每个JSON文档相当于关系数据库中的一个表。也就是说，文档数据库保存了一组JSON文档。非常流行的MongoDB是一个典型的文档数据库。下表显示了云数据库组件之间的对应关系。

关系数据库文档数据库数据库表集合行记录/文档列字段云存储为小程序提供了远程上传和下载文件的能力。下载可以提供权限管理，小程序可以通过对应的API上传下载文件。

云函数是一段可以在服务器上运行的代码。在服务器上运行部分代码有两个主要原因：

部署多个用户共享且易于维护的代码，以获取敏感信息，如appid、openid等。2.构建云开发环境

现在让我们开发第一个与云相关的小程序。首先要下载最新版本的微信开发者工具，然后在小程序后台获取AppID。要使用云开发功能，必须使用真实的AppID，而不是测试的AppID。

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

创建支持云开发的小程序项目后，项目目录结构和IDE主界面如下图所示。默认情况下，当前项目中会引入一些示例(模板中的示例)，以帮助理解和开发基于云的小程序。

如果你是第一次使用这个AppID开发基于云的小程序，你应该点击界面顶部的“云开发”按钮，就会出现下图所示的页面。

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

该页面为“新环境”页面，如下图所示。您需要输入“环境名”，一个任意的字符串。下面列出了基本版本的配置。比如数据库存储的空白空间和云功能的数量。如果你想要更多的资源，将来肯定要收费。不劳而获。然而，这种配置对于用户数量少的实验和小程序来说已经足够了。

点击【确定】创建环境，然后进入云开发控制台，如下图所示。用户、云数据库、云存储、云功能和统计分析都可以在这个控制台进行管理。并将显示相关信息，例如今天的API调用

如果你想新建一个环境，可以把鼠标放在右边当前环境minicloud上，弹出下图所示的菜单。单击菜单项“创建新环境”以创建新环境。目前，每个小程序帐户类别都免费创建两个新环境。

3.部署登录云功能

模板默认会创建一个登录云功能，用于返回openid(标识当前微信登录用户的id)。因此，在开发基于云的小程序之前，必须先部署登录云功能。

选择登录云功能，点击右键菜单中的“上传部署”菜单项进行部署，如下图所示。

成功部署登录云功能后，返回小程序主页面，点击“点击获取openid”，如下图所示，通过登录云功能获取openid。

通过登录云功能成功获取openid后，将显示如下图所示的页面。现在可以使用云API开发小程序了。

4.开始实战

现在我们来开发第一个基于云的小程序，非常简单，就是在集合中插入一段数据，也就是JSON格式的文本。

集合相当于一张桌子。选择环境后，小程序默认会有一个数据库，所以不需要单独创建数据库，只需要在数据库中创建几个集合(表)。

首先打开云开发控制台，切换到“数据库”页面，然后点击左上角的“添加收藏”，弹出如下图所示的“添加收藏”对话框，输入收藏名称，然后点击“确定”添加收藏。

创建新集合后的效果如下图所示。您可以通过点击右侧的“添加记录”来导入json或csv文件，每个文件的最大大小为50MB。但是，这一部分不会通过云开发控制台导入，而是使用代码插入文档。

由于我们得到了openid，我们将跳转到userConsole页面，因此我们在这个页面的onLoad函数中向测试集合中插入了一个json文档。

在小程序开发工具中找到userConsole.js文件，找到onLoad函数，如下图所示。

Openid是从onLoad函数中的globalData获取的。操作集必须首先通过init函数初始化环境。init函数的语法格式如下：

wx . cloud . init({ en v : envname })其中envname是字符串类型的值，表示要使用的环境的名称，之前已经创建了一个名为minicloud的环境，因此本例中env name的值为“minicloud”。

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

const db=wx . cloud . database(). const test=db . collection(' test ')，其中test是之前创建的集合的名称。

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

wx . cloud . init({ en v : ' mini cloud ' })const db=wx . cloud . database()const test=db . collection(' test ')test . add({//A数据字段表示要添加的JSON数据，data: {name:' bill '，age:30}，success 3360 function(RES){//输出成功插入的id和其他信息Console.log (RES)})。现在，再次运行程序并获得openid后，您将在applet developer工具的控制台中看到以下信息。

回到云开发控制台，您会看到测试集有更多的数据，如下图所示。这表明json文档已经成功插入。

现在让我们改进之前编写的基于云的小程序。虽然这个小程序可以将数据插入云数据库，但是代码是与模板代码混合在一起的。在真实的小程序项目中，用户不可能先点击按钮获取openid，然后执行以下操作，所以现在重写基于云的小程序。主要包括以下功能。

从文本输入组件输入姓名和年龄，点击“插入数据”按钮，将包含字母和年龄的数据插入云端数据库。从文本输入组件中输入记录ID，点击“查询数据”按钮，从云数据库中查询相关数据，在页面上显示查询数据中的姓名和年龄。小程序的主界面如下图所示。

要在我们自己的页面上实现这些功能，首先在applet项目中创建一个主目录，并创建一个如下图所示的文件。

接下来，修改app.json文件，将主页面改为第一页，即在pages数组的第一个元素处放入‘pages/main/main’。修改后的app.json文件如下：

{ 'cloud': true，' pages': [ 'pages/main/main '，' pages/userConsole/userConsole '，' pages/storage sole/storage sole '，' pages/databaseGuide '，' pages/addFunction/addFunction '，' pages/deployFunctions/deployFunctions '，' pages/chooseLib/chooseLib' ]，' window ' 3: { ' backgroundColor ' 3: ' # F6 F6 '，' backgroundTextStyle ' 3: ' light '由于本示例中的页面需要一些组件，您需要在main.wxml文件中输入以下代码来完成主页的布局。

视图输入样式=' margin-top : 40 rpx；'占位符='请输入名称' value=' { { name } } ' bind input=' bindkeyinputname '/input style=' margin-top : 40 rpx；'占位符='请输入年龄'值=' { { age } } ' bind input=' bindkinputage '/button style=' margin-top : 40 rpx；'Bindtap='insertData '插入数据/按钮输入样式=' margin-top : 40 rpx；'占位符='请输入记录id ' value=' { { recordid } } ' bind input=' bindkinput tid '/button style=' margin-top : 40 rpx；'Bindtap='queryData '查询数据/buttontextstyle=' margin-top : 40 rpx；'名称：{ { name result } }/text style=' margin-top : 80 rpx；'Age: {{ageResult}} /text/view在main.wxml文件中，有三个输入组件和两个文本组件。这五个组件绑定了五个变量：年龄、姓名、记录标识、姓名结果和年龄结果，修改和获取这五个组件的值只需要考虑这五个变量。

在小程序中调用云API之前，必须获取小程序的openid，它代表当前小程序的用户id。由于进入小程序必须通过微信，小程序使用与微信相同的用户认证系统，因此小程序不需要单独登录，openid是小程序是否登录的证明。

获取openid的代码已经包含在模板中。只需找到index.js文件，搜索onGetOpenid函数，就会看到下面的代码。

OnGetOpenid: function() {//调用云函数wx . cloud . call function({ name : ' log in '，data: {}，success 3360 RES={ console . log '[cloud function][log in]user OpenID 3360 '，RES . result . OpenID)app . globaldata . OpenID=RES . result . OpenID wx . navigatto({ URL : './userConsole/userConsole '，}) }，fail : err={ console . error('[cloud function][log in]调用失败'，err)wx . navigatetto({ URL : './deployfunctions/deployfunctions '，})}}上面的代码用于调用名为login的云函数，获取小程序的openid。通常，您只需要将onGetOpenid函数中的代码直接复制到main.js文件中的onLoad函数中。

将数据插入云数据库的代码之前已经学过，后面可以看到这个例子的完整代码。以下代码可用于查询云数据库中的数据。

db.collection(集合名称)中的完整实现代码。单据(记录标识)。get({//发现数据后触发，res参数值包含数据成功：function(res) {}，//失败： function (RES) {}) main.js如下：

//mini program/pages/main/main . jsconstapp=getapp()page(初始数据为{/* * * page */db:undefined，test3360undefined，data: {name3360 ' '，age: ' '，recordId: ' '，name result : ' ' }，/* * *生命周期函数-监控页面加载*/onload:函数(选项){ var=this//调用login cloud函数来获取open./deployFunctions/deployFunctions '，})})}，//单击“插入数据”按钮调用函数insertdata:function () {var那=thitry {//将age转换为整数值var age=parseint(那。data . age)//如果输入的年龄不是数字，将显示错误对话框。如果(isNaN(age)) {//显示错误对话框wx.showModal({ title:' error '，content: '请输入正确的age '，Show cancel: false})返回}//将记录this.test.add添加到测试数据集中({//数据字段指示JSON数据data : { name 3360 that . data . name，age:age})。//数据插入成功。调用函数success:函数(RES){ console . log(RES)wx . show modal({ title : ' success '，content: '记录插入成功'，Showcancel: false})该. setdata ({name: ' '，age : ' ' })} } catch(e){ wx . show modal({ title : ' error '，content: e.message，showCancel: false }) }，}文档(this.data.recorded)。在找到记录集时获取({//Invoke success : function(RES){//在页面上显示查询结果，该页面包含. setdata({ name result : RES . data . name，ageresult3360res.data.age})}，//调用fail : function(RES){ wx . show modal({ title : ' error '，content: '未找到记录'，showcancel : false})})，//以下函数用于绑定键输入名称： function(e){ this . setdata({ name 3360 e . detail . value })}。bindkeyinputtag e : function(e){ this . setdata({ age : e . detail . value })}，bindkeyinput tid : function(e){ this . setdata({ recordid : e . detail . value })}，})现在再次运行小程序，添加一些数据，在云开发控制台中可以看到测试集下还有几条记录，如下图所示。这表明数据已成功插入测试集合。