最近又在vue中搗鼓了下微信公眾號(hào)api的接入整以,不得不說(shuō)這里邊水是真的深啊胧辽,上次分享了微信授權(quán)登錄和js-sdk簽名的部分,其中很多朋友私信我表示了疑惑公黑,今天我就再次嘗試?yán)眄樢幌逻@里邊的坑吧:
微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包邑商。
通過(guò)使用微信JS-SDK,網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照凡蚜、選圖人断、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力朝蜘,同時(shí)可以直接使用微信分享恶迈、掃一掃、卡券谱醇、支付等微信特有的能力暇仲,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。
分享頁(yè)面到朋友圈
上文是從官方文檔中摘出來(lái)的副渴,由此可見(jiàn)奈附,我們?nèi)绻獙?shí)現(xiàn)在公眾號(hào)的內(nèi)嵌h5中實(shí)現(xiàn)微信分享,支付等功能煮剧,就得引入js-sdk斥滤。
使用js-sdk有一個(gè)關(guān)鍵的環(huán)節(jié),那就是通過(guò)config接口注入權(quán)限驗(yàn)證配置轿秧,而配置中有個(gè)signature參數(shù)是需要借助服務(wù)端獲取的中跌,這里就不過(guò)多探討了,大家通過(guò)官方文檔可以深入了解菇篡。
Hash or History?
上篇文章漩符,我推薦大家在vue中配置vue-router使用hash模式,那么hash模式和history模式到底有什么差別呢驱还?我舉個(gè)栗子嗜暴,假設(shè)我們都通過(guò)http://domain.com
進(jìn)入凸克,然后跳轉(zhuǎn)到路由為/jssdk
的頁(yè)面需要用到j(luò)ssdk,那么實(shí)際js-sdk進(jìn)行簽名校驗(yàn)時(shí)所獲取的當(dāng)前頁(yè)面url在ios和andrioid是不同的闷沥,這里我通過(guò)表格展示出來(lái):
真相都在表格里萎战,我表達(dá)能力不好恕我偷個(gè)懶23333333。
如果閣下沒(méi)有接入分享指定頁(yè)面的需求的話舆逃,hash模式很方便蚂维,但是無(wú)奈筆者需要接微信分享,如果使用hash模式路狮,分享出去的地址虫啥,微信會(huì)自動(dòng)處理掉#后邊的部分,那么我就沒(méi)法分享指定頁(yè)面到朋友圈或者給朋友了奄妨。
怎么辦呢涂籽,只能硬著腦子解決history問(wèn)題咯,其實(shí)也好解決砸抛,就是iOS需要使用第一次進(jìn)入頁(yè)面的URL獲取簽名评雌,安卓每次路由切換都重新配置簽名。我這里羅列兩個(gè)方案:
1.入口文件中記錄頁(yè)面URL直焙,在頁(yè)面組件創(chuàng)建完成后景东,ios獲取記錄的url進(jìn)行簽名,android獲取當(dāng)前路由(window.location.href.split('#')[0]
)箕般,請(qǐng)移步我的上一篇博客
2.入口文件中直接進(jìn)行簽名和注入配置耐薯,僅針對(duì)android在每次切換路由時(shí)再重新簽名和配置。該方案適合所有頁(yè)面都需要用到j(luò)s-sdk的情況
問(wèn)題記錄
現(xiàn)列出我在搗鼓過(guò)程中遇到的一個(gè)個(gè)bug:
1.安卓設(shè)備能分享ios設(shè)備不能分享丝里;
出現(xiàn)該問(wèn)題的原因就是因?yàn)椴捎昧薶istory模式曲初,且沒(méi)有考慮到ios校驗(yàn)簽名獲取的url是第一次訪問(wèn)的url而使用了切換后的url。
2.ios設(shè)備進(jìn)入頁(yè)面時(shí)不能分享杯聚,手動(dòng)刷新頁(yè)面后才能分享臼婆;
多次測(cè)試后我發(fā)現(xiàn),測(cè)試分享的時(shí)候幌绍,如果是訪問(wèn)的鏈接沒(méi)帶http://的話颁褂,除了首頁(yè)其他頁(yè)面都是失效的,測(cè)試時(shí)落地頁(yè)ur必須要加http://
3.點(diǎn)擊鏈接能正常分享傀广,點(diǎn)擊別人分享的圖文消息之后不能分享颁独;
猜想1:點(diǎn)擊圖文消息時(shí)候,微信進(jìn)行簽名校驗(yàn)的url去掉了自己添加的參數(shù)伪冰,所以我們?cè)谶M(jìn)行簽名時(shí)也要去掉微信添加的參數(shù)? 所以我把微信參數(shù)即
`?from=singlemessage&isappinstalled=0'這個(gè)部分去掉誓酒,結(jié)果依舊是分享失敗,而我自己隨意加一個(gè)參數(shù)贮聂,分享則正常靠柑,我隨意加兩個(gè)參數(shù)的時(shí)候寨辩,分享卻又不正常了。
猜想2: 微信分享進(jìn)行簽名校驗(yàn)的url僅能允許一個(gè)參數(shù)歼冰?所以我這樣寫(xiě):
url = location.href.split('&')[0]
,驗(yàn)證后發(fā)現(xiàn)是錯(cuò)誤的靡狞,再仔細(xì)一想我居然有這么可怕的想法,連官方文檔都不相信了隔嫡。
猜想3:url難道需要進(jìn)行編碼甸怕?即
url = encodeURIComponent(window.location.href.split('#')[0])
經(jīng)我多次debug,終于找到問(wèn)題畔勤,就是需要對(duì)簽名的url進(jìn)行編碼蕾各,word哥,不容易啊
僅需要對(duì)簽名的url進(jìn)行編碼庆揪,分享配置中的url不需要編碼
僅需要對(duì)簽名的url進(jìn)行編碼,分享配置中的url不需要編碼
僅需要對(duì)簽名的url進(jìn)行編碼妨托,分享配置中的url不需要編碼
這里又是一個(gè)坑缸榛,務(wù)必小心。
經(jīng)常N次的debug和嘗試之后我碼了幾十行代碼兰伤,解決了以上所有問(wèn)題内颗,回首一看我真的是年輕啊,也就那么簡(jiǎn)單的邏輯敦腔,也許換個(gè)人一步就到位了均澳,我卻和各種各樣的bug戰(zhàn)斗了n多遍(改動(dòng)一點(diǎn)代碼就要上生產(chǎn)環(huán)境debug的心酸有誰(shuí)能懂),唉符衔。找前。。
Coding
分享一下我怎么按照第二種方案進(jìn)行微信分享配置的
由于我項(xiàng)目中需求是基本所有頁(yè)面都需要能分享判族,所以在每個(gè)page組件中去獲取簽名是不實(shí)際的躺盛,所以我就想借助vue-router的after鉤子去完成分享配置的操作,對(duì)于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è)備槽惫,切換路由時(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)入頁(yè)面則進(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']
})
})
}
總結(jié): 總之簡(jiǎn)要概括就是要想分享成功,必須簽名是成功的辩撑,要想簽名成功界斜,必須保證調(diào)用簽名配置的時(shí)候微信校驗(yàn)簽名獲取的url(ios永遠(yuǎn)是第一次進(jìn)入頁(yè)面的url)和我們請(qǐng)求服務(wù)端獲取簽名時(shí)提交的url一致。
調(diào)用微信支付
兩個(gè)方案何去何從
h5使用微信支付合冀,細(xì)心的人會(huì)發(fā)現(xiàn)各薇,微信是有兩個(gè)方案的,我大致了解了一個(gè)水慨,一個(gè)是js-sdk中開(kāi)放的能力得糜,一個(gè)是微信支付開(kāi)放平臺(tái)提供的接口
微信支付版本:
如果你只需要在公眾號(hào)中調(diào)用支付敬扛,兩個(gè)方法都可以,筆者由于已經(jīng)使用js-sdk接入了其他功能朝抖,所以這里就選擇了chooseWXPay方式啥箭。
接入步驟
在其他功能都接入成功的前提下,接支付就很快很方便了治宣,筆者把主要步驟列下:
微信公眾平臺(tái)中配置好js安全接口域名(例如www.imwty.com)急侥,這個(gè)是調(diào)用js-sdk的前提,公眾號(hào)支付也是基于js-sdk侮邀;
微信支付平臺(tái)中設(shè)置支付目錄坏怪,參見(jiàn)微信支付開(kāi)發(fā)文檔,這里要說(shuō)明的是绊茧,你需要進(jìn)行支付的頁(yè)面路由是什么铝宵,就要配置什么,而且需要在后邊加上/(例如www.imwty.com/pay/)
調(diào)用js-sdk簽名配置(wechat.config)华畏,上文已有提及鹏秋。
在點(diǎn)擊支付按鈕的邏輯中,調(diào)用wechat.chooseWXPay()方法亡笑,該方法也涉及到支付簽名侣夷,需要從服務(wù)端去獲取簽名信息
注意的點(diǎn):訪問(wèn)支付頁(yè)面務(wù)必不要遺漏/
,微信那邊會(huì)嚴(yán)格比較調(diào)用第4步驟時(shí)你所在的頁(yè)面路由和支付平臺(tái)中設(shè)置的路由是否一致仑乌。
Coding
這里主要展示第4步驟中筆者的寫(xiě)法百拓,僅供參考
...
methods () {
handlerPay () {**粗體文本**
let self = this
// 進(jìn)行支付簽名
apiUtil.get('/api/jssdk/pay', {amount: this.amount}).then(function (wxmsg) {
self.$wechat.chooseWXPay({
// 支付簽名時(shí)間戳,注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)晰甚。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫(xiě)其中的S字符
appId: wxmsg.appId,
timestamp: wxmsg.timeStamp,
nonceStr: wxmsg.nonceStr, // 支付簽名隨機(jī)串衙传,不長(zhǎng)于 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 () {
...
})
}
}
結(jié)語(yǔ)
由于本人文筆一般,思維的表達(dá)估計(jì)不到位止剖,見(jiàn)解也是淺嘗輒止腺阳,所以如果看官您有疑惑的地方或者有歧義歡迎來(lái)和本人交流。為了方便大家互相溝通穿香,本人也創(chuàng)建了一個(gè)vue公眾號(hào)開(kāi)發(fā)的qq群亭引,歡迎加入和大家一起分享開(kāi)發(fā)心得,qq群號(hào):130903919