微信分享 - 開荒

最近作的項目須要在微信中二次分享，可是這個過程當中遇到很多坑，因此記錄一下。至於爲何坑多？主要是平時比較粗心，文檔看的不夠仔細，其實文檔已經說的很詳細了，我遇到好多的問題都是再仔細看看文檔解決的；下面我就按照個人開發順序寫一寫，順便填一下坑；

準備，配置

首先要申請一個公衆號，並且要是企業公衆號！爲何？由於普通帳號不支持分享！！！憑啥？！

第一步：準備

進入本身的公衆號，位置：開發>基本配置；在這裏拿到AppID和AppSecret，這兩個就是要在後面獲取token的api的參數；須要注意平臺不會存儲AppSecret，也不要把AppSecret放到前端暴露出來，咱們放到node裏；

IP白名單也順便配置一下，就是調用獲取access_token接口時，須要設置訪問來源IP爲白名單。也就是咱們用的node服務器ip；須要注意下的ip別獲取成內網的ip！，若是不知道百度搜索ip就能查到了；

而後繼續再 公衆號設置>功能設置；配置js接口安全域名，這裏介紹也很詳細配置好域名，就能夠調用js了，還有微信提供的簽名文件要放到配置的域名下。

但這裏有個要注意,簽名文件放置的路徑要和配置域名路徑同樣。

到這裏準備工做完成，剩下的就是擼代碼了

第二步：代碼

node代碼

咱們項目加了一層node(用的是thinkjs框架)，因此生成簽名(signature)就直接本身搞定；先來幾行代碼看一下生成簽名的順序。 這裏主要看一下過程，因此沒有列出具體的代碼實現，只摘了一部分拼湊一下

// 隨機數
        const noncestr = Math.random().toString(36).substr(2);
        // 時間戳
        const timestamp = parseInt(new Date().getTime() / 1000);
        // url
        const url = this.ctx.param('url');
        // 微信請求地址
        const wx = {
            'appId': 'xxxxxxxxx',
            'appSecret': 'xxxxxxxxxx',
            'tokenUrl': `https://api.weixin.qq.com/cgi-bin/token`,
            'ticketUrl': `https://api.weixin.qq.com/cgi-bin/ticket/getticket`
        }
        // 獲取並存儲token
        const accessToken = await this.getDataFromCache(
            ACCESS_TOKEN_KEY,
            this.getAccessToken(wx)
        );
        // 獲取並存儲ticket
        const ticket = await this.getDataFromCache(
            JS_TICKET_KEY,
            this.getJsTicket(wx, accessToken)
        );
        // 生成
        const signature = generateWXSign({
            'jsapi_ticket': ticket,
            'noncestr': noncestr,
            'timestamp': timestamp,
            'url': url
        });
        return  { noncestr, timestamp, signature, wx.appId }
複製代碼

首先咱們要拿到token，經過token再獲取ticket，有了ticket就能夠根據騰訊的算法獲得signature了！下面來段根據騰訊提供的算法申請簽名的代碼；還有不知道url有什麼亂七八糟的字符，因此decodeURIComponent是必須的

token,ticket 這來貨 都有時效 2小時，操做很差就bug

再附上兩個連接，官方的調試工具：

• 驗證appid和appsecret url: mp.weixin.qq.com/debug?token…
• 驗證signature是否正確 url: mp.weixin.qq.com/debug/cgi-b…

import CryptoJS from 'crypto-js';

const genParamsStr = params => {
    const keys = Object.keys(params);
    return keys
        .sort()
        .reduce((ret, key) => {
            if ( params[key]) {
                ret.push(key + '=' + decodeURIComponent(params[key]));
                return ret;
            }
            return '';
        }, [])
        .join('&');
};

module.exports = {
    generateWXSign(panam) {
        let signParam = genParamsStr(panam);
        return CryptoJS.SHA1(signParam).toString();
    }
};
複製代碼

最開始的noncestr隨機數，timestamp時間戳，url，這三個值在前端代碼中，微信配置部分也是須要的，因此生成signature後要一塊兒返回；

到這兒node部分就結束了嗎？no！此處有一個坑會在下面‘填坑’部分講一下；

js部分

先把最基本的事幹了，擼一遍官方文檔（mp.weixin.qq.com/wiki?t=reso… ），再引入騰訊的js，須要注意官網提供的最新版本，而後支持一下http，https；

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
複製代碼

如今咱們再拿出《微信JS-SDK說明文檔》以下，居然有4個填空題！但我不怕，上面的node已經返回了，取到直接填上就行了； 有個要注意debug這個參數無論對錯，設置true都alert；

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: '', // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});
複製代碼

附上一個圖

雖然要廢棄 onMenuShareAppMessage，onMenuShareTimeline但我仍是繼續延用了，由於updateAppMessageShareData他們居然。。。報錯，查了一下好像是版本問題，但已是最新的js仍是報錯。沒有再繼續排查問題，既然sdk說‘即將廢棄’那就是還沒廢棄，我就偷懶繼續用了；

wx.ready(() => {
        // 分享好友
        wx.onMenuShareAppMessage({
            title: share.product_title, // 分享標題
            desc: share.product_description, // 分享描述
            link: window.location.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: share.product_image_url, // 分享圖標
            success: function() {
                console.log('onMenuShareAppMessage： success');
            }
        });
        // 分享朋友圈
        wx.onMenuShareTimeline({
            title: share.product_title, // 分享標題
            link: window.location.href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: share.product_image_url, // 分享圖標
            success: function() {
                // 用戶點擊了分享後執行的回調函數
            }
        });
    });
複製代碼

附上最後的代碼，到這一步分享就已經完成了；後面說一下我遇到坑，或者是我本身犯的錯；

第三步 坑

下面列一下我遇到的問題，但願對看到這篇文章的人有所幫助

1. 獲取token，ticket報的錯誤 'invalid ip 221.223.000.000, not in whitelist hint:[]'提示的很明顯了白名單沒配對，解決簡單粘貼提示的ip到公衆號裏面的ip白名單就行了；

2. 運行剛寫完代碼也許有個 'invalid signature' 簽名錯誤，也很簡單驗證一下就行了，上面部分有附上官方測試工具；

截圖

3. Error:invalid url domain ,這個錯誤就是公衆號中設置《JS接口安全域名》設置問題！先看提供的簽名txt文件沒有放對位置，域名對不對別配着正式環境，再測試環境調用。

4. 《JS接口安全域名》保存不了？找不到問題？仔細看一下圖中的紅框部分！

5. 還有個事要注意，也是上面node部分沒有解釋的。線上的服務器通常都是多臺（負載均衡），而最開始咱們是把token，ticket緩存在服務器，這就致使了每次訪問其中一臺，剩下的服務器存的token，tichet失效；ok，那就改了用redis；
6. 到最後了，還不行嗎？那看看公衆號，開發>接口權限 這個菜單！！！

7. 最最後了，還有問題嗎？請留言！一塊兒看看 😊

總結一下

主要仔細看文檔！不少時候都是忽略了一些細節，致使坑了半天。

越難以想象的bug，越多是弱X問題致使的！複製代碼