獲取小程序數據庫

• 前言
• 一、微信小程序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端获取微信小程序云数据库数据实现增删改查等操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。