vue項目接入微信JSSDK的坑

---

date: 2018-12-13 15:23:09

用於記錄接入微信JS-SDK的坑，之後方便查詢
第一次接入公衆號微信支付、分享、定位等等的坑的時候，內心是迷茫而又恐懼。由於，據說坑特別多，後來發現本身的親身體驗到了這一點。

支付的坑

一、當前URL未註冊

• 問題: 微信公衆號H5調起支付時，點擊支付按鈕出現「當前頁面的URL未註冊」的提示。
• 解決辦法:因爲2017年8月1日微信官方把關於支付的信息轉移到了商戶平臺：公衆平臺微信支付公衆號支付受權目錄、掃碼支付回調URL配置入口已於8月1日遷移至商戶平臺（pay.weixin.qq.com ）

因此進入如下位置：

登陸微信商戶平臺-產品中心-開發配置，配置支付受權路徑。若是掉起支付的頁面在 域名/pay.html中，那麼就在此添加受權路徑，如個人掉起支付的頁面在www.weixinPay.com/pay.html 中，那麼受權目錄就配置爲htt://www.weixinPay.com/

tip: 注意：後面的 / 必定要加上，表示該路徑下的頁面均可以調起微信的支付接口。

二、若是按照以上仍是彈出當前URL未註冊
由於微信支付對spa項目的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)
    }
  }

我這裏是根據App.vue文件，進行路由監控。而後給每一個頁面都加上問號，雖然會些許性能消耗。可是方便省事，具體能夠根據本身的頁面適當修改。

• 微信JS-SDK說明文檔

分享的坑

根據JS-SDK的文檔，不少人都是在初始化的wx配置的時候，傳入的當前的URL地址不正確。
而後就致使以下結果:

• 解決辦法: 請在保證後臺能正確返回初始化須要的配置參數的狀況下

修改前:
// let currentUrl = window.location.href
修改後
let currentUrl = window.location.href.split('#')[0]

神奇成功了開心

須要注意的幾點:

• jsApList: [] 須要加入對應參數。好比，分享加入'onMenuShareTimeline', 'onMenuShareAppMessage'。

具體的對應接口的參數能夠參考文檔

• 全部接口的調用，請保證在wx.ready()執行後，才調用。文檔裏面是這麼建議的。

定位的坑

剛開始定位的，心裏是有點小激動的。由於以爲這個功能很高大尚，固然了這只是我我的的想法。好了~，不扯了。

一樣的，給微信初始化的jsApList加入對應的參數。
而後在wx.ready()函數執行，可是，發現不管如何第一次進入頁面都沒法成功彈出受權彈框。

後來發現，在頁面完成以後。延遲一秒再進行獲取定位，便可 百分百成功！坑爹有木有。
代碼以下

目前遇到這個三個坑，後期遇到再寫上吧。痛苦的經歷須要不要再有了

關注公衆號'前端樹'，更多實用性的乾貨