Taro + 微信云服务实战用法举例（附源码）

本文主要是介绍Taro + 微信云服务实战用法举例（附源码），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Taro + 微信云服务实战用法举例（vue）

云服务配置
使用云函数
云存储

由于网上有关Taro框架使用微信云服务并没有太多教程，花费我很多时间，于是写下本博客。有什么问题欢迎提出。
项目源代码见：1.1.0版本涉及到本博客代码

为了将数据存储到云端服务器，而不仅仅是本地缓存，学习了微信云服务的相关用法

云服务配置

首先在开发者工具界面点击云开发，开通微信云服务
在这里插入图片描述
在设置界面可以获取到环境ID：

在这里插入图片描述
为项目配置云环境，要在project.config.json中添加"cloudfunctionRoot": "cloud/",这里的cloud就是云函数所在的文件夹：

project.config.json：

使用云函数

为了将数据为每个用户保存在云端，需要先获取openid，于是先创建一个云函数（此处省略配置文件）来获取openid

在微信开发者工具中新建云函数：
在这里插入图片描述
编写index.js文件：

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event, context) => {console.log(event)console.log(context)// 可执行其他自定义逻辑// console.log 的内容可以在云开发云函数调用日志查看// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

openid即是需要获取的内容，为了启动云服务，还需要再app.js中的生命周期函数中启动云服务

mounted() {if (process.env.TARO_ENV === 'weapp') {Taro.cloud.init({env: '填写自己的云环境ID',traceUser: true})}
},

通过学习Taro的API文档，学习调用云函数的方法：

callFunction调用云函数，参考文档。

getUserContext: async function () {await Taro.cloud.callFunction({name: 'login',data: {},}).then(res => {this.openId = res.result['openid']this.getData(this.openId)})
},

注意：这里name要填写云函数的名字，之前获取不到ID，在这里卡了很久

云存储

相关文档参考自Taro API，部分用法官方API介绍不详细，通过查看node_modules中Taro API的注释来使用：Taro文档

数据保存在这里：
在这里插入图片描述
云端获取数据：

    // 获取云服务器的数据getData: async function (openId) {const result = await this.db.collection('tasks').where({_openid: openId}).get()for (let i = 0; i < result.data.length; i++) {this.todos.push(result.data[i])}console.log(this.todos)},

云端更新数据：

changeState: function (todo) {todo.completed = !todo.completed// 更新数据库中的任务let task_id = this.todos[this.todos.indexOf(todo)]._idthis.db.collection('tasks').doc(task_id).update({data:{completed: todo.completed}})

云端添加数据：

  // 将数据存储到云服务器中this.db.collection('tasks').add({data: {title: value,completed: false,createTime: this.db.serverDate()}}).then(res => {console.log(res)})