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

微信二次分享展現優化

原有的H5項目在微信分享後展現的只有縮略圖和展現連接，影響了文章的二次傳播效果;
複製代碼

查看官方文檔後瞭解到能夠用微信的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 () {}
        });
    })
}
複製代碼

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

二. 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沒有測試,單原理應該是相通的,不對之處歡迎批評指正

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

• www.cnblogs.com/joshua317/p…
• www.jianshu.com/p/c4f216b0c…
• www.jianshu.com/p/e3022dd18…