微信JS-SDK是微信公眾平臺提供給網(wǎng)頁開發(fā)者的以微信內(nèi)為基礎(chǔ)的網(wǎng)頁開發(fā)工具包。
透過使用微信JS-SDK，網(wǎng)頁開發(fā)者可藉助微信有效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗

我們?nèi)绻獙崿F(xiàn)在公眾號的內(nèi)嵌h5中實現(xiàn)微信分享，支付等功能，就得引入js- sdk。

使用js-sdk有一個關(guān)鍵的環(huán)節(jié)，就是透過config介面注入權(quán)限來驗證配置，而配置中有個signature參數(shù)是需要藉助服務(wù)端取得的，這裡就不過多探討了，大家透過官方文件可以深入了解。

Hash or History?

上篇文章，我推薦大家在vue中設(shè)定vue-router使用hash模式，那麼hash模式和history模式到底有什麼差別呢？我舉個栗子，假設(shè)我們都透過http://domain.com進(jìn)入，然後跳到路由為/jssdk的頁面需要用到j(luò)ssdk，那麼實際js-sdk進(jìn)行簽名校驗時所取得的目前頁面url在ios和andrioid是不同的，這裡我透過表格展示出來：

##真相都在表格裡，我表達(dá)能力不好恕我偷個懶23333333。

如果閣下沒有接入分享指定頁面的需求的話，hash模式很方便，但是無奈筆者需要接微信分享，如果使用hash模式，分享出去的地址，微信會自動處理掉#後邊的部分，那我就沒辦法分享指定頁面到朋友圈或是給朋友了。

怎麼辦呢，只能硬著腦子解決history問題咯，其實也好解決，就是
iOS需要使用第一次進(jìn)入頁面的URL獲取簽名，安卓每次路由切換都重新配置簽名。我在這裡羅列兩個方案：

1. 入口文件中記錄頁面URL，在頁面元件建立完成後，ios取得記錄的url進(jìn)行簽名，android取得目前路由（

   window .location.href.split('#')[0]），請移步我的上一篇部落格

2. 入口檔中直接進(jìn)行簽名和注入配置，僅針對android在每次切換路由時再重新簽署和配置。這個方案適合所有頁面都需要用到j(luò)s-sdk的情況

問題記錄

現(xiàn)列出我在搗鼓過程中遇到的一個個bug：

1. 安卓設(shè)備能分享ios設(shè)備不能分享；

#出現(xiàn)該問題的原因就是因為採用了history模式，沒有考慮到ios校驗簽所獲取的url是第一次造訪的url而使用了切換後的url。

1. ios裝置進(jìn)入頁面時不能分享，手動刷新頁面後才能分享；

這個bug很奇怪，筆者也沒搞清楚具體什麼情況，如果閣下知道，務(wù)必和我分享哦

1. 點擊連結(jié)能正常分享，點擊別人分享的圖文訊息之後不能分享；

猜想1：點擊圖文訊息時候，微信進(jìn)行簽名校驗的url去掉了自己添加的參數(shù)，所以我們在進(jìn)行簽名時也要去掉微信添加的參數(shù)? 所以我把微信參數(shù)即

` ?from=singlemessage&isappinstalled=0'這個部分去掉，結(jié)果依舊是分享失敗，而我自己隨意加一個參數(shù)，分享則正常，我隨意加兩個參數(shù)的時候，分享卻又不正常了。

猜想2: 微信分享進(jìn)行簽章校驗的url只能允許一個參數(shù)？所以我這樣寫：

url = location.href.split('&')[0],驗證後發(fā)現(xiàn)是錯誤的，再仔細(xì)一想我居然有這麼可怕的想法，連官方文件都不相信了。

猜想3：url難道需要編碼？即

url = encodeURIComponent(window.location.href.split('#')[0])經(jīng)我多次debug，終於找到問題，就是需要對簽名的url進(jìn)行編碼，word哥，不容易啊

只需要對簽名的url進(jìn)行編碼，分享配置中的url不需要編碼
只需要對簽名的url進(jìn)行編碼，分享配置中的url不需要編碼
只需要對簽名的url進(jìn)行編碼，分享配置中的url不需要編碼

這裡又是一個坑，務(wù)必小心。

經(jīng)常N次的debug和嘗試之後我碼了幾十行程式碼，解決了以上所有問題，回首一看我真的是年輕啊，也就那麼簡單的邏輯，也許換個人一步就到位了，我卻和各種各樣的bug戰(zhàn)鬥了n多遍（改動一點程式碼就要上生產(chǎn)環(huán)境debug的心酸有誰能懂），唉。 。 。

Coding

分享我怎麼按照第二種方案進(jìn)行微信分享配置的
由於我專案中需求是基本所有頁面都需要能分享，所以在每個page元件中去獲取簽名是不實際的，所以我就想藉助vue-router的after鉤子去完成分享配置的操作，對於android則還需要重新進(jìn)行簽名。

//?main.js
...
import?wx?from?'weixin-js-sdk'
import?request?from?'axios'
...
router.afterEach((to,?from)?=>?{
??let?_url?=?window.location.origin?+?to.fullPath
??//?非ios設(shè)備，切換路由時候進(jìn)行重新簽名
??if?(window.__wxjs_is_wkwebview?!==?true)?{
????request.get('/api/jssdk?url='?+?encodeURIComponent(_url)).then(function?(_lists)?{
??????//?注入配置
??????wx.config({
??????...
??????})
????})
??}
??//?微信分享配置
??wx.ready(function?()?{
????wx.onMenuShareTimeline({
?????...
????})
????wx.onMenuShareAppMessage({
??????...
????})
??})
})

...
//?ios?設(shè)備進(jìn)入頁面則進(jìn)行js-sdk簽名
if?(window.__wxjs_is_wkwebview?===?true)?{
??let?_url?=?window.location.href.split('#')[0]
??request.get('/api/jssdk?url='?+?encodeURIComponent(_url)).then(function?(res)?{
????let?_lists?=?res
????wx.config({
??????debug:?false,
??????appId:?_lists.appId,
??????timestamp:?_lists.timestamp,
??????nonceStr:?_lists.nonceStr,
??????signature:?_lists.signature,
??????jsApiList:?['chooseImage',?'uploadImage',?'previewImage',?'onMenuShareTimeline',?'onMenuShareAppMessage',?'onMenuShareTimeline',?'chooseWXPay']
????})
??})
}

呼叫微信支付

兩個方案何去何從

h5使用微信支付，細(xì)心的人會發(fā)現(xiàn)，微信是有兩個方案的，我大致了解了一個，一個是js-sdk中開放的能力，一個是微信支付開放平臺提供的介面

js-sdk版本:

#微信支付版本：

如果你只需要在公眾號中呼叫支付，兩個方法都可以，筆者由於已經(jīng)使用js-sdk接入了其他功能，所以這裡就選擇了chooseWXPay方式。

接入步驟

在其他功能都接入成功的前提下，接支付就很快很方便了，筆者把主要步驟列下：

1. 微信公眾平臺中配置好js安全介面網(wǎng)域（例如www.imwty.com），這個是呼叫js-sdk的前提，公眾號支付也是基於js-sdk；

2. ##微信支付平臺中設(shè)定支付目錄，請參閱微信支付開發(fā)文檔，這裡要說明的是，你需要進(jìn)行支付的頁面路由是什麼，就要配置什麼，而且需要在後邊加上/（例如www.imwty .com/pay/）

3. 呼叫js-sdk簽章設(shè)定（wechat.config），上文已有提及。

4. 在點擊支付按鈕的邏輯中，呼叫wechat.chooseWXPay()方法，該方法也涉及到支付簽名，需要從服務(wù)端去獲取簽名資訊

#注意的點：訪問付款頁面務(wù)必不要遺漏

/，微信那邊會嚴(yán)格比較調(diào)用第4步驟時你所在的頁面路由和支付平臺中設(shè)定的路由是否一致。

Coding

這裡主要展示第4步驟中筆者的寫法，僅供參考

...
methods?()?{
?handlerPay?()?{**粗體文本**
????let?self?=?this
????//?進(jìn)行支付簽名
????apiUtil.get('/api/jssdk/pay',?{amount:?this.amount}).then(function?(wxmsg)?{
??????self.$wechat.chooseWXPay({
?????//?支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
??????????appId:?wxmsg.appId,
??????????timestamp:?wxmsg.timeStamp,
??????????nonceStr:?wxmsg.nonceStr,?//?支付簽名隨機(jī)串，不長于?32?位
??????????package:?wxmsg.package,?//?統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）
??????????signType:?wxmsg.signType,?//?簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
??????????paySign:?wxmsg.paySign,?//?支付簽名
??????????success:?function?(res)?{
????????????//?支付成功的回調(diào)函數(shù)
??????????},
??????????cancel:?function?(res)?{
????????????//?支付取消的回調(diào)函數(shù)
??????????},
??????????error:?function?(res)?{
????????????//?支付失敗的回調(diào)函數(shù)
??????????}
????}).catch(function?()?{
??????...
????})
??}
}

相關(guān)推薦：

微信公眾號開發(fā)設(shè)定常見錯誤訊息總結(jié)

微信公眾號開發(fā)的詳細(xì)介紹

php中文網(wǎng)微信公眾號使用正確姿勢！獲取你意想不到的資源！

以上是vue微信公眾號開發(fā)踩坑紀(jì)錄的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！