【笔记】mpvue+云开发（文档摘录）

上手云数据库 | 微信开放文档

一、搭建开发环境

1.注册一个小程序账户

微信公众平台

在 设置&＃61;>基本设置 中找到 AppID(小程序ID)

2.用mpvue初始化一个项目

使用手册 | mpvue.com

# 全局安装 vue-cli
$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev


3.启动项目

启动微信开发者工具&＃xff0c;引入项目&＃xff0c;预览 mpvue 小程序。

使用云开发之前&＃xff0c;先了解一下云开发的资源环境&＃xff1a;资源环境 | 微信开放文档

一个环境对应一整套独立的云开发资源&＃xff0c;包括数据库、存储空间、云函数等资源。各个环境是相互独立的&＃xff0c;用户开通云开发后即创建了一个环境&＃xff0c;默认可拥有最多两个环境。在实际开发中&＃xff0c;建议每一个正式环境都搭配一个测试环境&＃xff0c;所有功能先在测试环境测试完毕后再上到正式环境。

为了方便开发者调试&＃xff0c;从开发者工具 1.02.1905302 及基础库 2.7.1 起&＃xff0c;在 wx.cloud.init 后会在调试器中输出 SDK 中所使用的默认环境;同时&＃xff0c;在 Network 面板中会输出各个云开发操作的请求详情&＃xff0c;其中包括该调用所请求的环境 ID

二、使用云数据库

1.简单介绍

数据库 | 微信开放文档

云开发提供了一个 JSON 数据库&＃xff0c;顾名思义&＃xff0c;数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合&＃xff08;相当于关系型数据中的表&＃xff09;&＃xff0c;集合可看做一个 JSON 数组&＃xff0c;数组中的每个对象就是一条记录&＃xff0c;记录的格式是 JSON 对象。

关系型数据库和 JSON 数据库的概念对应关系如下表&＃xff1a;

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

每条记录都有一个 _id 字段用以唯一标志一条记录、一个 _openid 字段用以标志记录的创建者&＃xff0c;即小程序的用户。需要特别注意的是&＃xff0c;在管理端&＃xff08;控制台和云函数&＃xff09;中创建的不会有 _openid 字段&＃xff0c;因为这是属于管理员创建的记录。开发者可以自定义 _id&＃xff0c;但不可自定义和修改 _openid 。_openid 是在文档创建时由系统根据小程序用户默认创建的&＃xff0c;开发者可使用其来标识和定位文档。

数据库 API 分为小程序端和服务端两部分&＃xff0c;小程序端 API 拥有严格的调用权限控制&＃xff0c;开发者可在小程序内直接调用 API 进行非敏感数据的操作。对于有更高安全要求的数据&＃xff0c;可在云函数内通过服务端 API 进行操作。云函数的环境是与客户端完全隔离的&＃xff0c;在云函数上可以私密且安全的操作数据库。

数据库 API 包含增删改查的能力&＃xff0c;使用 API 操作数据库只需三步&＃xff1a;获取数据库引用、构造查询/更新条件、发出请求。

2.开始使用

• 小程序使用云开发必须有小程序APPID才能使用&＃xff0c;so填写刚刚注册的小程序的APPID
• 打开云开发控制台&＃xff0c;创建云数据库&＃xff0c;并创建一个集合&＃xff0c;添加一些数据
  

数据可以手动插入&＃xff0c;也可以从外部导入&＃xff1a;数据库导入 | 微信开放文档

• 为了开发方便&＃xff0c;开放权限&＃xff1a;
  
• 在src下的app.json中加入"cloud": true
• 在src/main.js内加入

mpvue.cloud.init({env: &＃39;你的云数据库环境ID&＃39;,traceUser: true
})


• 然后就可以使用云数据库啦&＃xff08;初始化 | 微信开放文档&＃xff09;

// 定义db对象&＃xff08;这步是必须的&＃xff09;
const db &＃61; mpvue.cloud.database({env: &＃39;云数据库环境ID&＃39;
})
// 定义所要操作的集合
const user &＃61; db.collection(&＃39;user&＃39;)


• 插入数据 | 微信开放文档

// 新增数据
db.collection(&＃39;todos&＃39;).add({// data 字段表示需新增的 JSON 数据data: {},success: function(res) {// res 是一个对象&＃xff0c;其中有 _id 字段标记刚创建的记录的 idconsole.log(res)}
})


• 查询数据 | 微信开放文档

// 读取数据
db.collection(&＃39;test&＃39;).get({success(res) {// res.data 包含该记录的数据console.log(res.data)}
}).then(res &＃61;> {// 可以进行数据初始化
})


• 指令 | 微信开放文档
• 更新数据 | 微信开放文档
• 删除数据 | 微信开放文档
• 查询、更新数组/嵌套对象 | 微信开放文档
• 联表查询 | 微信开放文档
• 实时数据推送 | 微信开放文档
• 地理位置 | 微信开放文档
• 聚合 | 微信开放文档
• 事务 | 微信开放文档
• 索引管理 | 微信开放文档
• 数据库导入 | 微信开放文档
• 数据库备份与回档 | 微信开放文档

三、使用云函数

1.简单介绍

云函数是一段运行在云端的代码&＃xff0c;无需管理服务器&＃xff0c;在开发工具内编写、一键上传部署即可运行后端代码。

小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文&＃xff08;appid、openid 等&＃xff09;&＃xff0c;无需维护复杂的鉴权机制&＃xff0c;即可获取天然可信任的用户登录态&＃xff08;openid&＃xff09;。

接下来我们使用官方提供的例子&＃xff1a;

2.配置云函数根目录

在/src目录下创建目录funtions作为云函数的本地根目录&＃xff0c;然后在project.config.json文件下新增字段

{"cloudfunctionRoot": "/src/functions/"
}


完成指定之后&＃xff0c;云函数的根目录的图标会变成 “云目录图标”&＃xff0c;云函数根目录下的第一级目录&＃xff08;云函数目录&＃xff09;是与云函数名字相同的&＃xff0c;如果对应的线上环境存在该云函数&＃xff0c;则我们会用一个特殊的 “云图标” 标明

3.新增云函数

• 右击functions文件夹&＃xff0c;新建Node.js云函数add
• 在云函数add的根目录下运行cnpm i安装依赖
  
• 打开index.js可以看到如下内容&＃xff1a;

// 云函数入口文件
const cloud &＃61; require(&＃39;wx-server-sdk&＃39;)cloud.init()// 云函数入口函数
exports.main &＃61; async (event, context) &＃61;> {const wxContext &＃61; cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}


云函数的传入参数有两个&＃xff0c;一个是 event 对象&＃xff0c;一个是 context 对象。

• event 指的是触发云函数的事件&＃xff0c;当小程序端调用云函数时&＃xff0c;event 就是小程序端调用云函数时传入的参数&＃xff0c;外加后端自动注入的小程序用户的 openid 和小程序的 appid。
• context 对象包含了此处调用的调用信息和运行状态&＃xff0c;可以用它来了解服务运行的情况。
• 在模板中也默认 require 了 wx-server-sdk&＃xff0c;这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库。

• 修改云函数的返回值&＃xff1a;

// ...
exports.main &＃61; async (event, context) &＃61;> {// ...return {sum: event.a &＃43; event.b}
}


• 本地调试的话&＃xff1a;在云函数目录上右键&＃xff0c;开启云函数本地调试
• 云端调试的话&＃xff1a;在云函数目录上右键&＃xff0c;上传并部署&＃xff1a;云端安装依赖
  
• 部署完成后&＃xff0c;在小程序中调用该云函数&＃xff1a;

mpvue.cloud.callFunction({// 云函数名称name: &＃39;add&＃39;,// 传给云函数的参数data: {a: 1,b: 2,},success: function(res) {console.log(res.result.sum) // 3},fail: console.error
})


• 也可以使用Promise 风格的调用&＃xff1a;

mpvue.cloud.callFunction({// 云函数名称name: &＃39;add&＃39;,// 传给云函数的参数data: {a: 1,b: 2,},
})
.then(res &＃61;> {console.log(res.result) // 3
})
.catch(console.error)


在正式的开发中&＃xff0c;建议先在本地调试云函数通过后&＃xff0c;再上传部署云函数进行正式测试&＃xff0c;以保证线上发布的稳定性。

使用本地调试的方法是&＃xff1a;

• 编写如上云函数代码
• 对云函数目录右键&＃xff0c;选择 “启动云函数本地调试”
• 此时应该看到本地调试窗口打开&＃xff0c;同时该云函数的 tab 也已打开&＃xff0c;如果没有&＃xff0c;在左侧列表中选择该函数&＃xff0c;双击打开 tab
• 如果右侧的控制面板中的 “开启本地调试” 没有勾选&＃xff0c;勾选上&＃xff0c;勾选后会开启对该云函数的本地调试&＃xff0c;所有模拟器中的请求会请求到本地调试的云函数实例
• 在小程序模拟器中操作&＃xff0c;发起对该云函数的调用
• 此时云函数本地实例被触发&＃xff0c;可以进行断点等调试操作
  
  

四、使用云存储

1.简单介绍

云存储 | 微信开放文档

云开发提供了一块存储空间&＃xff0c;提供了上传文件到云端、带权限管理的云端下载能力&＃xff0c;开发者可以在小程序端和云函数端通过 API 使用云存储功能。

在小程序端可以分别调用 mpvue.cloud.uploadFile 和 mpvue.cloud.downloadFile 完成上传和下载云文件操作。

2.开始使用

上传文件

mpvue.cloud.uploadFile({cloudPath: &＃39;example.png&＃39;, // 上传至云端的路径filePath: &＃39;&＃39;, // 小程序临时文件路径success: res &＃61;> {// 返回文件 IDconsole.log(res.fileID)},fail: console.error
})


上传成功后会获得文件唯一标识符&＃xff0c;即文件 ID&＃xff0c;后续操作都基于文件 ID 而不是 URL。

下载文件

根据文件 ID 下载文件&＃xff0c;用户仅可下载其有访问权限的文件&＃xff1a;

mpvue.cloud.downloadFile({fileID: &＃39;&＃39;, // 文件 IDsuccess: res &＃61;> {// 返回临时文件路径console.log(res.tempFilePath)},fail: console.error
})


支持在 image、audio 等组件中传入云文件 ID

删除文件

mpvue.cloud.deleteFile({fileList: [&＃39;a7xzcb&＃39;],success: res &＃61;> {// handle successconsole.log(res.fileList)},fail: console.error
})


拓展&＃xff1a;

API 风格

• 云开发的 API 风格与框架组件和 API 风格一致&＃xff0c;但同时支持回调风格和Promise风格。在传入 API 的 Object 参数中&＃xff0c;如果传入了 success、fail、complete 字段&＃xff0c;则我们认为是采用回调风格&＃xff0c;API 方法调用不返回 Promise。如果传入 API 的 Object 参数中 success、fail、complete 这三个字段都不存在&＃xff0c;则我们认为是采用Promise风格&＃xff0c;API 方法调用返回一个 Promise&＃xff0c;Promise resolve 的结果同传入 success 回调的参数&＃xff0c;reject 的结果同传入 fail 的参数。

Cloud | 微信开放文档