用于記錄接入微信JS-SDK的坑,以后方便查詢 第一次接入公眾號微信支付、分享、定位等等的坑的時候,心里是迷茫而又恐懼。因?yàn)?,聽說坑特別多,后來發(fā)現(xiàn)自己的親身體驗(yàn)到了這一點(diǎn)。
渦陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),渦陽網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為渦陽超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的渦陽做網(wǎng)站的公司定做!
支付的坑
1、當(dāng)前URL未注冊
問題: 微信公眾號H5調(diào)起支付時,點(diǎn)擊支付按鈕出現(xiàn)“當(dāng)前頁面的URL未注冊”的提示。
解決辦法:由于2017年8月1日微信官方把關(guān)于支付的信息轉(zhuǎn)移到了商戶平臺:公眾平臺微信支付公眾號支付授權(quán)目錄、掃碼支付回調(diào)URL配置入口已于8月1日遷移至商戶平臺(pay.weixin.qq.com )
所以進(jìn)入以下位置:
登錄微信商戶平臺-產(chǎn)品中心-開發(fā)配置,配置支付授權(quán)路徑。如果掉起支付的頁面在 域名/pay.html中,那么就在此添加授權(quán)路徑, 如我的掉起支付的頁面在www.weixinPay.com/pay.html 中,那么授權(quán)目錄就配置為htt://www.weixinPay.com/
tip: 注意:后面的 / 一定要加上,表示該路徑下的頁面都可以調(diào)起微信的支付接口。
2、如果按照以上還是彈出當(dāng)前URL未注冊 因?yàn)槲⑿胖Ц秾pa項(xiàng)目的hash路由兼容還是不很好。需要加上一個 "?" 如圖:
代碼如下:
watch: { $route() { this.directRightUrl() } }, methods: { directRightUrl() { let { href, protocol, host, pathname, search, hash } = window.location search = search || '?' let newHref = `${protocol}//${host}${pathname}${search}${hash}` if (newHref !== href) { window.location.replace(newHref) } }
我這里是根據(jù)App.vue文件,進(jìn)行路由監(jiān)控。然后給每個頁面都加上問號,雖然會些許性能消耗。但是方便省事,具體可以根據(jù)自己的頁面適當(dāng)修改。
微信JS-SDK說明文檔
分享的坑
根據(jù)JS-SDK的文檔,很多人都是在初始化的wx配置的時候,傳入的當(dāng)前的URL地址不正確。 然后就導(dǎo)致如下結(jié)果:
解決辦法: 請?jiān)诒WC后臺能正確返回初始化需要的配置參數(shù)的情況下
修改前: // let currentUrl = window.location.href 修改后 let currentUrl = window.location.href.split('#')[0]
神奇成功了開心
需要注意的幾點(diǎn):
jsApList: [] 需要加入對應(yīng)參數(shù)。比如,分享加入'onMenuShareTimeline', 'onMenuShareAppMessage'。 具體的對應(yīng)接口的參數(shù)可以參考文檔
所有接口的調(diào)用,請保證在wx.ready()執(zhí)行后,才調(diào)用。文檔里面是這么建議的。
定位的坑
剛開始定位的,內(nèi)心是有點(diǎn)小激動的。因?yàn)橛X得這個功能很高大尚,當(dāng)然了這只是我個人的想法。好了~,不扯了。
同樣的,給微信初始化的 jsApList加入對應(yīng)的參數(shù)。 然后在wx.ready()函數(shù)執(zhí)行,但是,發(fā)現(xiàn)無論如何第一次進(jìn)入頁面都無法成功彈出授權(quán)彈框。
后來發(fā)現(xiàn),在頁面完成之后。延遲一秒再進(jìn)行獲取定位,即可 百分百成功!坑爹有木有。 代碼如下
目前遇到這個三個坑,后期遇到再寫上吧。痛苦的經(jīng)歷需要不要再有了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。