Vue項(xiàng)目全局配置微信分享的示例分析

這篇文章主要介紹了Vue項(xiàng)目全局配置微信分享的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用的技術(shù)

1.使用vue作為框架
2.使用vux作為UI組件庫(kù)

全局配置微信分享思路

1.區(qū)分一般和特殊，一般情況，全局配置默認(rèn)分享文案；特殊情況分兩種，一種是分享內(nèi)容不需要異步獲取，則在路由跳轉(zhuǎn)時(shí)配置，另一種是分享內(nèi)容需要異步獲取，則需要待異步內(nèi)容獲取后更新分享內(nèi)容。

2.不需要異步獲取的內(nèi)容我們采用定義在路由元信息的方式，直接在每次路由跳轉(zhuǎn)之后調(diào)用公共函數(shù)更新分享內(nèi)容。

具體可以查看微信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, // 分享標(biāo)題
    desc: desc || '默認(rèn)分享文案', // 分享描述
    link: link || window.location.href, // 分享鏈接
    imgUrl: imgUrl || '圖標(biāo)地址（必須是有效的Link）' // 分享圖標(biāo)
   })
   Vue.wechat.onMenuShareTimeline({
    title: timelineTitle || desc || '默認(rèn)分享文案', // 分享標(biāo)題，由于分享到朋友圈沒有desc，所以這里采用的策略是，指定的朋友圈分享標(biāo)題優(yōu)先，其次采用發(fā)送給朋友的描述，最后采用默認(rèn)文案。
    link: link || window.location.href, // 分享鏈接
    imgUrl: imgUrl || '圖標(biāo)地址（必須是有效的Link）' // 分享圖標(biāo)
   })
  })
  Vue.wechat.error((res) => {
  })
}
// 為Vue的原型對(duì)象添加該方法，則所有vue實(shí)例都能繼承該方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每個(gè)模塊都有自己內(nèi)部的路由配置
// codes...
const routes = [
  {
    path: '/index',
    name: 'index',
    redirect: '/index/homepage',
    children: [
     {
      path: '/index/homepage',
      name: 'homepage',
      component: homepage
      meta: { 
        title: '這是主頁(yè)', 
        shareDesc: '這是本站的主頁(yè)', 
        desc: 'homepage, click and see!',
        timelineTitle: '這是首頁(yè)，歡迎點(diǎn)擊關(guān)注，blablablablabla~~~',
        imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'
      }
     },
    ]
   }
]
// routerRule，公共路由配置，所有模塊共用一個(gè)路由控制策略
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)

經(jīng)過上面的配置，router.afterEach都會(huì)調(diào)用一次wxShare，重新讀取router中的meta的信息重新定義微信分享內(nèi)容，達(dá)到全局配置和特殊配置結(jié)合的目的。

需要異步獲取的分享內(nèi)容

這種情況，我們采取在vue實(shí)例的created鉤子中，在獲取數(shù)據(jù)的成功回調(diào)中調(diào)用一次wxShare即可

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

需要注意的坑點(diǎn)

1.如果項(xiàng)目采用非history模式，則需要去掉url上#后的部分傳給后端換取微信簽名。

2.根據(jù)微信官方說明：

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

由于SPA應(yīng)用，url變化之后，需要重新config一次，重新注入當(dāng)前頁(yè)面的配置信息，因此這個(gè)步驟必須在router.afterEach中調(diào)用！因?yàn)楦鶕?jù)vue-router的說明，在導(dǎo)航被確認(rèn)之后，再調(diào)用全局的afterEach鉤子，這個(gè)時(shí)候?qū)Ш揭呀?jīng)確認(rèn)了，url已經(jīng)改變，可以針對(duì)更新后的url重新獲取微信簽名了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue項(xiàng)目全局配置微信分享的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!