Vue項目全局配置微信分享的示例分析

這篇文章主要介紹了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重新獲取微信簽名了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue項目全局配置微信分享的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!