快捷導(dǎo)航

外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結(jié)

更新時間：2022年04月25日 09:39:41 作者：菜小黑

最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關(guān)于外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

我當(dāng)前的項目是小程序開發(fā)，使用的是云開發(fā)方式，那么這時涉及到了小程序端提交的數(shù)據(jù)會保存到云數(shù)據(jù)庫中，可是呢這些個數(shù)據(jù)要被外部訪問用來管理，也就是還得弄一個管理后臺界面管理這些數(shù)據(jù)。那就需要拿到云數(shù)據(jù)庫里面的數(shù)據(jù)啦，下面就是對如何拿到云數(shù)據(jù)庫里面的數(shù)據(jù)的訪問方式的描述

看到評論表示看不懂，不知道具體怎么用，決定再做補充
注意：下面的三種方法中第一、第三種方法會存在跨域問題，沒有具體實現(xiàn)，當(dāng)是我在開發(fā)的時候是用配置代理的方式，但是線上環(huán)境是沒有辦法設(shè)置代理的，
所以我選擇了第二種方式，
重點補充第二點的具體用法

一、HTTP API 方式

微信小程序文檔中的云開發(fā)部分有特別說明了，HTTP API的調(diào)用方式，這里貼上鏈接HTTP API

下面來看看具體是怎么使用的

1、web端調(diào)用云函數(shù)

微信開放文檔中說明了，web端調(diào)用云函數(shù)的方式：

文檔說明了，如果要觸發(fā)云函數(shù)就要調(diào)用上面紅色框住的鏈接。但是有一點，需要拿到access_token的值

獲取access_token的值：

微信開放文檔原鏈接

以上就是獲取憑證的調(diào)用鏈接。

具體到代碼里的使用：

在代碼里直接按平時我們請求接口的方式調(diào)用，

下面來看看打印結(jié)果：

可以看到這里報錯了，這個跨域的問題。

嘗試了一種解決方案，代理

在配置文件里加上代理。

最后請求獲取access_token會變成這樣

原來的域名換成了api代替。

看看打印結(jié)果：

已經(jīng)拿到了access_token

現(xiàn)在可以用這個獲取到的accesss_token來調(diào)云函數(shù)了。

這種方式因為是訪問鏈接的方式，會存在跨域訪問的問題，如果項目上線了要做跨域處理。

注意：不管是post方式還是get方式，都不能把鏈接后帶的參數(shù)提出來，只能拼接在后面哦，如果是要傳自己的參數(shù)就可以用對象方式傳。不然訪問時會得不到想要的結(jié)果

二、Web SDK 在 Web 中使用

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

補充：這里我用紅色標注了，要特別注意

要在外部訪問云開發(fā)資源，除了公眾號支持登錄態(tài)，其他地方訪問是不支持登錄態(tài)訪問的，得用未登錄態(tài)模式（這里涉及到安全規(guī)則）

這里粘上鏈接未登錄模式下訪問云開發(fā)資源

那安全規(guī)則怎么設(shè)置？

這里貼上步驟

1、打開開發(fā)中工具》云開發(fā) 》這時會打開云開發(fā)控制臺。

設(shè)置好未登錄態(tài)后，具體怎么訪問步驟

訪問鏈接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/web/sdk.html

可以看到微信描述的怎么訪問，

1、找到底部cdn地址，下載拷貝下來。

2、將拷貝下來的cdn文件放到項目中，在項目入口文件中引入，作為公共使用。

import "../../common/cloud/cloud.js";

這時window對象下面會掛載一個cloud對象，我在我的項目中初始化cloud對象，在app.vue文件中寫入下面方法，并調(diào)用，我在created方法中調(diào)用下面的fun方法，并將已授權(quán)對象保存為公用對象store中。

 async function fun() {
// 聲明新的 cloud 實例
 var c1 =  new cloud.Cloud({
// 必填，表示是未登錄模式
 identityless: true,
// 資源方 AppID
 resourceAppid: '小程序appid',
// 資源方環(huán)境 ID
    resourceEnv: '云開發(fā)環(huán)境id',
 })
await c1.init(
{
appid: '小程序appid',
env: '云開發(fā)環(huán)境id'
}
)
this.$store.commit('initCloud', c1 || '');
}

3、如何調(diào)用這個對象呢？

當(dāng)項目中某個頁面需要拿數(shù)據(jù)庫的數(shù)據(jù)。調(diào)用保存的cloud對象中的callFunction方法，該方法可以調(diào)用我們自己在小程序中定義的云函數(shù)，至于這個云函數(shù)要怎么寫，怎么定義就要自己去看小程序開發(fā)檔中云開發(fā)的知識了。這里只講怎么從外部訪問小程序云數(shù)據(jù)庫。

// 調(diào)用云函數(shù)編輯
let $this = this;
this.$store.state.cloud.callFunction({
name: 'addPartyMember',
data: params,
success: res => {
// res 就是重云函數(shù)中拿到的數(shù)據(jù)，這里里面含有云函數(shù)處理云數(shù)據(jù)庫的結(jié)果
	let result = res.result.dbresult;
	if (result.stats) {
		$this.$message({
			type: 'success',
			message: '操作成功'
		})
	}
},
fail: err => {
	$this.$message.error('失敗')
}
})