獲取小程序數(shù)據(jù)庫

• 前言
• 一、微信小程序Web SDK
• • 1.微信官方示例
  • 2.未登錄模式注意事項
• 二、完整流程演示
• • 1.開啟云數(shù)據(jù)庫訪問權限
  • 2.編寫云函數(shù)
  • 3.web前端引入js
  • 4.web頁面js訪問數(shù)據(jù)庫
  • • （1）setTimeout 做延遲（不推薦）
    • （2）回調(diào)函數(shù)
    • （3）await （推薦）
    • （4）對數(shù)據(jù)庫增刪改
• 三、Vue的使用方法
• • （1）引入
  • （2）掛載到Vue原型上
  • （3）組件里調(diào)用
• 四、可能遇到的問題

---

前言

小程序使用的是云數(shù)據(jù)庫，開發(fā)完成后要做一個web端的后臺系統(tǒng)
使用Web SDK 可以調(diào)用小程序的云函數(shù)，實現(xiàn)對數(shù)據(jù)庫的增刪改查等操作

---

一、微信小程序Web SDK

Web SDK 在 Web 中使用，可以訪問云開發(fā)資源，既支持公眾號登錄態(tài)、也支持未登錄模式。

詳細信息可以看這里->鏈接: 微信開發(fā)文檔SDK

1.微信官方示例

// 聲明新的 cloud 實例 var c1 = new cloud.Cloud({// 必填，表示是未登錄模式identityless: true,// 資源方 AppIDresourceAppid: 'wxe0e2656d74f0bff3',// 資源方環(huán)境 IDresourceEnv: 'test-f96b31', })// 跨賬號調(diào)用，必須等待 init 完成 // init 過程中，資源方小程序?qū)h(huán)境下的 cloudbase_auth 函數(shù)會被調(diào)用，并需返回協(xié)議字段（見下）來確認允許訪問、訪問時長以及可自定義安全規(guī)則 await c1.init()// 完成后正常使用資源方的已授權的云資源 c1.callFunction({name: '',data: {},complete: console.warn, })

2.未登錄模式注意事項

1.出于安全考慮，云環(huán)境默認不支持未登錄下訪問，需首先在 ”云開發(fā)控制臺 - 設置 - 全局設置/權限設置“ 中開啟（需開發(fā)者工具 1.03.2006042 或以上）
2.未登錄模式必須搭配安全規(guī)則使用，若數(shù)據(jù)庫、存儲的權限設置為簡易權限配置而不是安全規(guī)則配置，未登錄用戶將無法訪問云資源
3.在未登錄模式訪問時，安全規(guī)則的 auth 變量將為空，可以以此判斷未登錄請求

二、完整流程演示

1.開啟云數(shù)據(jù)庫訪問權限

微信開發(fā)者工具->云開發(fā)控制臺->設置->權限設置

2.編寫云函數(shù)

提前在云數(shù)據(jù)庫建一個表：history
云函數(shù)名字getListYes，作用是取出表數(shù)據(jù)
環(huán)境ID填你自己的，記得部署云函數(shù)！！！

// 云函數(shù)入口文件 const cloud = require('wx-server-sdk')cloud.init({//環(huán)境 IDenv:"cloud1-123123123123test" })// 云函數(shù)入口函數(shù) exports.main = async (event, context) => {//history是我要取出的表名字return cloud.database().collection('history').get({success(res){return res //查詢成功返回數(shù)據(jù)},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訪問數(shù)據(jù)庫

必須先初始化再調(diào)用云函數(shù)
AppID和環(huán)境ID都要填自己的

（1）setTimeout 做延遲（不推薦）

// 聲明新的 cloud 實例 var c1 = new cloud.Cloud({// 必填，表示是未登錄模式identityless: true,// 資源方 AppID 填自己的resourceAppid: 'wx09c28499e16d592e',// 資源方環(huán)境 ID 填自己的resourceEnv: 'cloud1-123123123123test', }) //初始化 c1.init() //初始化執(zhí)行完再調(diào)用 setTimeout(() => {// 完成后正常使用資源方的已授權的云資源c1.callFunction({name: 'getListYes', //調(diào)用的云函數(shù)名字success(res){console.log(res)}}) }, 1000);

（2）回調(diào)函數(shù)

//初始化 first = function(callback){var c1 = new cloud.Cloud({//必填，表示是未登錄模式identityless: true,//資源方 AppIDresourceAppid: 'wx09c28499e16d592e',//資源方環(huán)境 IDresourceEnv: 'cloud1-123123123123test',})c1.init()//回調(diào)callback(c1) } //回調(diào)使用云函數(shù)查詢云數(shù)據(jù)庫 callback = function(c1){//完成后正常使用資源方的已授權的云資源c1.callFunction({name: 'getListYes', //調(diào)用的云函數(shù)名字success(res){console.log(res)}}) } first(callback)

（3）await （推薦）

vue 演示

// 獲取數(shù)據(jù)async getData() {// 聲明新的 cloud 實例var c1 = new this.cloud.Cloud({// 必填，表示是未登錄模式identityless: true,// 資源方 AppID 填自己的resourceAppid: 'wx9abc542f0dxxxxxxx',// 資源方環(huán)境 ID 填自己的resourceEnv: 'cloud1-5gg2oc6zxxxxxxx',})//初始化await c1.init()//初始化執(zhí)行完再調(diào)用// 完成后正常使用資源方的已授權的云資源c1.callFunction({name: 'getUser', //調(diào)用的云函數(shù)名字success: res => {console.log(res)}})},

在控制臺可以看到拿到數(shù)據(jù)了

（4）對數(shù)據(jù)庫增刪改

注意數(shù)據(jù)庫權限
編寫對應的云函數(shù)，不會寫的話百度微信云函數(shù)增刪改怎么做吧，這里演示一下云函數(shù)的增操作。
前端發(fā)送3個數(shù)據(jù)給云函數(shù)

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

云函數(shù)：webAddGongGao
拿到前端給的數(shù)據(jù)，存儲到表中

// 云函數(shù)入口文件 const cloud = require('wx-server-sdk')cloud.init({env:"cloud1-123123123123test" })// 云函數(shù)入口函數(shù) exports.main = async (event, context) => {cloud.database().collection('gongGao').add({data:{input:event.input, //前端傳的數(shù)據(jù) inputname:event.name, //前端傳的數(shù)據(jù) nametime:event.time //前端傳的數(shù)據(jù) 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）組件里調(diào)用

與js調(diào)用方法不同點： new cloud.Cloud 改成 this.cloud.Cloud

created() {this.getData()},methods: {// 獲取數(shù)據(jù)async getData() {// 聲明新的 cloud 實例var c1 = new this.cloud.Cloud({// 必填，表示是未登錄模式identityless: true,// 資源方 AppID 填自己的resourceAppid: 'wx9abc542fxxxxxxx',// 資源方環(huán)境 ID 填自己的resourceEnv: 'cloud1-5gg2oc6xxxxxxx',})//初始化await c1.init()//初始化執(zhí)行完再調(diào)用// 完成后正常使用資源方的已授權的云資源c1.callFunction({name: 'getUser', //調(diào)用的云函數(shù)名字success: res => {console.log(res)}})},}

四、可能遇到的問題

1.環(huán)境ID和AppId都要改成自己的，照抄的朋友注意了
2.如果獲取不到數(shù)據(jù)，請查看數(shù)據(jù)庫的權限，改了以后要等一下再試
3.如果沒有報錯，麻煩看清楚，在回調(diào)加個 fail 函數(shù)就可以看到報錯了，一般都是云函數(shù)寫錯才會報錯的！

總結(jié)

以上是生活随笔為你收集整理的web端获取微信小程序云数据库数据实现增删改查等操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。