1. 程式人生 > >單頁面應用接入微信填坑之一(微信分享)

單頁面應用接入微信填坑之一(微信分享)

起因:使用react+react-router做了一個單頁面應用,需接入微信支付與分享等功能。由於是個人第一次接觸微信接入加之是單頁面應用所以遇到了很多問題。所以這裡記一下其中之一:分享功能!

微信官方說法:

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

問題:

我根據這段話的意思每當URL地址變化我就呼叫了一次wx.config,於是就出現了以下幾種狀況:
1:安卓微信6.2.7版
無法成功分享

2:安卓微信6.5.7版
每次都能成功分享

3:iOS版微信
無法成功分享

解決辦法:

1:安卓微信6.2.7版
將第一次進入頁面的地址儲存,之後每次頁面改變(即URL變化),就呼叫一次config。url使用第一次進入頁面的URL

2:安卓微信6.5.7版
每次URL變化都呼叫config,但是URL使用當前url

3:iOS版微信
只需要進入第一個頁面之後呼叫一次

原因:

安卓微信由於版本問題不支援pushState的問題已在6.3.31修復了,所以只需要根據系統和微信版本做出相應的分享操作就行了。

這裡給出兩個方法用於判斷:
是否為安卓客戶端

function isAndroid() {
    var u = window.navigator.userAgent;
    return u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
}

微信版本是否大於6.3.31

function weixinVersion() {
    var str = window.navigator.userAgent;
    var v0 = [6,3,31];
    var regExp = /MicroMessenger\/([\d|\.]+)/;
    if
(regExp.exec(str)===null) {return} var v1 = regExp.exec(str)[1].split('.'); if (v1.length >= 4) { v1 = v1.slice(0,3); } v1 = v1.map(function(v){ return parseInt(v, 10); }); if (v1[0] > v0[0]) { return true; } if (v1[0] === v0[0] && v1[1] > v0[1]) { return true; } if (v1[0] === v0[0] && v1[1] === v0[1] && v1[2] >= v0[2]) { return true; } return false; }

差不多講完了,如果有沒說清楚的地方,可以留言,希望能少讓人掉坑裡吧。
下一篇會講以下微信接入支付遇到的坑。