微信JS-SDK是微信公眾平台提供給網頁開發者的以微信內為基礎的網頁開發工具包。
透過使用微信JS-SDK,網頁開發者可藉助微信有效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗
使用js-sdk有一個關鍵的環節,就是透過config介面注入權限來驗證配置,而配置中有個signature參數是需要藉助服務端取得的,這裡就不過多探討了,大家透過官方文件可以深入了解。
上篇文章,我推薦大家在vue中設定vue-router使用hash模式,那麼hash模式和history模式到底有什麼差別呢?我舉個栗子,假設我們都透過http://domain.com
進入,然後跳到路由為/jssdk
的頁面需要用到jssdk,那麼實際js-sdk進行簽名校驗時所取得的目前頁面url在ios和andrioid是不同的,這裡我透過表格展示出來:
怎麼辦呢,只能硬著腦子解決history問題咯,其實也好解決,就是
iOS需要使用第一次進入頁面的URL獲取簽名,安卓每次路由切換都重新配置簽名。我在這裡羅列兩個方案:
window .location.href.split('#')[0]),請移步我的上一篇部落格
` ?from=singlemessage&isappinstalled=0'這個部分去掉,結果依舊是分享失敗,而我自己隨意加一個參數,分享則正常,我隨意加兩個參數的時候,分享卻又不正常了。
url = location.href.split('&')[0],驗證後發現是錯誤的,再仔細一想我居然有這麼可怕的想法,連官方文件都不相信了。
url = encodeURIComponent(window.location.href.split('#')[0])經我多次debug,終於找到問題,就是需要對簽名的url進行編碼,word哥,不容易啊
只需要對簽名的url進行編碼,分享配置中的url不需要編碼
只需要對簽名的url進行編碼,分享配置中的url不需要編碼
只需要對簽名的url進行編碼,分享配置中的url不需要編碼
分享我怎麼按照第二種方案進行微信分享配置的
由於我專案中需求是基本所有頁面都需要能分享,所以在每個page元件中去獲取簽名是不實際的,所以我就想藉助vue-router的after鉤子去完成分享配置的操作,對於android則還需要重新進行簽名。
// main.js ... import wx from 'weixin-js-sdk' import request from 'axios' ... router.afterEach((to, from) => { let _url = window.location.origin + to.fullPath // 非ios设备,切换路由时候进行重新签名 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 设备进入页面则进行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使用微信支付,細心的人會發現,微信是有兩個方案的,我大致了解了一個,一個是js-sdk中開放的能力,一個是微信支付開放平台提供的介面
js-sdk版本:
#微信支付版本:
如果你只需要在公眾號中呼叫支付,兩個方法都可以,筆者由於已經使用js-sdk接入了其他功能,所以這裡就選擇了chooseWXPay方式。
在其他功能都接入成功的前提下,接支付就很快很方便了,筆者把主要步驟列下:
微信公眾平台中配置好js安全介面網域(例如www.imwty.com),這個是呼叫js-sdk的前提,公眾號支付也是基於js-sdk;
/,微信那邊會嚴格比較調用第4步驟時你所在的頁面路由和支付平台中設定的路由是否一致。
... methods () { handlerPay () {**粗体文本** let self = this // 进行支付签名 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, // 支付签名随机串,不长于 32 位 package: wxmsg.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) signType: wxmsg.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' paySign: wxmsg.paySign, // 支付签名 success: function (res) { // 支付成功的回调函数 }, cancel: function (res) { // 支付取消的回调函数 }, error: function (res) { // 支付失败的回调函数 } }).catch(function () { ... }) } }
以上是vue微信公眾號開發踩坑紀錄的詳細內容。更多資訊請關注PHP中文網其他相關文章!