Vue專案全域性配置微信分享實踐

FrankCheung發表於2018-04-29
Vue

這篇文章也發在我的部落格，歡迎圍觀?

寫在前面

這個專案為移動端專案，主要用於接入公眾號服務。專案採用兩種登入方式，微信授權登入以及賬號密碼登入。對於移動端專案而言，為了便於專案擴充套件以及提供開發熱更新速度，專案分為不同的模組，每個模組是一個單頁面應用。頁面分為兩種，一種是需要使用者登入之後才能瀏覽，另一種是使用者無需登入即可瀏覽。無論哪一種，均配置微信分享。

使用的技術

  1. 使用vue作為框架
  2. 使用vux作為UI元件庫

全域性配置微信分享思路

  1. 區分一般和特殊，一般情況，全域性配置預設分享文案；特殊情況分兩種，一種是分享內容不需要非同步獲取，則在路由跳轉時配置，另一種是分享內容需要非同步獲取，則需要待非同步內容獲取後更新分享內容。
  2. 不需要非同步獲取的內容我們採用定義在路由元資訊的方式，直接在每次路由跳轉之後呼叫公共函式更新分享內容。

具體可以檢視微信JSSDK的使用說明

// wxShare.jsimport Vue from 'vue'// 在元件外使用vux整合的微信jssdkimport { 
WechatPlugin, AjaxPlugin 
  } from 'vux'Vue.use(WechatPlugin)Vue.use(AjaxPlugin)export default function wxShare ({title, desc, timelineTitle, link, imgUrl
  } = {
  }) { 
   Vue.wechat.config({ 
     debug: false,      appId: appId,      timestamp: timestamp,      nonceStr: nonceStr,      signature: signature,      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']    
  })    Vue.wechat.ready(() =>
 { 
     Vue.wechat.onMenuShareAppMessage({ 
       title: title, // 分享標題        desc: desc || '預設分享文案', // 分享描述        link: link || window.location.href, // 分享連結        imgUrl: imgUrl || '圖示地址（必須是有效的Link）' // 分享圖示      
  })      Vue.wechat.onMenuShareTimeline({ 
       title: timelineTitle || desc || '預設分享文案', // 分享標題，由於分享到朋友圈沒有desc，所以這裡採用的策略是，指定的朋友圈分享標題優先，其次採用傳送給朋友的描述，最後採用預設文案。        link: link || window.location.href, // 分享連結        imgUrl: imgUrl || '圖示地址（必須是有效的Link）' // 分享圖示      
  })    
  })    Vue.wechat.error((res) =>
 { 
   
  })
  }// 為Vue的原型物件新增該方法，則所有vue例項都能繼承該方法Vue.prototype.$wxShare = wxShare複製程式碼
// router/index.js  每個模組都有自己內部的路由配置// codes...const routes = [    { 
       path: '/index',        name: 'index',        redirect: '/index/homepage',        children: [          { 
           path: '/index/homepage',            name: 'homepage',            component: homepage            meta: { 
                title: '這是主頁',                 shareDesc: '這是本站的主頁',                 desc: 'homepage, click and see!',                timelineTitle: '這是首頁，歡迎點選關注，blablablablabla~~~',                imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'            
  }          
  },        ]      
  }]複製程式碼
// routerRule，公共路由配置，所有模組共用一個路由控制策略import wxShare from '@/utils/wxShare'export default function routerRule (router) { 
   // other codes...    router.afterEach(( to, from ) =>
 { 
       wxShare({ 
title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo
  })      
  })  
  }複製程式碼
// main.jsimport routerRule from ...routerRule(router)複製程式碼

經過上面的配置，router.afterEach都會呼叫一次wxShare，重新讀取router中的meta的資訊重新定義微信分享內容，達到全域性配置和特殊配置結合的目的。

需要非同步獲取的分享內容

這種情況，我們採取在vue例項的created鉤子中，在獲取資料的成功回撥中呼叫一次wxShare即可

// homepage.vue<
script>
export default { 
   data() { 
       return { 
                   
  }    
  },    created() { 
       getHomepageInfo()            .then( res =>
 { 
               this.$wxShare({ 
                   title: res.title,                    desc: res.desc,                    imgUrl: res.logo                
  })            
  } )    
  }
  }<
/script>
複製程式碼

需要注意的坑點

  1. 如果專案採用非history模式，則需要去掉url上#後的部分傳給後端換取微信簽名。
  2. 根據微信官方說明：

所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫…

由於SPA應用，url變化之後，需要重新config一次，重新注入當前頁面的配置資訊，因此這個步驟必須在router.afterEach中呼叫！因為根據vue-router的說明，在導航被確認之後，再呼叫全域性的afterEach鉤子，這個時候導航已經確認了，url已經改變，可以針對更新後的url重新獲取微信簽名了。

謹以此記錄自己踩坑過程，多有不足，望各位看官指正！

來源：https://juejin.im/post/5ae5e6c8518825673027eb56?utm_medium=fe&utm_source=weixinqun

相關文章