微信公衆號H5之微信分享常見錯誤和問題

原文鏈接: https://dsx2016.com/?p=674

url轉碼

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

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

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

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

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

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

config注入

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

同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,

注意,每次使用jssdk方法前都要先注入配置信息,並且,每使用一次,就要注入config一次.

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

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

安全域名

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

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

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

常見錯誤

參考微信官網文檔-附錄5

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

在開發過程遇到

• invalid signature

• the permission value is offline verifying

• permission denied

先參考文檔,排除基本因素,還是不行,再查找搜索引擎的答案.