欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue微信公眾號開發(fā)踩坑全記錄

 更新時間:2017年08月21日 09:05:59   作者:imwty  
本篇文章主要介紹了詳解Vue微信公眾號開發(fā)踩坑全記錄,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了Vue微信公眾號開發(fā)踩坑全記錄,分享給大家,也給自己留個筆記。

需求

  • 微信授權(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)流程如下:

詳細(xì)說明:

  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ù)器端保存用戶信息,進(jìn)行注冊登錄操作(記錄cookie),重定向到vue客戶端(domain/)
  6. 重復(fù)第一步,授權(quán)登錄成功

踩坑記錄:

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

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

JS-SDK簽名

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

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

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

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

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

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

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

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

Coding

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

微信授權(quán)登錄

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

在需要獲取簽名的組件中獲取并進(jìn)行配置

// ... 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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3項目如何使用prettier格式化代碼

    vue3項目如何使用prettier格式化代碼

    這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue項目中Eslint校驗代碼報錯的解決方案

    vue項目中Eslint校驗代碼報錯的解決方案

    這篇文章主要介紹了vue項目中Eslint校驗代碼報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 一文詳解Vue中過濾器filters的使用

    一文詳解Vue中過濾器filters的使用

    Vue.js允許自定義過濾器,過濾器的作用可被用于一些常見的文本格式化(也就是修飾文本,但是文本內(nèi)容不會改變),本文主要來和大家講講過濾器filters的使用,感興趣的可以了解一下
    2023-04-04
  • Vue使用Clipboard.JS在h5頁面中復(fù)制內(nèi)容實例詳解

    Vue使用Clipboard.JS在h5頁面中復(fù)制內(nèi)容實例詳解

    在本篇文章里小編給大家整理了關(guān)于Vue使用Clipboard.JS在h5頁面中復(fù)制內(nèi)容以及相關(guān)知識點內(nèi)容,需要的朋友們可以學(xué)習(xí)下。
    2019-09-09
  • 使用Vue寫一個datepicker的示例

    使用Vue寫一個datepicker的示例

    這篇文章主要介紹了使用Vue寫一個datepicker的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • vue實現(xiàn)整屏滾動切換

    vue實現(xiàn)整屏滾動切換

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)整屏滾動切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • Element圖表初始大小及窗口自適應(yīng)實現(xiàn)

    Element圖表初始大小及窗口自適應(yīng)實現(xiàn)

    這篇文章主要介紹了Element圖表初始大小及窗口自適應(yīng)實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • Vue3中操作ref的四種使用方式示例代碼(建議收藏)

    Vue3中操作ref的四種使用方式示例代碼(建議收藏)

    這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢

    Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢

    這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue.js彈出模態(tài)框組件開發(fā)的示例代碼

    Vue.js彈出模態(tài)框組件開發(fā)的示例代碼

    本篇文章主要介紹了Vue.js彈出模態(tài)框組件開發(fā)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論