获取小程序数据库

前言
一、微信小程序Web SDK
- 1.微信官方示例
- 2.未登录模式注意事项
二、完整流程演示
- 1.开启云数据库访问权限
- 2.编写云函数
- 3.web前端引入js
- 4.web页面js访问数据库
- - （1）setTimeout 做延迟（不推荐）
  - （2）回调函数
  - （3）await （推荐）
  - （4）对数据库增删改
三、Vue的使用方法
- （1）引入
- （2）挂载到Vue原型上
- （3）组件里调用
四、可能遇到的问题

前言

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

一、微信小程序Web SDK

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

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

1.微信官方示例

// 声明新的 cloud 实例
var c1 = new cloud.Cloud({// 必填，表示是未登录模式identityless: true,// 资源方 AppIDresourceAppid: 'wxe0e2656d74f0bff3',// 资源方环境 IDresourceEnv: '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({//环境 IDenv:"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,//资源方 AppIDresourceAppid: 'wx09c28499e16d592e',//资源方环境 IDresourceEnv: '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,            //前端传的数据 inputname:event.name,             //前端传的数据 nametime: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 函数就可以看到报错了，一般都是云函数写错才会报错的！

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

Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
外部web端访问微信小程序云数据库的几种方法
前言我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量想要实现的功能遇到的问题 js代码想要实现的功能界面代码 // An highlighted block <view cla ...
微信小程序云数据库定时清空（云函数定时触发）
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...
微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据
效果图小程序云开发分页加载代码  <view class="pageTitle">家 ...
微信小程序-云数据库开发
数据库增删查改数据库权限管理这相当于管理员权限,可以改到所有人可读. 查询get() 首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录其次,在app.js中写入以下代码 App( ...
微信小程序云数据库使用(上)
数据库写入创建集合 1.js文件 2.wxml 文件 3.wxss 文件有了一个小想法,向云数据库写入文本小故事,之后在读取故事. 数据库读取:https://blog.csdn.net/we ...

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