快捷導(dǎo)航

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

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

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

url轉(zhuǎn)碼

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

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

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

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

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

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

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

在vue里,可以寫在每次路由變化時(shí)

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

安全域名

一定要再三確認(rèn)安全域名等微信公眾號(hào)配置信息,如分享鏈接link字段

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

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

常見錯(cuò)誤

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

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

在開發(fā)過程遇到