外部web端訪(fǎng)問(wèn)微信小程序云數(shù)據(jù)庫(kù)的三種方法總結(jié)
前言
我當(dāng)前的項(xiàng)目是小程序開(kāi)發(fā),使用的是云開(kāi)發(fā)方式,那么這時(shí)涉及到了小程序端提交的數(shù)據(jù)會(huì)保存到云數(shù)據(jù)庫(kù)中,可是呢這些個(gè)數(shù)據(jù)要被外部訪(fǎng)問(wèn)用來(lái)管理,也就是還得弄一個(gè)管理后臺(tái)界面管理這些數(shù)據(jù)。那就需要拿到云數(shù)據(jù)庫(kù)里面的數(shù)據(jù)啦,下面就是對(duì)如何拿到云數(shù)據(jù)庫(kù)里面的數(shù)據(jù)的訪(fǎng)問(wèn)方式的描述
看到評(píng)論表示看不懂,不知道具體怎么用,決定再做補(bǔ)充
注意:下面的三種方法中第一、第三種方法會(huì)存在跨域問(wèn)題,沒(méi)有具體實(shí)現(xiàn),當(dāng)是我在開(kāi)發(fā)的時(shí)候是用配置代理的方式,但是線(xiàn)上環(huán)境是沒(méi)有辦法設(shè)置代理的,
所以我選擇了第二種方式,
重點(diǎn)補(bǔ)充第二點(diǎn)的具體用法
一、HTTP API 方式
微信小程序文檔中的云開(kāi)發(fā)部分有特別說(shuō)明了,HTTP API的調(diào)用方式,這里貼上鏈接HTTP API
下面來(lái)看看具體是怎么使用的
1、web端調(diào)用云函數(shù)
微信開(kāi)放文檔中說(shuō)明了,web端調(diào)用云函數(shù)的方式:
文檔說(shuō)明了,如果要觸發(fā)云函數(shù)就要調(diào)用上面紅色框住的鏈接。但是有一點(diǎn),需要拿到access_token的值
獲取access_token的值:
以上就是獲取憑證的調(diào)用鏈接。
具體到代碼里的使用:
在代碼里直接按平時(shí)我們請(qǐng)求接口的方式調(diào)用,
下面來(lái)看看打印結(jié)果:
可以看到這里報(bào)錯(cuò)了,這個(gè)跨域的問(wèn)題。
嘗試了一種解決方案,代理
在配置文件里加上代理。
最后請(qǐng)求獲取access_token會(huì)變成這樣
原來(lái)的域名換成了api代替。
看看打印結(jié)果:
已經(jīng)拿到了access_token
現(xiàn)在可以用這個(gè)獲取到的accesss_token來(lái)調(diào)云函數(shù)了。
這種方式因?yàn)槭窃L(fǎng)問(wèn)鏈接的方式,會(huì)存在跨域訪(fǎng)問(wèn)的問(wèn)題,如果項(xiàng)目上線(xiàn)了要做跨域處理。
注意:不管是post方式還是get方式,都不能把鏈接后帶的參數(shù)提出來(lái),只能拼接在后面哦,如果是要傳自己的參數(shù)就可以用對(duì)象方式傳。不然訪(fǎng)問(wèn)時(shí)會(huì)得不到想要的結(jié)果
二、Web SDK 在 Web 中使用
1.Web SDK 在 Web 中使用,可以訪(fǎng)問(wèn)云開(kāi)發(fā)資源,既支持公眾號(hào)登錄態(tài)、也支持未登錄模式。
補(bǔ)充:這里我用紅色標(biāo)注了,要特別注意
要在外部訪(fǎng)問(wèn)云開(kāi)發(fā)資源,除了公眾號(hào)支持登錄態(tài),其他地方訪(fǎng)問(wèn)是不支持登錄態(tài)訪(fǎng)問(wèn)的,得用未登錄態(tài)模式(這里涉及到安全規(guī)則)
這里粘上鏈接未登錄模式下訪(fǎng)問(wèn)云開(kāi)發(fā)資源
那安全規(guī)則怎么設(shè)置?
這里貼上步驟
1、打開(kāi)開(kāi)發(fā)中工具 》 云開(kāi)發(fā) 》這時(shí)會(huì)打開(kāi)云開(kāi)發(fā)控制臺(tái)。
設(shè)置好未登錄態(tài)后,具體怎么訪(fǎng)問(wèn)步驟
訪(fǎng)問(wèn)鏈接:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/web/sdk.html
可以看到 微信描述的怎么訪(fǎng)問(wèn),
1、找到底部cdn地址,下載拷貝下來(lái)。
2、將拷貝下來(lái)的cdn文件放到項(xiàng)目中,在項(xiàng)目入口文件中引入,作為公共使用。
import "../../common/cloud/cloud.js";
這時(shí)window對(duì)象下面會(huì)掛載一個(gè)cloud對(duì)象, 我在我的項(xiàng)目中初始化cloud對(duì)象,在app.vue文件中寫(xiě)入下面方法,并調(diào)用,我在created方法中調(diào)用下面的fun方法,并將已授權(quán)對(duì)象保存為公用對(duì)象store中。
async function fun() { // 聲明新的 cloud 實(shí)例 var c1 = new cloud.Cloud({ // 必填,表示是未登錄模式 identityless: true, // 資源方 AppID resourceAppid: '小程序appid', // 資源方環(huán)境 ID resourceEnv: '云開(kāi)發(fā)環(huán)境id', }) await c1.init( { appid: '小程序appid', env: '云開(kāi)發(fā)環(huán)境id' } ) this.$store.commit('initCloud', c1 || ''); }
3、如何調(diào)用這個(gè)對(duì)象呢?
當(dāng)項(xiàng)目中某個(gè)頁(yè)面需要拿數(shù)據(jù)庫(kù)的數(shù)據(jù)。調(diào)用保存的cloud對(duì)象中的callFunction方法,該方法可以調(diào)用我們自己在小程序中定義的云函數(shù),至于這個(gè)云函數(shù)要怎么寫(xiě),怎么定義就要自己去看小程序開(kāi)發(fā)檔中云開(kāi)發(fā)的知識(shí)了。這里只講怎么從外部訪(fǎng)問(wèn)小程序云數(shù)據(jù)庫(kù)。
// 調(diào)用云函數(shù)編輯 let $this = this; this.$store.state.cloud.callFunction({ name: 'addPartyMember', data: params, success: res => { // res 就是重云函數(shù)中拿到的數(shù)據(jù),這里里面含有云函數(shù)處理云數(shù)據(jù)庫(kù)的結(jié)果 let result = res.result.dbresult; if (result.stats) { $this.$message({ type: 'success', message: '操作成功' }) } }, fail: err => { $this.$message.error('失敗') } })
注意這種未登錄模式下好像不能直接訪(fǎng)問(wèn)云數(shù)據(jù)庫(kù),只能通過(guò)訪(fǎng)問(wèn)云函數(shù)間接操作數(shù)據(jù)庫(kù)
補(bǔ)充結(jié)束,這是我在項(xiàng)目中的具體實(shí)現(xiàn),如果有更好方法一起交流哦?。。?/p>
2、使用騰訊云里的方法
這里直接粘上鏈接web使用 JavaScript 訪(fǎng)問(wèn) Cloudbase 服務(wù)和資源。 文檔很清楚
總結(jié)
到此這篇關(guān)于外部web端訪(fǎng)問(wèn)微信小程序云數(shù)據(jù)庫(kù)的三種方法的文章就介紹到這了,更多相關(guān)外部web端訪(fǎng)問(wèn)小程序云數(shù)據(jù)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
權(quán)威JavaScript 中的內(nèi)存泄露模式
權(quán)威JavaScript 中的內(nèi)存泄露模式...2007-08-08JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析
在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析,有需要的朋友們學(xué)習(xí)下。2019-01-01JavaScript 最佳實(shí)踐:幫你提升代碼質(zhì)量
在本篇教程中,我將指出一些重要的 JavaScript 最佳實(shí)踐,讓你不必去用另外一種艱難的方式來(lái)了解它們。準(zhǔn)備好去升級(jí)你的代碼吧2016-12-12Typescript協(xié)變與逆變簡(jiǎn)單理解
深入學(xué)習(xí)TypeScript類(lèi)型系統(tǒng)的話(huà),逆變、協(xié)變、雙向協(xié)變、不變是繞不過(guò)去的概念。這些概念看起來(lái)挺高大上的,其實(shí)并不復(fù)雜,這篇文章我們就來(lái)學(xué)習(xí)下協(xié)變和逆變吧2022-10-10JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
這篇文章主要介紹了JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示的方法,用到了HTML5中的FileReader API和getImageData,轉(zhuǎn)換為的CSS3 box-shadow也要注意瀏覽器的兼容問(wèn)題,需要的朋友可以參考下2016-03-03Javascript 計(jì)算字符串在localStorage中所占字節(jié)數(shù)
本文給大家分享的是使用Javascript 計(jì)算字符串在localStorage中所占字節(jié)數(shù),分別對(duì)UTF-8和UTF-16兩種編碼進(jìn)行了詳細(xì)說(shuō)明,有需要的小伙伴可以參考下。2015-10-10JavaScript?評(píng)測(cè)代碼運(yùn)行速度的案例代碼
在?JavaScript?中,可以使用?performance.now()?API?來(lái)評(píng)測(cè)代碼的運(yùn)行速度。該?API?返回當(dāng)前頁(yè)面的高精度時(shí)間戳,您可以在代碼執(zhí)行前后調(diào)用它來(lái)計(jì)算代碼執(zhí)行所需的時(shí)間,這篇文章主要介紹了JavaScript?評(píng)測(cè)代碼運(yùn)行速度,需要的朋友可以參考下2023-02-02詳解基于webpack&gettext的前端多語(yǔ)言方案
這篇文章主要介紹了詳解基于webpack&gettext的前端多語(yǔ)言方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01