這篇文章將為大家詳細講解有關(guān)Vue微信公眾號開發(fā)踩坑的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),大安企業(yè)網(wǎng)站建設(shè),大安品牌網(wǎng)站建設(shè),網(wǎng)站定制,大安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,大安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

需求

• 微信授權(quán)登錄（基于公眾號的登錄方案）

• 接入JS-SDK實現(xiàn)圖片上傳，分享等功能

現(xiàn)狀及難點

• 采用的Vue框架，前后端分離模式（vue工程僅作為客戶端），用戶通過域名訪問的是客戶端，但是微信授權(quán)中涉及簽名和token校驗依賴服務(wù)端

• JS-SDK需要向服務(wù)端獲取簽名，且獲取簽名中需要的參數(shù)包括所在頁面的url，但由于單頁應(yīng)用的路由特殊，其中涉及到IOS和android微信客戶端瀏覽器內(nèi)核的差異性導(dǎo)致的兼容問題

解決方案

授權(quán)登錄

授權(quán)流程如下：

詳細說明：

1. 用戶訪問網(wǎng)站主域名

2. vue客戶端(domain/)接收請求，在路由解析前判斷用戶是否登錄（比如檢查cookie）；

3. 如果沒有登錄，則通過api獲取微信授權(quán)地址，獲取后跳轉(zhuǎn)到微信服務(wù)端授權(quán)頁面；

4. 用戶確認(rèn)授權(quán)，微信服務(wù)器發(fā)起回調(diào)請求，這時需要回調(diào)到服務(wù)器端（domain/api/xxx）

5. 服務(wù)器端保存用戶信息，進行注冊登錄操作（記錄cookie），重定向到vue客戶端（domain/）

6. 重復(fù)第一步，授權(quán)登錄成功

踩坑記錄：

以下是一個錯誤授權(quán)方案

這個方案為什么錯誤呢？其實如果只實現(xiàn)授權(quán)登錄到話，這個方案是可以的，而且也很清晰，vue客戶端單方面在服務(wù)器和微信服務(wù)器之間進行通信，微信服務(wù)器不能直接和服務(wù)器通信。這種方案的坑在于當(dāng)微信授權(quán)回調(diào)時會攜帶一個code參數(shù)，該參數(shù)會污染vue路由導(dǎo)致ios上進行JS-SDK簽名時失?。ê罄m(xù)會具體描述這個問題）

JS-SDK簽名

對于簽名，官方是這么說的

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用

vue中路由有history和hash兩種模式；在history模式下，理想的設(shè)計方案是，當(dāng)進入到需要用到JS-SDK組件時，獲取以下當(dāng)前url（也就是通過 location.href.split(‘#')[0]獲得到的地址）傳遞到服務(wù)端進行簽名，應(yīng)該就沒問題了，但是IOS獲取的url并不是調(diào)用微信js的時候所在頁面的地址，而是進入到網(wǎng)站第一個頁面的地址。

網(wǎng)上查詢到一個方案是針對ios設(shè)備進入頁面時先將當(dāng)前url記錄下來，到授權(quán)頁面時將記錄的url傳遞給服務(wù)端進行簽名。該方案經(jīng)實踐是可行的，媽媽再也不用擔(dān)心我的網(wǎng)址很丑很難看啦。

另外一個方案就是使用hash模式，這種模式下，url永遠都只是主域名地址，省去了傳遞url的煩惱，也沒必要處理兼容，所以如果不建議路由中有#的話，該方案應(yīng)該是選方案。

這里還有一個深坑，那就是如果授權(quán)方案采用了上述中的vue客戶端處理回調(diào)的方式，那么ios將永遠無法簽名成功，為什么呢，因為這種方案路由通常是這樣子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
重要的事情得說三遍啊

Coding

任何不上代碼的吹逼都是耍流氓，這里筆者分享下在vue中具體怎么coding的。

微信授權(quán)登錄

筆者在項目中使用的vue-router進行路由控制，使用了vuex記錄用戶登錄信息，但是由于vuex中存儲的內(nèi)容在頁面刷新后會丟失，所以服務(wù)端同時也寫了用戶登錄狀態(tài)到cookie中，vue中需要通過這兩個條件進行登錄判斷，不多BB，直接看代碼吧

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  // 第一次訪問
  console.log('授權(quán)登錄')
  // 跳轉(zhuǎn)到微信授權(quán)頁面，微信授權(quán)地址通過服務(wù)端獲得
  axios.post('/api/login').then(res => {
   var data = res.data
   if (data.code === 100) {
    window.location.href = data.data
   }
  })
 } else if (!store.state.userInfo) {
  // 刷新頁面，獲取數(shù)據(jù)存入vuex
  axios.get('/api/currentuser').then(res => {
   if (res.data.code === 100) {
    store.dispatch('setUserInfo', res.data.data)
    next()
   }
  })
  console.log('cookie生效期內(nèi)登錄')
  next()
 } else {
  // 已經(jīng)登錄
  console.log('已登錄')
  next()
 }
})

//... other code

history模式下的JS-SDK簽名

在入口文件中將當(dāng)前url存入vuex

// ... other code
router.beforeEach((to, from, next) => {
 document.title = to.meta.title
 // 處理jssdk簽名,兼容history模式
 if (!store.state.url) {
  store.commit('setUrl', document.URL)
 }
 // ... other code

在需要獲取簽名的組件中獲取并進行配置

// ... other code
created () {
   var sef = this
   var url = ''
   // 判斷是否是ios微信瀏覽器
   if (window.__wxjs_is_wkwebview === true) {
    url = this.$store.state.url.split('#')[0]
   } else {
    url = window.location.href.split('#')[0]
   }
   this.$http.get('/api/jssdk?url=' + url).then(function (res) {
    sef.lists = res.data.data
    hmTools.wechact(sef.lists, sef) //js-sdk配置
   })
  }
// ...other code

關(guān)于“Vue微信公眾號開發(fā)踩坑的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：Vue微信公眾號開發(fā)踩坑的示例分析-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/dcghds.html