在公眾號中使用云開發

微信云開(kai)發(fa)已支持在Web 網頁中(zhong)使用(yong)環境(jing)共享，即一個(ge)小程序(xu)的(de)云開(kai)發(fa)資(zi)源可以授權(quan)共享給同主體下(xia)多個(ge)公(gong)(gong)眾(zhong)號(hao)（或公(gong)(gong)眾(zhong)號(hao)授權(quan)的(de)web網頁）使用(yong)。

同一主體下的(de)某(mou)個已開(kai)(kai)通(tong)云(yun)開(kai)(kai)發的(de)小程序授權(quan)共享環境給(gei)該公眾號(hao)(hao)后，在(zai)(zai)該公眾號(hao)(hao)網(wang)頁(ye)中(zhong)，則可以通(tong)過云(yun)開(kai)(kai)發 Web SDK 的(de)接口(kou)發起登錄（內部會進行公眾號(hao)(hao)網(wang)頁(ye)授權(quan)），登錄后可以在(zai)(zai)云(yun)函數(shu)中(zhong)獲(huo)取用(yong)戶信(xin)息(xi)、及使用(yong)公眾號(hao)(hao)的(de)服(fu)務端接口(kou)。如果網(wang)頁(ye)沒有(you)綁定(ding)公眾號(hao)(hao)或者不需(xu)要微信(xin)登錄態，也(ye)可以直接使用(yong) Web 未(wei)登錄模式(shi)訪問云(yun)開(kai)(kai)發資源。

注意：Web SDK 使(shi)用(yong)(yong)(yong)公眾號(hao)登錄態(tai)，需要使(shi)用(yong)(yong)(yong)靜(jing)態(tai)網站托(tuo)管綁定(ding)的默(mo)認域(yu)名(ming)或自定(ding)義域(yu)名(ming)（因(yin)自 iOS 14 起封禁第三方 cookie，在 Web SDK 中(zhong)使(shi)用(yong)(yong)(yong)靜(jing)態(tai)托(tuo)管域(yu)名(ming)私有鏈路訪問微信服務來保障(zhang)安全(quan)及使(shi)用(yong)(yong)(yong)第一方 cookie），參考 第三方 Cookie 限制(zhi)說明

在(zai)微信客戶端內打(da)開的 Web 網頁(ye)可以進行公眾號網頁(ye)授權并且有登錄態的安全訪(fang)問云開發(fa)資源(yuan)。有以下步驟：

1. 需要一個有網頁授權權限的公(gong)眾號 A、及一個同主體的已開通(tong)云開發(fa)的小程序 B

2. 小(xiao)程序 B 在云開發控制(zhi)臺中通過 “環(huan)境共(gong)享” 能(neng)力，將(jiang)一(yi)個或多個環(huan)境授權共(gong)享給公(gong)眾號 A 使用(yong)

3. 公眾號 A 的(de)(de)網頁在微信客(ke)戶端(duan)內使用云(yun)開發 Web SDK 登(deng)錄(lu)，即可正常訪問小(xiao)程序 A 已授權(quan)共享的(de)(de)云(yun)開發環境資源(yuan)

整個流(liu)程涉及的接(jie)口少且簡單易用，詳細(xi)介紹如下：

步驟一：準備公眾號與小程序

公眾號準備：

1. 公眾(zhong)號(hao)需有使用(yong)網頁授權的權限

2. 配置好網頁授權的回(hui)調(diao)域名(ming)

3. 配置好(hao) JS 安全域(yu)名

小程序準備：

1. 開通云開發

2. 前往(wang)云(yun)開(kai)發(fa)控制臺-更多-環(huan)境(jing)(jing)共享，開(kai)通環(huan)境(jing)(jing)共享

步驟二：小程序將環境共享給公眾號使用

如果公眾號 A 和小程序 B 同主體，則小程序 B 可以在 1.03.2009140 或以(yi)上版本的開發(fa)者工(gong)具云(yun)開發(fa)控(kong)制臺的 “環(huan)境(jing)共享” 中(zhong)，將其(qi)一個或多(duo)個環(huan)境(jing)的全部或部分資源能力授(shou)(shou)權給(gei)公(gong)眾(zhong)號(hao)使用。授(shou)(shou)權完成后，公(gong)眾(zhong)號(hao)網頁可以(yi)訪問小(xiao)程(cheng)序 B 的云(yun)開發(fa)資源的已授(shou)(shou)權部分。

步驟三：網頁登錄

在公眾號網頁中，可以使用云開發 Web SDK 同時完成公眾號網頁授權和云開發登錄。使用 Web SDK 完成登錄流程也非常簡單，必要的僅有 checkLogin 和 startLogin 這兩個 API。必要的(de)登錄流程(cheng)如下：

1. 云開發登錄：調用 checkLogin 檢查網頁云開發登錄狀態，如果未登錄則調用 startLogin 發起調用，發起完成(cheng)后重復該步驟；如果已登(deng)錄則(ze)進行下一(yi)步

2. 獲取對(dui)應小程序(xu)的(de)訪問(wen)授(shou)權：在代(dai)碼(ma)中使用一個(ge)小程序(xu)的(de)一個(ge)環(huan)境的(de)資(zi)源時，需(xu)初(chu)始化并獲取對(dui)方(fang)的(de)授(shou)權，示例代(dai)碼(ma)如下：

// 初始化一個實例，聲明要使用哪個小程序哪個云環境的資源const c = new cloud.Cloud({
  appid: '公眾號 AppID',
  resourceAppid: '資源方小程序 AppID',
  resourceEnv: '資源方小程序云環境 ID',})// 初始化，等待授權關系校驗通過以及目標云環境的 cloudbase_auth 函數返回授權await c.init()

資源方 cloudbase_auth 函數簡(jian)易返回示例：

const cloud = require('wx-server-sdk')cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV})// 云函數入口函數exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  console.log(event)
  console.log(wxContext)
  // 跨賬號調用時，由此拿到來源方小程序/公眾號 AppID
  console.log(wxContext.FROM_APPID)
  // 跨賬號調用時，由此拿到來源方小程序/公眾號的用戶 OpenID
  console.log(wxContext.FROM_OPENID)
  // 跨賬號調用、且滿足 unionid 獲取條件時，由此拿到同主體下的用戶 UnionID
  console.log(wxContext.FROM_UNIONID)

  return {
    errCode: 0,
    errMsg: '',
    auth: JSON.stringify({
      // 自定義安全規則
      // 在前端訪問資源方數據庫、云函數等資源時，資源方可以通過
      // 安全規則的 `auth.custom` 字段獲取此對象的內容做校驗，
      // 像這個示例就是資源方可以在安全規則中通過 `auth.custom.x` 獲取
      x: 1,
    }),
  }}

資源方 cloudbase_auth 云(yun)函數返(fan)回的對象結構協議：

auth 字段額外說明：該字段用于自定義安全規則，當定義了之后，調用方在前端訪問資源方的數據庫、云函數等資源時，資源方可以通過安全規則的 auth.custom 字段(duan)獲取此對象的內容做安全規則校驗。

步驟四：訪問資源及使用公眾號特有能力

登錄(lu)后，可(ke)以訪問獲(huo)得授權的小程序的云(yun)開(kai)發資源、使(shi)用公眾號 JSSDK、獲(huo)取公眾號用戶信息、發起公眾號云(yun)調用（免鑒權使(shi)用公眾號服務端接口）等。以下一一舉(ju)例說明。

1. 使用公眾號 JSSDK

使用公眾號 JSSDK 的時是需要進行 wx.config 并傳入簽名的，在完成云開發登錄之后，可以使用云開發 Web SDK 提供的 getJSSDKSignature 方法完成獲取網頁 wx.config 所需簽名，示例：

const res = await cloud.getJSSDKSignature({
  url: '要簽名的網頁 URL'})wx.config({
  appId: '公眾號 AppID', // 必填，公眾號的唯一標識
  timestamp: res.timestamp + '', // 必填，生成簽名的時間戳
  nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
  signature: res.signature,// 必填，簽名
  jsApiList: ['JS API 名'] // 必填，需要使用的JS接口列表})

2. 訪問微信云開發資源

使用 Web SDK 完(wan)成云開發(fa)登(deng)錄后，想要訪問某個小程序(xu)的云開發(fa)資源時，需聲明(ming)相(xiang)應實例并等待(dai)初始(shi)化(hua)（對方授權(quan)）完(wan)成，等待(dai)完(wan)成后即可以相(xiang)同的 API 訪問所有云資源：

// 聲明const c1 = new wx.cloud.Cloud({
  appid: '公眾號 AppID',
  resourceAppid: '資源方 AppID',
  resourceEnv: '資源方環境 ID',})// 等待初始化完成await c1.init()// 然后照常訪問指定環境下的資源c1.callFunction({
  name: '',
  data: {},}).then(console.log)

3. 獲取公眾號用戶信息

在公眾號網頁中發起云函數調用時，在云函數中可以通過 getWXContext 獲取得到公眾號的(de)用(yong)戶信息和(he)應用(yong)信息，具(ju)體(ti)字段有：

// 示例const cloud = require('wx-server-sdk')cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,})exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  // 跨賬號調用時，由此拿到來源方小程序/公眾號 AppID
  console.log(wxContext.FROM_APPID)
  // 跨賬號調用時，由此拿到來源方小程序/公眾號的用戶 OpenID
  console.log(wxContext.FROM_OPENID)
  // 跨賬號調用、且滿足 unionid 獲取條件時，由此拿到同主體下的用戶 UnionID
  console.log(wxContext.FROM_UNIONID)

  return wxContext}

4. 云調用：調用公眾號服務端接口

在(zai)公眾號(hao)網頁中發(fa)起云(yun)函(han)數調(diao)用(yong)時，在(zai)云(yun)函(han)數中可(ke)以免鑒權調(diao)用(yong)公眾號(hao)的服務(wu)端(duan)接口，示例：

const cloud = require('wx-server-sdk')cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,})// ...exports.main = async (event) => {
  // 示例：創建標簽 //developers.weixin.qq.com/doc/offiaccount/User_Management/User_Tag_Management.html
  return cloud.openapi({ appid: '公眾號 AppID' }).officialAccount.tags.create({ 
    tag: { 
      name: 'xxx'
    }
  })}

已(yi)支(zhi)持(chi)絕大部分(fen)接(jie)口，詳細 API 列表(biao)見[支(zhi)持(chi)的(de)服務端接(jie)口列表(biao)]，如有缺失，請在微信開放社(she)區反饋(kui)。

實際(ji)操作可參考公眾號網頁使用云開發的極(ji)簡示(shi)例

步驟五：登錄云開發控制查看云開發資源

首先，需要到公眾號后臺為登錄用戶授權開發者工具權限：

1.05.2103192 或以上版本的開發者工具已支持公眾號網頁登錄云開發控制臺，前往微信開發者工具-公眾號網頁項目-公眾號網頁，點擊“云開發”，填入公眾號AppID即可進入授權環境共享的微信云開發資源中；

上(shang)海西(xi)陸(lu)信息科技有限公司 承接各(ge)類(lei)微信小(xiao)(xiao)程序開(kai)發制作、小(xiao)(xiao)程序定制、APP 網站(zhan) 開(kai)發制作，聯系電話 18221533805、15900430334