微信分享常見問題--避坑指北

孤舟蓑翁發表於2021-07-28

再講微信分享需要躲避的一些坑之前，先說說微信分享的一些背景知識

1.JS-SDK的用途

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。微信開放這些能力給開發者，要對開發者進行鑑權。防止開發者對某些介面濫用，比如說傳播類的介面。鑑權的時候需要簽名，簽名需要票據，隨機字串，時間戳，網址。比較麻煩的引數票據，票據的生成，需要呼叫另外一個介面，引數是appId和serect。這個介面每天只能呼叫2000次，每次呼叫的有效期是2小時。

2.簽名的獲取方法

2.1 準備工作

1.登入微信公眾平臺，在開發設定中檢視AppID和AppSecret

2 設定JS介面安全域名。這裡填寫的是一級域名，不帶www和http。最多可以設定三個域名。相比以前的分享沒有任何域名限制，現在設定安全域名，目的是為了當微信發現此公眾平臺發現誘導分享行為時，可以根據此域名追溯到所有分享出去的連結，以及通過這些連結增加的粉絲。這樣，微信就可以牢牢控制了你的微信平臺，一旦發現違規，讓分享連結失效，刪除掉誘導行為增加的粉絲，是瞬間就可以完成的。因此，一定要合理來使用分享功能，不要因小失大。等到你的微信平臺被封，估計哭都來不及。

2.2 獲得Access Token

access_token是公眾號的全域性唯一票據，公眾號呼叫各介面時都需使用access_token。正常情況下 access_token有效期為7200秒，重複獲取將導致上次獲取的access_token失效。公眾號可以使用AppID和AppSecret呼叫本介面來獲取access_token。AppID和AppSecret可在微信公眾平臺中獲得(見上圖)。注意呼叫所有微信介面時均需使用https協議。

// https請求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

引數說明

返回說明
正常情況下，微信會返回下述JSON資料包：

{"access_token":"ACCESS_TOKEN","expires_in":7200}

錯誤時微信會返回錯誤碼等資訊，JSON資料包示例如下（該示例為AppID無效錯誤）:

{"errcode":40013,"errmsg":"invalid appid"}

2.3 獲取jsapi_ticket

生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用於呼叫微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由於獲取jsapi_ticket的api呼叫次數非常有限，頻繁重新整理jsapi_ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域性快取jsapi_ticket 。
用第一步拿到的access_token , 採用https GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全域性快取jsapi_ticket），介面地址如下

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

獲得jsapi_ticket之後，就可以生成JS-SDK許可權驗證的簽名了。

2.4 簽名演算法實現

簽名生成規則如下：

對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string。這裡需要注意的是所有引數名均為小寫字元。對string作sha1加密，欄位名和欄位值都採用原始值，不進行URL 轉義。即** signature=sha1(string)**。示例：

2.4.1 對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

2.4.2 對string進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

2.5 企業微信獲取JS-SDK使用許可權簽名步驟

參見企業微信JS-SDK使用授權簽名演算法，其中jsapi_ticket的獲取比較麻煩一些，需要向如下地址發起get請求

https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN

入參access_token的獲取分兩種情況：

企業內部開發，獲取方式參考獲取access_token
第三方應用開發，獲取方式參考“獲取企業憑證”

如果是第三方應用開發，需要以post方式向如下地址發起請求

 https://qyapi.weixin.qq.com/cgi-bin/service/get_corp_token?suite_access_token=SUITE_ACCESS_TOKEN

入參為：

{
  "auth_corpid": "auth_corpid_value", // 授權方corpid
  "permanent_code": "code_value"      // 永久授權碼，通過get_permanent_code獲取
}

permanent_code的獲取方式是,向如下地址發起post請求

https://qyapi.weixin.qq.com/cgi-bin/service/get_permanent_code?suite_access_token=SUITE_ACCESS_TOKEN

入參：

{
    "auth_code": "auth_code_value"  // 臨時授權碼，會在授權成功時附加在redirect_uri中跳轉回第三方服務商網站，或通過授權成功通知回撥推送給服務商。長度為64至512個位元組
}

第三方服務商在得到公眾號或小程式運營者（簡稱運營者）授權後，第三方平臺開發者可以通過呼叫微信開放平臺的介面能力，為公眾號或小程式的運營者提供賬號申請、小程式建立、技術開發、行業方案、活動營銷、外掛能力等全方位服務。

3 專案中的問題

3.1 IOS下微信環境 -- 享的文章內容描述與圖示不對

微信應用右上角自帶的分享功能，在分享內容之前需要呼叫wx.config對微信分享JS-SDK鑑權，需要的傳參如下：

wx.config({
  debug: true, // 開啟除錯模式
  appId: "xxx", // 必填，公眾號的唯一標識
  timestamp: "timestamp", // 必填，生成簽名的時間戳
  nonceStr: "nonceStr", // 必填，生成簽名的隨機串
  signature: "signature",// 必填，簽名
  jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填
});

其中不好獲取的引數是signature。signature是怎麼獲取的呢？在我們的專案中，是通過請求getTicket介面，獲取signature，而請求getTicket介面的引數中，最容易出問題的就是jsUrl。

const params = {
    appId: newAppId || appId,
    corpId: env === "wx" ? authCorpId : currentCorpId,
    wechatType: env,
    jsUrl: url,
    agentId,
  };
  const res = await ajax('getTicket', params, isShowError);
  const { retdata = {} } = res;
  const { appId, noncestr, signature, timestamp, nextUpdateTime } = retdata;
  const obj = {
    debug: false, // 是否開啟除錯模式
    appId, // appid
    timestamp, // 時間戳
    nonceStr: noncestr, // 隨機字串
    signature, // 簽名
    jsApiList,
    openTagList: [],
  };
  if (env === 'qywx') {
    obj.beta = true;
    obj.appId = currentCorpId;
  }
  wx.config(obj);

這個jsUrl引數，按理說要取當前分享頁面的url，在Android上確實是這樣，可是在IOS手機上，企業微信環境下沒有問題，可是微信環境如果取當前分享頁面的url，

url = encodeURIComponent(window.location.href);

分享出去的內容，圖示和描述的展示會有問題

應該取進入單頁應用首頁的url,而不是當前頁面的url

url = encodeURIComponent(localStorage.getItem(keyDict.entryUrl));

所以獲取jsUrl的時候，要新增判斷條件:

// 如果是 iOS 裝置，個人微信環境，則使用應用首頁的 URL 去請求 wxConfig，不然的話會導致 iOS 中分享的連結描述資訊或者圖示不對
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && env === "wx") {
  // console.log('簽名地址=======================', localStorage.getItem(keyDict.entryUrl))
  url = encodeURIComponent(localStorage.getItem(keyDict.entryUrl));
} else {
  // console.log('簽名地址=======================', window.location.href)
  url = encodeURIComponent(window.location.href);
}

鑑權失敗會報如下錯誤，此時重點要檢查一下url有沒有多次呼叫encodeURIComponent編碼

wx.config {"errMsg": "config:invalid signature"}

3.2 有些JS-SDK介面，比如說h5跳轉微信小程式, 除了呼叫wx,config之後，還要呼叫 wx.agentConfig，否則會報no_permission錯誤

3.2.1 wx.config和wx.agentConfig的區別

wx.config注入的是企業的身份與許可權，而wx.agentConfig注入的是應用的身份與許可權。尤其是當呼叫者為第三方服務商時，通過config無法準確區分出呼叫者是哪個第三方應用，而在部分場景下，又必須嚴謹區分出第三方應用的身份，此時即需要通過agentConfig來注入應用的身份資訊。wx.agentConfig配置步驟：

3.2.2 先要引入 jwxwork sdk

<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

3.2.3 wx.agentConfig配置引數

wx.agentConfig({
  corpid: '', // 必填，企業微信的corpid，必須與當前登入的企業一致
  agentid: '', // 必填，企業微信的應用id （e.g. 1000247）
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名，見附錄-JS-SDK使用許可權簽名演算法
  jsApiList: ['selectExternalContact'], //必填，傳入需要使用的介面名稱
  success: function(res) {
  // 回撥
  },
  fail: function(res) {
    if(res.errMsg.indexOf('function not exist') > -1){
      alert('版本過低請升級')
    }
  }
});

3.2.4 呼叫agentConfig的注意事項(摘錄於企微官方文件)

1. agentConfig與config的簽名演算法完全一樣，但是jsapi_ticket的獲取方法不一樣，請特別注意，檢視獲取應用身份的ticket
2. agentConfig僅在企業微信2.5.0及以後版本支援，微信客戶端不支援（微信開發者工具也不支援）
3. 呼叫wx.agentConfig之前，必須確保先成功呼叫wx.config. 注意：從企業微信3.0.24及以後版本，無須先呼叫wx.config，可直接wx.agentConfig. 可通過企業微信UA 判斷版本號
4. 當前頁面url中的域名必須是在該應用中設定的可信域名。
5. 僅部分介面才需要呼叫agentConfig，需注意每個介面的說明

3.3 跨企業微信分享內容，在另一企業開啟，再次分享，分享出去的文章的描述不對，有時圖示也不顯示， wx.config報如下錯誤

errMsg: "config:invalid corpid more info at https://open.work.weixin.qq.com/devtool/query?e=40013"

原因是: 當前登入的企業微信與獲取簽名使用的企業微信不一致。 在B企業下，無法用A企業的JS-SDK授權功能。即使A, B企業下，配置了相同的可信域名。也無法共享授權。只能在各自的企業下，呼叫微信提供的JS-SDK。
因為在B企業下開啟分享內容時，hideMenuItems是第一個被呼叫的JS-SDK,所以第一個報的JS-SDK呼叫錯誤是hideMenuItems介面：

wx.config配置出錯的情況下，文章雖能分享。可是分享出去的文章，是有問題的。從下圖可以看出，描述變成了文章的網址。這個錯誤比較迷惑人。

微信小程式開發常見坑
2017-12-18
微信小程式
[轉]經驗分享：微信小程式外包接單常見問題及流程
2018-05-16
微信小程式
Python學習常見問題分享!
2021-02-25
Python
微信小程式中開發常見問題
2020-11-29
微信小程式
微信小程式開發常見問題（四）
2018-03-09
微信小程式
微信小程式開發常見問題（五）
2018-03-07
微信小程式
微信小程式開發常見問題（七）
2018-04-01
微信小程式
固態硬碟常見問題及其解答分享
2016-08-31
硬碟
微信JSSDK遇見的坑--vue微信自定義分享
2019-02-23
JSVue
微信支付HTTPS伺服器常見問題
2019-01-24
HTTP伺服器
好程式設計師分享：Java面試題常見問題
2019-06-11
程式設計師Java面試題
【Nginx】常見問題
2019-08-12
Nginx
js常見問題
2019-02-16
JS
CSS常見問題
2019-02-17
CSS
Git 常見問題
2018-11-23
Git
PHP 常見問題
2018-11-24
PHP
swiper常見問題
2019-01-28
nginx 常見問題
2018-12-26
Nginx
java 常見問題
2020-12-29
Java
MyBatis常見問題
2023-04-07
MyBatis
前端常見問題
2018-06-13
前端
Git常見問題
2018-05-26
Git
SQLServer常見問題
2016-11-09
SQLServer
css 常見問題
2017-09-15
CSS
HTML常見問題
2018-05-11
HTML
PyMongo 常見問題
2017-12-24
Go
xhtml常見問題
2017-11-15
HTML
UITableview 常見問題
2017-11-23
UIView
mysql常見問題
2013-07-17
MySql
MySQL 常見問題
2010-07-20
MySql
BlockUI常見問題
2009-09-15
BloCUI
避坑指南：關於SPDK問題分析過程
2020-06-10
Oracle常見問題一千問
2017-07-10
Oracle
關於微博微信行銷的4個常見問題思考
2013-08-21
網易iTownSDK常見問題
2019-05-10
weex常見問題解析
2019-04-10
sonar常見問題分析
2019-01-18
Linux 常見問題
2018-11-23
Linux