生活随笔
收集整理的這篇文章主要介紹了
微信小程序访问云数据库
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?1.Copy官網測試代碼另保存Test.html ，修改APPID和ENVID
? ? ?公眾號使用云開發 / 極簡示例 / HTML | 微信開放文檔 (qq.com)
<html><head><title>云開發 Web 能力極簡示例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"><script>window.onerror = e => {alert('window error ' + e)}</script><!-- 調試用的移動端 console --><script src="https://cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();</script><!-- 公眾號 JSSDK --><script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><!-- 云開發 Web SDK --><script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script><script>// 公眾號基本信息：請修改下列字段使用本示例const WX_RESOURCE_APPID = 'wx****86c6e5aa1573' /* 資源方 AppID */const WX_RESOURCE_ENVID = 'test-****4qd6b2c3182' /* 資源方云開發環境 ID */const WX_OFFICIAL_ACCOUNT_APPID = 'wxaaaaaaaaaaaaaaaa'/* 公眾號 AppID */const WX_AUTH_TYPE = 'snsapi_base' /* 選擇需要的授權方式，snsapi_base 或 snsapi_userinfo */const WX_REDIRECT_URI = 'https://example.com/' /* 回調 URL */// 示例配置const isPersistLoginInfo = false // 是否需要保留登錄態信息到 window 中，只有 snsapi_userinfo 方式需要if (window.wx) {window.cloud = wx.cloud}var urlSearch = new URLSearchParams(location.search)var accessToken = urlSearch.get('access_token')var refreshToken = urlSearch.get('refresh_token')/*** 檢查/發起登錄* 1. 函數會檢查當前是否已登錄（checkLogin）* 2. 如果未登錄，會 10s 后自動發起登錄（startLogin）* 3. 如果已登錄，會初始化實例，使用指定的小程序云開發資源*/window.doLogin = async () => {try {const checkLoginOptions = {provider: 'OfficialAccount',appid: WX_OFFICIAL_ACCOUNT_APPID,}if (urlSearch.get('oauthredirect') === '1') {checkLoginOptions.accessToken = accessTokencheckLoginOptions.refreshToken = refreshToken}console.log(`checkLogin options: `, checkLoginOptions)const result = await cloud.checkLogin(checkLoginOptions)console.log(`checkLogin result: `, result)if (isPersistLoginInfo) {window.checkLoginRes = result}if (result.errCode === 0 && result.loggedIn) {console.log(`checkLogin success`)const instance = window.instance = new cloud.Cloud({appid: WX_OFFICIAL_ACCOUNT_APPID,resourceAppid: WX_RESOURCE_APPID,resourceEnv: WX_RESOURCE_ENVID,})const initResult = await instance.init()console.log(`instance inited`, initResult)console.log(`can use cloud instance to access resource now !`)const els = [...document.getElementsByClassName('display-none')]els.forEach(el => el.classList.remove('display-none'))} else {console.log(`checkLogin with sdk errCode ${result.errCode} errMsg ${result.errMsg}, will start oauth in 10s`)setTimeout(() => {try {cloud.startLogin({provider: 'OfficialAccount',appid: WX_OFFICIAL_ACCOUNT_APPID,scope: WX_AUTH_TYPE,redirectUri: WX_REDIRECT_URI,})} catch (e) {console.error(`startLogin fail: ${e}`)console.warn(`will start OfficialAccount OAuth login in 10s.`)}}, 10000)}} catch (e) {console.error(e)}}/*** 獲取用戶信息的示例* 1. 需在登錄后調用* 2. 網頁授權的方式需為 snsapi_userinfo* 3. 從 checkLogin 結果中獲取用戶信息 cloudID（已在 doLogin 函數中先暫存到全局變量 checkLoginRes）* 4. 調用云函數換取 cloudID 信息*/window.getUserInfo = async () => {if (!checkLoginRes) throw new Error('獲取登錄信息失敗，請確認授權方式以及是否保存了登錄信息')try {if (checkLoginRes.cloudID) {const res = await instance.callFunction({name: 'echo',data: {userInfoData: new instance.CloudID(checkLoginRes.cloudID),},})const cloudData = res.result.userInfoDataif (cloudData.data) {const userInfoImg = document.querySelector('#userinfo .avatar')userInfoImg.src = cloudData.data.avatarUrlconst userInfoName = document.querySelector('#userinfo .name')userInfoName.innerText = cloudData.data.nickNameconst userInfoOpenID = document.querySelector('#userinfo .openid')userInfoOpenID.innerText = cloudData.data.openIdconst userInfoDiv = document.getElementById('userinfo')userInfoDiv.style.cssText = ''} else {console.warn(`cloudID data error: `, cloudData)alert(`cloudID 信息獲取錯誤，請查看調試器報錯信息`)}} else {alert(`找不到 cloudID，請確認網頁授權方式為 snsnapi_userinfo`)}} catch (e) {console.error(`error: ${e} ${e.stack}`)}}/*** 使用 JSSDK 的示例* 1. 需在登錄后調用* 2. 首先會使用云開發 web sdk 提供的 getJSSDKSignature 方法獲取網頁所需的 wx.config 的簽名* 3. 調用 wx.config* 4. wx.config 成功之后嘗試調用選擇圖片和獲取地理位置作為示例*/window.useJSSDK = async () => {try {const instance = window.instanceconsole.log(`url: ${location.href}`)const res = await instance.getJSSDKSignature({url: location.href,})console.log(`jssdk sign res: ${JSON.stringify(res)}`)const configOpt = {debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: WX_OFFICIAL_ACCOUNT_APPID, // 必填，公眾號的唯一標識timestamp: res.timestamp + '', // 必填，生成簽名的時間戳nonceStr: res.nonceStr, // 必填，生成簽名的隨機串signature: res.signature,// 必填，簽名jsApiList: ['chooseImage', 'getLocation'] // 必填，需要使用的JS接口列表}console.log(`wx.config opt ${JSON.stringify(configOpt)}`)wx.config(configOpt)console.log(`wx.config executed`)wx.ready(() => {console.log(`wx.ready triggered`)setTimeout(() => {wx.chooseImage({count: 5, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'],success : function(res) {alert('已選擇 ' + res.localIds.length + ' 張圖片');},fail: function(err) {console.error(`chooseImage fail ${JSON.stringify(err)}`)},})wx.getLocation({type: 'wgs84', // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02'success: function (res) {var latitude = res.latitude; // 緯度，浮點數，范圍為90 ~ -90var longitude = res.longitude; // 經度，浮點數，范圍為180 ~ -180。var speed = res.speed; // 速度，以米/每秒計var accuracy = res.accuracy; // 位置精度console.log(`getLocation ${JSON.stringify(res)}`)},fail: err => {console.log(`getLocation fail ${JSON.stringify(err)}`)}});}, 2000)})wx.error(err => {console.error(`wx.error ${JSON.stringify(err)}`)})} catch (e) {console.error(`error: ${e} ${e.stack}`)} }/*** 帶登錄態訪問資源方的云開發資源，調用方式見文檔，與小程序一致*/window.accessResource = async () => {try {const c = window.instanceawait runWithLogs(() => c.database().collection('reposkipuser').where({done:true}).limit(10).skip(1).get())} catch (e) {console.error('logs', `error: ${e}`)}}/*** 未登錄模式下訪問小程序云開發的資源示例*/window.accessResourceWithoutAuth = async () => {var c = new cloud.Cloud({identityless: true, // 表示是未登錄模式resourceAppid: 'wx5f****6e5aa1573',resourceEnv: 'test-0g****qd6b2c3182',})await c.init()await runWithLogs(() => c.database().collection('reposkipuser').where({}).get(), `start db`, `db res`)}window.runWithLogs = async (fn, before, after) => {try {console.log(before)const res = await fn()console.log(`${after}: ${JSON.stringify(res)}`)} catch (e) {console.error(`error: ${e}`)}}</script><style>.display-none {display: none;}.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo .avatar {width: max-content;box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3);}.userinfo .name {border-bottom: 2px solid gray;padding: 0 5px 5px 5px;}</style></head><body><h2>云開發 Web 能力極簡示例</h2><p>請注意按照文檔說明配置好，主要包括：</p><p>1. 配置好公眾號的授權回調域名及 JS 安全域名</p><p>2. 配置好云開發授權關系（小程序授權云開發資源給公眾號）</p><p>3. 將代碼中相應需要填入小程序/公眾號 AppID 的地方進行相應改動</p><p>4. 編寫部署好小程序云開發對應云環境的 cloudbase_auth 云函數和 echo 云函數</p><p>5. 準備好后，頁面加載后先點擊登錄，登錄后再執行訪問資源等其他操作，日志可在調試器查看</p><div id="userinfo" class="userinfo" style="display: none"><img class="avatar" /><p class="name"></p><p class="openid"></p></div><!-- <p><a href="javascript:;" onclick="doLogin()">登錄（云開發公眾號網頁授權）</a></p><p><a href="javascript:;" class="display-none" onclick="getUserInfo()">獲取用戶信息</a></p><p><a href="javascript:;" class="display-none" onclick="useJSSDK()">使用 JSSDK</a></p> --><p><a href="javascript:;" onclick="accessResource()">訪問云資源</a></p><p><a href="javascript:;" onclick="accessResourceWithoutAuth()">未登錄模式下訪問云資源</a></p></body>
</html>
2.F12調試 控制臺調試
使用未登錄模式下訪問云資源會報錯，
解決：需要在瀏覽器屬性新增--test-type --disable-web-security
未登錄情況下回遇到兩個問題 ，點擊查詢?錯誤碼 | 微信開放文檔 (qq.com)
?
3.最終訪問效果
?
總結
以上是生活随笔為你收集整理的微信小程序访问云数据库的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
