公众号使用云开发 / 极简示例 / HTML

包含了登录逻辑、访问云资源、使用 JSSDK 的示例：

真机调试时需要注意 第三方 Cookie 使用限制

  1. <html>
  2.   <head>
  3.     <title>云开发 Web 能力极简示例</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  6.     <script>
  7.       window.onerror = e => {
  8.         alert('window error ' + e)
  9.       }
  10.     </script>
  11.     <!-- 调试用的移动端 console -->
  12.     <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
  13.     <script>eruda.init();</script>
  14.     <!-- 公众号 JSSDK -->
  15.     <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  16.     <!-- 云开发 Web SDK -->
  17.     <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
  18.     <script>
  19.       // 公众号基本信息：请修改下列字段使用本示例
  20.       const WX_RESOURCE_APPID = 'wxaaaaaaaaaaaaaaaa' /*         资源方 AppID */
  21.       const WX_RESOURCE_ENVID = 'cloud1' /*                     资源方云开发环境 ID */
  22.       const WX_OFFICIAL_ACCOUNT_APPID = 'wxaaaaaaaaaaaaaaaa'/*  公众号 AppID */
  23.       const WX_AUTH_TYPE = 'snsapi_base' /*                     选择需要的授权方式，snsapi_base 或 snsapi_userinfo */
  24.       const WX_REDIRECT_URI = 'https://example.com/' /*         回调 URL */
  26.       // 示例配置
  27.       const isPersistLoginInfo = false // 是否需要保留登录态信息到 window 中，只有 snsapi_userinfo 方式需要
  29.       if (window.wx) {
  30.         window.cloud = wx.cloud
  31.       }
  33.       var urlSearch = new URLSearchParams(location.search)
  34.       var accessToken = urlSearch.get('access_token')
  35.       var refreshToken = urlSearch.get('refresh_token')
  37.       /**
  38.        * 检查/发起登录
  39.        * 1. 函数会检查当前是否已登录（checkLogin）
  40.        * 2. 如果未登录，会 10s 后自动发起登录（startLogin）
  41.        * 3. 如果已登录，会初始化实例，使用指定的小程序云开发资源
  42.        */
  43.       window.doLogin = async () => {
  44.         try {
  45.           const checkLoginOptions = {
  46.             provider: 'OfficialAccount',
  47.             appid: WX_OFFICIAL_ACCOUNT_APPID,
  48.           }
  50.           if (urlSearch.get('oauthredirect') === '1') {
  51.             checkLoginOptions.accessToken = accessToken
  52.             checkLoginOptions.refreshToken = refreshToken
  53.           }
  55.           console.log(`checkLogin options: `, checkLoginOptions)
  56.           const result = await cloud.checkLogin(checkLoginOptions)
  57.           console.log(`checkLogin result: `, result)
  58.           isPersistLoginInfo && window.checkLoginRes = result
  59.           if (result.errCode === 0 && result.loggedIn) {
  60.             console.log(`checkLogin success`)
  62.             const instance = window.instance = new cloud.Cloud({
  63.               appid: WX_OFFICIAL_ACCOUNT_APPID,
  64.               resourceAppid: WX_RESOURCE_APPID,
  65.               resourceEnv: WX_RESOURCE_ENVID,
  66.             })
  67.             const initResult = await instance.init()
  69.             console.log(`instance inited`, initResult)
  70.             console.log(`can use cloud instance to access resource now !`)
  72.             const els = [...document.getElementsByClassName('display-none')]
  73.             els.forEach(el => el.classList.remove('display-none'))
  74.           } else {
  75.             console.log(`checkLogin with sdk errCode ${result.errCode} errMsg ${result.errMsg}, will start oauth in 10s`)
  77.             setTimeout(() => {
  78.               try {
  79.                 cloud.startLogin({
  80.                   provider: 'OfficialAccount',
  81.                   appid: WX_OFFICIAL_ACCOUNT_APPID,
  82.                   scope: WX_AUTH_TYPE,
  83.                   redirectUri: WX_REDIRECT_URI,
  84.                 })
  85.               } catch (e) {
  86.                 console.error(`startLogin fail: ${e}`)
  87.                 console.warn(`will start OfficialAccount OAuth login in 10s.`)
  88.               }
  89.             }, 10000)
  90.           }
  91.         } catch (e) {
  92.           console.error(e)
  93.         }
  94.       }
  96.       /**
  97.        * 获取用户信息的示例
  98.        * 1. 需在登录后调用
  99.        * 2. 网页授权的方式需为 snsapi_userinfo
  100.        * 3. 从 checkLogin 结果中获取用户信息 cloudID（已在 doLogin 函数中先暂存到全局变量 checkLoginRes）
  101.        * 4. 调用云函数换取 cloudID 信息
  102.        */
  103.       window.getUserInfo = async () => {
  104.         if (!checkLoginRes) throw new Error('获取登录信息失败，请确认授权方式以及是否保存了登录信息')
  105.         try {
  106.           if (checkLoginRes.cloudID) {
  107.             const res = await instance.callFunction({
  108.               name: 'echo',
  109.               data: {
  110.                 userInfoData: new instance.CloudID(checkLoginRes.cloudID),
  111.               },
  112.             })
  114.             const cloudData = res.result.userInfoData
  115.             if (cloudData.data) {
  116.               const userInfoImg = document.querySelector('#userinfo .avatar')
  117.               userInfoImg.src = cloudData.data.avatarUrl
  119.               const userInfoName = document.querySelector('#userinfo .name')
  120.               userInfoName.innerText = cloudData.data.nickName
  122.               const userInfoOpenID = document.querySelector('#userinfo .openid')
  123.               userInfoOpenID.innerText = cloudData.data.openId
  125.               const userInfoDiv = document.getElementById('userinfo')
  126.               userInfoDiv.style.cssText = ''
  127.             } else {
  128.               console.warn(`cloudID data error: `, cloudData)
  129.               alert(`cloudID 信息获取错误，请查看调试器报错信息`)
  130.             }
  131.           } else {
  132.             alert(`找不到 cloudID，请确认网页授权方式为 snsnapi_userinfo`)
  133.           }
  134.         } catch (e) {
  135.           console.error(`error: ${e} ${e.stack}`)
  136.         }
  137.       }
  139.       /**
  140.        * 使用 JSSDK 的示例
  141.        * 1. 需在登录后调用
  142.        * 2. 首先会使用云开发 web sdk 提供的 getJSSDKSignature 方法获取网页所需的 wx.config 的签名
  143.        * 3. 调用 wx.config
  144.        * 4. wx.config 成功之后尝试调用选择图片和获取地理位置作为示例
  145.        */
  146.       window.useJSSDK = async () => {
  147.         try {
  148.           const instance = window.instance
  150.           console.log(`url: ${location.href}`)
  151.           const res = await instance.getJSSDKSignature({
  152.             url: location.href,
  153.           })
  154.           console.log(`jssdk sign res: ${JSON.stringify(res)}`)
  156.           const configOpt = {
  157.             debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  158.             appId: WX_OFFICIAL_ACCOUNT_APPID, // 必填，公众号的唯一标识
  159.             timestamp: res.timestamp + '', // 必填，生成签名的时间戳
  160.             nonceStr: res.nonceStr, // 必填，生成签名的随机串
  161.             signature: res.signature,// 必填，签名
  162.             jsApiList: ['chooseImage', 'getLocation'] // 必填，需要使用的JS接口列表
  163.           }
  165.           console.log(`wx.config opt ${JSON.stringify(configOpt)}`)
  166.           wx.config(configOpt)
  167.           console.log(`wx.config executed`)
  169.           wx.ready(() => {
  170.             console.log(`wx.ready triggered`)
  172.             setTimeout(() => {
  173.               wx.chooseImage({
  174.                 count: 5, 
  175.                 sizeType: ['original', 'compressed'], 
  176.                 sourceType: ['album', 'camera'],
  177.                 success : function(res) {
  178.                   alert('已选择 ' + res.localIds.length + ' 张图片');
  179.                 },
  180.                 fail: function(err) {
  181.                   console.error(`chooseImage fail ${JSON.stringify(err)}`)
  182.                 },
  183.               })
  185.               wx.getLocation({
  186.                 type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  187.                 success: function (res) {
  188.                   var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
  189.                   var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
  190.                   var speed = res.speed; // 速度，以米/每秒计
  191.                   var accuracy = res.accuracy; // 位置精度
  192.                   console.log(`getLocation ${JSON.stringify(res)}`)
  193.                 },
  194.                 fail: err => {
  195.                   console.log(`getLocation fail ${JSON.stringify(err)}`)
  196.                 }
  197.               });
  198.             }, 2000)
  199.           })
  201.           wx.error(err => {
  202.             console.error(`wx.error ${JSON.stringify(err)}`)
  203.           })
  205.         } catch (e) {
  206.           console.error(`error: ${e} ${e.stack}`)
  207.         } 
  208.       }
  210.       /**
  211.        * 带登录态访问资源方的云开发资源，调用方式见文档，与小程序一致
  212.        */
  213.       window.accessResource = async () => {
  214.         try {
  215.           const c = window.instance
  216.           await runWithLogs(() => c.database().collection('test').where({}).get(), `start db`, `db res`)
  217.         } catch (e) {
  218.           console.error('logs', `error: ${e}`)
  219.         }
  220.       }
  222.       /**
  223.        * 未登录模式下访问小程序云开发的资源示例
  224.        */
  225.       window.accessResourceWithoutAuth = async () => {
  226.         var c = new cloud.Cloud({
  227.           identityless: true, // 表示是未登录模式
  228.           resourceAppid: WX_RESOURCE_APPID,
  229.           resourceEnv: WX_RESOURCE_ENVID,
  230.         })
  232.         await c.init()
  234.         await runWithLogs(() => c.database().collection('test').where({}).get(), `start db`, `db res`)
  235.       }
  237.       window.runWithLogs = async (fn, before, after) => {
  238.         try {
  239.           console.log(before)
  240.           const res = await fn()
  241.           console.log(`${after}: ${JSON.stringify(res)}`)
  242.         } catch (e) {
  243.           console.error(`error: ${e}`)
  244.         }
  245.       }
  246.     </script>
  247.     <style>
  248.       .display-none {
  249.         display: none;
  250.       }
  252.       .userinfo {
  253.         display: flex;
  254.         flex-direction: column;
  255.         align-items: center;
  256.       }
  258.       .userinfo .avatar {
  259.         width: max-content;
  260.         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);
  261.       }
  263.       .userinfo .name {
  264.         border-bottom: 2px solid gray;
  265.         padding: 0 5px 5px 5px;
  266.       }
  267.     </style>
  268.   </head>
  269.   <body>
  270.     <h2>云开发 Web 能力极简示例</h2>
  271.     <p>请注意按照文档说明配置好，主要包括：</p>
  272.     <p>1. 配置好公众号的授权回调域名及 JS 安全域名</p>
  273.     <p>2. 配置好云开发授权关系（小程序授权云开发资源给公众号）</p>
  274.     <p>3. 将代码中相应需要填入小程序/公众号 AppID 的地方进行相应改动</p>
  275.     <p>4. 编写部署好小程序云开发对应云环境的 cloudbase_auth 云函数和 echo 云函数</p>
  276.     <p>5. 准备好后，页面加载后先点击登录，登录后再执行访问资源等其他操作，日志可在调试器查看</p>
  277.     <div id="userinfo" class="userinfo" style="display: none">
  278.       <img class="avatar" />
  279.       <p class="name"></p>
  280.       <p class="openid"></p>
  281.     </div>
  282.     <p><a href="javascript:;" onclick="doLogin()">登录（云开发公众号网页授权）</a></p>
  283.     <p><a href="javascript:;" class="display-none" onclick="getUserInfo()">获取用户信息</a></p>
  284.     <p><a href="javascript:;" class="display-none" onclick="useJSSDK()">使用 JSSDK</a></p>
  285.     <p><a href="javascript:;" class="display-none" onclick="accessResource()">访问云资源</a></p>
  286.     <p><a href="javascript:;" class="display-none" onclick="accessResourceWithoutAuth()">未登录模式下访问云资源</a></p>
  287.   </body>
  288. </html>