先後端分離的項目微信 js-sdk 自定義分享連接

最近有點記不清微信 sdk 操做步驟了，藉着項目作到自定義分享連接的模塊，重溫記錄下過程心得。

先後端分離的項目，綁定域名、獲取 appId 等操做就由後端同事完成，這裏只記錄前端所需的工做。

自定義分享連接過程

開發工具

只需微信 web 開發者工具，經過它能夠很是容易地定位問題：它會打印所引用的 appId、接口是否可用等；也能點擊模擬分享。無需一次次拿起手機測試。

js-sdk 引入方式

有兩種引入方式：

• script 標籤引用
• 模塊化引用

因爲作的是 vue 項目，經過模塊化引用比較符合規範。

// 安裝庫
npm install --save-dev weixin-js-sdk

// 項目引用
import wx from 'weixin-js-sdk'

與後端的交互

這時候，後端同事須要給你微信要求驗證的東西，分別是 appId、timestamp、nonceStr、signature 以及 分享出去的連接路徑。

須要注意連接路徑，要使用後端返回的帶身份信息的連接（須要分享信息的話）。

操做： 前端傳過去當前域名給後端簽名，基於當前域名加上指定路徑生成上述信息，後端返回信息。

代碼：

methods: {
  getWeixinConfig() {
    getWxConfig({  // api.js 裏定義的獲取數據接口
        url: location.href.split('#')[0]  // 傳遞當前域名
    }, (data) = > {
        this.config = data;
        this.setWxConfig(data);  // 傳遞返回的數據
    }, (failed) = > {
        // do something
    })
},
setWxConfig(val) {
    let that = this;
    wx.config({
        debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。使用微信開發者工具能夠不打開。
        appId: val.appId, // 必填，公衆號的惟一標識
        timestamp: val.timestamp, // 必填，生成簽名的時間戳，注意是以秒爲單位
        nonceStr: val.nonceStr, // 必填，生成簽名的隨機串
        signature: val.signature, // 必填，簽名
        jsApiList: [ // 必填，須要使用的JS接口列表
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo'
        ] 
    });
    let share_config = {  // 抽取共同的設置
        imgUrl: location.origin + '/buyer_static/img/share.png', //分享卡片的圖標，默認當相對路徑處理，因此使用絕對路徑的的話，「http://」協議前綴必須在。
        desc: "愈來愈多的人，xxxxxx~", //摘要,若是分享到朋友圈的話，不顯示摘要。
        title: '我剛剛xxxxx', // 分享卡片標題
        link: val.inviteLink, // 分享出去後的連接，這裏是返回的連接。注意：不能包含 '#' 以及後面的內容！！
        success: function () { 
            // 分享成功後的回調函數
        },
        cancel: function () {
            // 用戶取消分享後執行的回調函數
        }
        // 還有其餘幾種回調函數，詳見官網文檔
    };
    wx.ready(function () {  // 設置好後，在 ready 函數裏調用分享方法，傳入設置
        wx.onMenuShareAppMessage(share_config); //分享給好友
        wx.onMenuShareTimeline(share_config); //分享到朋友圈
        wx.onMenuShareQQ(share_config); //分享給手機QQ
        wx.onMenuShareWeibo(share_config);  // 分享到微博
    });
    wx.error(function (res) { 
        // 經過error接口統一處理失敗驗證
        // config信息驗證失敗會執行error函數
    });
    wx.checkJsApi({  // 檢測所使用的 api 是否可用
        jsApiList: [ // 須要檢測的JS接口列表，全部JS接口列表見附錄2
         'onMenuShareTimeline',
         'onMenuShareAppMessage',
         'onMenuShareQQ',
         'onMenuShareWeibo'
        ],
        success: function (res) {
            // 以鍵值對的形式返回，可用的api值true，不可用爲false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
}
},
created() {
    // 本地開發不須要驗證
    if (process.env.NODE_ENV === 'production') {
        // 進入頁面時獲取、設置配置
        this.getWeixinConfig()
    }
}

常見問題

注意：如下內容都基於微信管理後臺已經綁定前端傳過去的域名 到 appId 上。

一、返回 40001 code

源頭：accessToken 過時
 
 緣由：accessToken 是經過 appId 和 appSecret 運算獲得的，用於生成jsapi_ticket -> 生成後面須要的 noncestr、timestamp 等
 
 內容。 accessToken 默認 2 小時後過時，即正常狀況下，後臺 2 小時請求一次便可。可是，若是在其餘地方調用同一套 appId 和 
 
 appSecret 再次生成 accessToken，前一個就會在 5 分鐘內過時，致使驗證失敗。
 
 解決方法： 後端必須在本身的服務全局緩存 access_token 和 jsapi_ticket。

二、ios 下分享卡片不顯示縮略圖，而分享到朋友圈或者使用安卓分享都沒有問題。

源頭：縮略圖路徑有問題

緣由：縮略圖路徑包含了中文。

解決方法：將中文重命名爲英文； 或使用 encodeURI(imgUrl) 處理圖片路徑。

另有一個說法是分享的內容包含敏感詞，但我測試了一下沒發現問題，也提一下給後來人作個參考。可能的敏感詞有： 元、現金、紅包 等。

測試方法： 將標題和內容都換成數字，測試是否顯示縮略圖。

三、不能自定義分享按鈕

願景：頁面自定義分享按鈕，點擊調用分享功能。

結論：作不到，微信不容許。

四、其餘常見問題，見 js-sdk 文檔底部附錄5的說明。

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115