vue專案接入微信JSSDK的坑

---

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

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

支付的坑

1、當前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: 注意：後面的 / 一定要加上，表示該路徑下的頁面都可以調起微信的支付介面。

2、如果按照以上還是彈出當前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()函式執行，但是，發現無論如何第一次進入頁面都無法成功彈出授權彈框。

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

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

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