微信公眾號H5之微信分享常見錯誤和問題(小結(jié))

更新時間：2019年11月14日 10:25:25 作者：淺吟輕唱

這篇文章主要介紹了微信公眾號H5之微信分享常見錯誤和問題(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

url轉(zhuǎn)碼

官方文檔描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

確認url是頁面完整的url(請在當(dāng)前頁面alert(location.href.split('#')[0])確認)，包括'http(s)😕/'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分

即獲取url完成地址的方法為

let url = window.location.href.split('#')[0];

如果鏈接帶有中文字符或者特殊符號,前端需要使用encodeURIComponent編碼,同時后端需要配合解碼

let url = encodeURIComponent(window.location.href.split('#')[0]);

config注入

官網(wǎng)文檔描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,
注意,每次使用jssdk方法前都要先注入配置信息,并且,每使用一次,就要注入config一次.

在vue里,可以寫在每次路由變化時

router.beforeEach((to, from, next) => {
  // 獲取權(quán)限驗證配置(簽名) 后端返回 getConfig, 注意返回字段的大小寫!
  let res
  // 注入配置信息
  wx.config({
   debug: false, // 調(diào)試開關(guān)
   appId: res.appId, // 必填，公眾號的唯一標(biāo)識
   timestamp:res.timestamp , // 必填，生成簽名的時間戳
   nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
   signature: res.signature,// 必填，簽名
   jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的JS接口列表
  });
  wx.ready(() => {
   // doSoming
  });
})

安全域名

一定要再三確認安全域名等微信公眾號配置信息,如分享鏈接link字段

很多時候的錯誤并不是前端方法或者sdk等問題,而是后臺有沒有設(shè)置正確的安全域名和白名單等.

 wx.updateAppMessageShareData({ 
  title: '', // 分享標(biāo)題
  desc: '', // 分享描述
  link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
  imgUrl: '', // 分享圖標(biāo)
  success: function () {
   // 設(shè)置成功
  }
 })

常見錯誤

參考微信官網(wǎng)文檔-附錄5

地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

在開發(fā)過程遇到