最近有點記不清微信 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 上。

1、返回 40001 code

 源頭：accessToken 過期
 
 原因：accessToken 是通過 appId 和 appSecret 運算得到的，用於生成jsapi_ticket -> 生成後面需要的 noncestr、timestamp 等
 
 內容。 accessToken 默認 2 小時後過期，即正常情況下，後台 2 小時請求一次即可。但是，如果在其他地方調用同一套 appId 和 
 
 appSecret 再次生成 accessToken，前一個就會在 5 分鐘內過期，導致驗證失敗。
 
 解決方法： 後端必須在自己的服務全局緩存 access_token 和 jsapi_ticket。
 

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

源頭：縮略圖路徑有問題

原因：縮略圖路徑包含了中文。

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

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

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

3、不能自定義分享按鈕

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

結論：做不到，微信不允許。

4、其他常見問題，見 js-sdk 文檔底部附錄5的説明。

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