微信小程序访问云数据库-阿里云开发者社区

微信小程序访问云数据库
2024-04-22 16
版权
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序访问云数据库
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 = accessToken
            checkLoginOptions.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.userInfoData
            if (cloudData.data) {
              const userInfoImg = document.querySelector('#userinfo .avatar')
              userInfoImg.src = cloudData.data.avatarUrl
 
              const userInfoName = document.querySelector('#userinfo .name')
              userInfoName.innerText = cloudData.data.nickName
 
              const userInfoOpenID = document.querySelector('#userinfo .openid')
              userInfoOpenID.innerText = cloudData.data.openId
 
              const 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.instance
 
          console.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 ~ -90
                  var 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.instance
          await 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.最终访问效果
微信小程序访问云数据库

热门文章

最新文章

相关课程

相关电子书

相关实验场景
