使用微信js-sdk自定義分享

Edwardzh發表於2018-11-07
JS

微信二次分享展示優化

原有的H5專案在微信分享後展示的只有縮圖和展示連結，影響了文章的二次傳播效果;
複製程式碼

使用微信js-sdk自定義分享

檢視官方文件後瞭解到可以用微信的jssdk:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115;
複製程式碼

一. JSSDK使用步驟

  • 1.1 繫結域名

  先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”，可以按照提示進行填寫，最多填寫三個。

  登入後可在“開發者中心”檢視對應的介面許可權，只有獲取了許可權才能保證後面的工作繼續進行。

  • 1.2 引入JS檔案

     在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：res.wx.qq.com/open/js/jwe… 支援使用 AMD/CMD 標準模組載入方法載入; 請注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 介面，即將廢棄。請儘快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支援的 wx.updateAppMessageShareData、updateTimelineShareData 介面。 實際測試中發現在客戶端6.7.2以下的版本中wx.updateAppMessageShareData、updateTimelineShareData 方法無法正常調起;為了相容老的客戶端我使用的是wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 介面

  • 1.3 通過config介面注入許可權驗證配置

   所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫;這裡要特別注意一下,後面會講到在webapp的場景下的處理（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫,目前Android微信客 戶端不支援pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

/* 獲取微信的sdk (獲取微信授權域名); wx.config配置項如下;
* @param {Boolean} debug   開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
* @param {String}  appId   必填，公眾號的唯一標識
* @param {String}  timestamp   必填，生成簽名的時間戳
* @param {String}  nonceStr    必填，生成簽名的隨機串
* @param {String}  signature   必填，簽名
* @param {Array}   jsApiList   必填，需要呼叫的JS介面列表
*/
export function getWechatSdk() {
    const url = location.href;
    apiPost('getWeiXinSign', { url }, 'wx').then(response =>{
        const res = response.data;
        wx.config({
            debug: false,              
            appId: res.appId,         
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature, 
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
    });
}
複製程式碼

  • 1.4 通過ready介面處理成功驗證;

    config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

/* 微信分享的方法;
* @param {String}  title     分享標題;
* @param {String}  link      分享連結;(location.href)
* @param {String}  imgUrl    分享圖示;(取後臺欄位, 沒有返回時預設取第一張圖片)
* @param {String}  desc      分享描述;(取後臺欄位, 沒有返回時採用產品定義的描述文案)
* @return {Object} success   確認分享後執行的回撥;
* @return {Object} cancel    取消分享後執行的回撥;
*/
export function wechatShare(title, link, imgUrl, desc) {
    wx.ready(function(){
        // 自定義“分享到朋友圈”
        wx.onMenuShareTimeline({
            title: title,  
            link: link,        
            imgUrl: imgUrl,
            success: function () {},
            cancel: function () {}
        });
        // 自定義“分享到QQ空間”
        wx.onMenuShareQZone({
            title: title,
            desc: desc,
            link: link,
            imgUrl: imgUrl,
            success: function () {},
            cancel: function () {}
        });
        // 自定義“分享給微信好友”
        wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: link,
            imgUrl: imgUrl,
            success: function () {},
            cancel: function () {}
        });
        // 自定義分享給QQ好友”
        wx.onMenuShareQQ({
            title: title,
            desc: desc,
            link: link,
            imgUrl: imgUrl,
            success: function () {},
            cancel: function () {}
        });
    })
}
複製程式碼

完成以上步驟後,在微信客戶端就可以正常發起自定義分享了;

使用微信js-sdk自定義分享
二. Webapp下使用的情況;

  • 按照之前的套路繼續優化一個react開發是spa的webapp;發現不能實現以上的效果;

  • IOS下遇到了問題：

      開啟頁面時分享沒有問題，路由跳轉一次之後再分享簽名錯誤（invalid signature）
複製程式碼

    這個問題是由於IOS微信瀏覽器下，有著下面的“特性”：

    把第一次開啟的頁面叫做進入頁；把前端路由若干次跳轉（通過pushState/replaceState改變url）之後，當前開啟的頁面叫做當前頁。 舉例在http://xxx.xxx.com/wx/index.html?#/product?id=1; 微信驗籤使用的url（當前網頁的URL，不包含#及其後面部分），在Android下取的是當前頁url，在IOS下取的是進入頁的url（支付目錄也是一樣） 這是就會造成簽名失敗;

  • Android下遇到了問題:

    是在蘋果手機的微信上面，只要呼叫 wx.config 一次就可以了，但是在 android 的手機，在頁面跳轉之後，wx.config（url 依然是進入網站的第一個頁面的地址，要儲存在一個變數裡面）;

    解決思路: 專案中用了 react-router(3.x版本, 4.x的沒有測試) ，直接在 Route 元件上繫結一個 onEnter 方法;

const enterTab = () => {
    if (isWechat()) getWechatSdk();
};
export default (
    <Route path="/" component={App}>
        <IndexRoute getComponent={xxx} />
        <Route path="product" getComponent={Product} onEnter={enterTab.bind(this)} />
    </Route>
);
export function getWechatSdk() {
    // 拿到微信授權域名http://xxx.xxx.com/wx/index.html進行簽名驗證;
    const url = window.location.href.split('#')[0]; 
    callApi('getWeiXinSign', { url }).then(res =>{
        wx.config({
            debug: false,              
            appId: res.appId,         
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature, 
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
    });
}
複製程式碼

完成以上步驟後,在微信客戶端spa也可以正常發起自定義分享了;

測試的react的spa,VUE沒有測試,單原理應該是相通的,不對之處歡迎批評指正

過程中參考了下面的文章;

相關文章