web端获取微信小程序云数据库数据实现增删改查等操作

---

前言

小程序使用的是云数据库，开发完成后要做一个web端的后台系统
使用Web SDK 可以调用小程序的云函数，实现对数据库的增删改查等操作

---

一、微信小程序Web SDK

Web SDK 在 Web 中使用，可以访问云开发资源，既支持公众号登录态、也支持未登录模式。

详细信息可以看这里->链接: 微信开发文档SDK

1.微信官方示例

// 声明新的 cloud 实例
var c1 = new cloud.Cloud({
  // 必填，表示是未登录模式
  identityless: true,
  // 资源方 AppID
  resourceAppid: 'wxe0e2656d74f0bff3',
  // 资源方环境 ID
  resourceEnv: 'test-f96b31',
})

// 跨账号调用，必须等待 init 完成
// init 过程中，资源方小程序对应环境下的 cloudbase_auth 函数会被调用，并需返回协议字段（见下）来确认允许访问、访问时长以及可自定义安全规则
await c1.init()

// 完成后正常使用资源方的已授权的云资源
c1.callFunction({
  name: '',
  data: {},
  complete: console.warn,
})

2.未登录模式注意事项

1.出于安全考虑，云环境默认不支持未登录下访问，需首先在 ”云开发控制台 - 设置 - 全局设置/权限设置“ 中开启（需开发者工具 1.03.2006042 或以上）
2.未登录模式必须搭配安全规则使用，若数据库、存储的权限设置为简易权限配置而不是安全规则配置，未登录用户将无法访问云资源
3.在未登录模式访问时，安全规则的 auth 变量将为空，可以以此判断未登录请求

二、完整流程演示

1.开启云数据库访问权限

微信开发者工具->云开发控制台->设置->权限设置

2.编写云函数

提前在云数据库建一个表：history
云函数名字getListYes，作用是取出表数据
环境ID填你自己的，记得部署云函数！！！

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  //环境 ID
  env:"cloud1-123123123123test"
})

// 云函数入口函数
exports.main = async (event, context) => {
  //history是我要取出的表名字
  return cloud.database().collection('history').get({
    success(res){
      return res          //查询成功返回数据
    },
    fail(err){
      return err
    }
  })
}

3.web前端引入js

必须引入

<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js"></script> 

4.web页面js访问数据库

必须先初始化再调用云函数
AppID和环境ID都要填自己的

（1）setTimeout 做延迟（不推荐）

// 声明新的 cloud 实例
var c1 = new cloud.Cloud({
	// 必填，表示是未登录模式
	identityless: true,
	// 资源方 AppID 填自己的
	resourceAppid: 'wx09c28499e16d592e',
	// 资源方环境 ID	填自己的
	resourceEnv: 'cloud1-123123123123test',
})
//初始化
c1.init()
//初始化执行完再调用
setTimeout(() => {
	// 完成后正常使用资源方的已授权的云资源
	c1.callFunction({
		name: 'getListYes',             //调用的云函数名字
		success(res){
			console.log(res)
		}
	})
}, 1000);

（2）回调函数

//初始化
first = function(callback){
	var c1 = new cloud.Cloud({
		//必填，表示是未登录模式
		identityless: true,
		//资源方 AppID
		resourceAppid: 'wx09c28499e16d592e',
		//资源方环境 ID
		resourceEnv: 'cloud1-123123123123test',
	})
	c1.init()
	//回调
	callback(c1)
}
//回调使用云函数查询云数据库
callback = function(c1){
	//完成后正常使用资源方的已授权的云资源
	c1.callFunction({
		name: 'getListYes',             //调用的云函数名字
		success(res){
			console.log(res)
		}
	})
}
first(callback)

（3）await （推荐）

vue 演示

// 获取数据
    async getData() {
      // 声明新的 cloud 实例
      var c1 = new this.cloud.Cloud({
        // 必填，表示是未登录模式
        identityless: true,
        // 资源方 AppID 填自己的
        resourceAppid: 'wx9abc542f0dxxxxxxx',
        // 资源方环境 ID	填自己的
        resourceEnv: 'cloud1-5gg2oc6zxxxxxxx',
      })
      //初始化
      await c1.init()
      //初始化执行完再调用

      // 完成后正常使用资源方的已授权的云资源
      c1.callFunction({
        name: 'getUser',             //调用的云函数名字
        success: res => {
          console.log(res)
        }
      })
    },

在控制台可以看到拿到数据了

（4）对数据库增删改

注意数据库权限
编写对应的云函数，不会写的话百度微信云函数增删改怎么做吧，这里演示一下云函数的增操作。
前端发送3个数据给云函数

c1.callFunction({
        name:'webAddGongGao',
        data:{
            input:a,
            name:b,
            time:c
        },
        success(res){
        	console.log(res)      
        }
    })

云函数：webAddGongGao
拿到前端给的数据，存储到表中

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env:"cloud1-123123123123test"
})

// 云函数入口函数
exports.main = async (event, context) => {
  cloud.database().collection('gongGao').add({
    data:{
      input:event.input,            //前端传的数据 input
      name:event.name,				//前端传的数据 name
      time:event.time				//前端传的数据 time
    },success(){
      return "true"
    },fail(){
      return "false"
    }
  })
}

---

三、Vue的使用方法

太多人问了更新一下（2022，4.12）有其他问题的话，可以评论，我看到会解答

（1）引入

直接在 vue项目里 public/index.html 引入，必须在 <div id="app"> 标签前面

<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js"></script>

（2）挂载到Vue原型上

路径：src/main.js

const c = window.cloud
Vue.prototype.cloud = c

（3）组件里调用

与js调用方法不同点： new cloud.Cloud 改成 this.cloud.Cloud

created() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      // 声明新的 cloud 实例
      var c1 = new this.cloud.Cloud({
        // 必填，表示是未登录模式
        identityless: true,
        // 资源方 AppID 填自己的
        resourceAppid: 'wx9abc542fxxxxxxx',
        // 资源方环境 ID	填自己的
        resourceEnv: 'cloud1-5gg2oc6xxxxxxx',
      })
      //初始化
      await c1.init()
      //初始化执行完再调用

      // 完成后正常使用资源方的已授权的云资源
      c1.callFunction({
        name: 'getUser',             //调用的云函数名字
        success: res => {
         console.log(res)
        }
      })
    },
 }

四、可能遇到的问题

1.环境ID和AppId都要改成自己的，照抄的朋友注意了
2.如果获取不到数据，请查看数据库的权限，改了以后要等一下再试
3.如果没有报错，麻烦看清楚，在回调加个 fail 函数就可以看到报错了，一般都是云函数写错才会报错的！