Vue項目全局配置微信分享實踐

這篇文章也發在個人博客，歡迎圍觀😄

寫在前面

這個項目爲移動端項目，主要用於接入公衆號服務。項目採用兩種登陸方式，微信受權登陸以及帳號密碼登陸。對於移動端項目而言，爲了便於項目擴展以及提供開發熱更新速度，項目分爲不一樣的模塊，每一個模塊是一個單頁面應用。頁面分爲兩種，一種是須要用戶登陸以後才能瀏覽，另外一種是用戶無需登陸便可瀏覽。不管哪種，均配置微信分享。

使用的技術

1. 使用vue做爲框架
2. 使用vux做爲UI組件庫

全局配置微信分享思路

1. 區分通常和特殊，通常狀況，全局配置默認分享文案；特殊狀況分兩種，一種是分享內容不須要異步獲取，則在路由跳轉時配置，另外一種是分享內容須要異步獲取，則須要待異步內容獲取後更新分享內容。
2. 不須要異步獲取的內容咱們採用定義在路由元信息的方式，直接在每次路由跳轉以後調用公共函數更新分享內容。

具體能夠查看微信JSSDK的使用說明

// wxShare.js
import Vue from 'vue'

// 在組件外使用vux集成的微信jssdk
import { 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.js

import 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從新獲取微信簽名了。

---

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