Vue項目全局配置微信分享思路詳解

更新時間：2018年05月04日 14:26:40 作者：FrankCheung

這篇文章給大家介紹了vue項目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫，具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧

這個項目為移動端項目，主要用于接入公眾號服務(wù)。項目采用兩種登錄方式，微信授權(quán)登錄以及賬號密碼登錄。對于移動端項目而言，為了便于項目擴展以及提供開發(fā)熱更新速度，項目分為不同的模塊，每個模塊是一個單頁面應(yīng)用。頁面分為兩種，一種是需要用戶登錄之后才能瀏覽，另一種是用戶無需登錄即可瀏覽。無論哪一種，均配置微信分享。

使用的技術(shù)

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

全局配置微信分享思路

1.區(qū)分一般和特殊，一般情況，全局配置默認分享文案；特殊情況分兩種，一種是分享內(nèi)容不需要異步獲取，則在路由跳轉(zhuǎn)時配置，另一種是分享內(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, // 分享標題
    desc: desc || '默認分享文案', // 分享描述
    link: link || window.location.href, // 分享鏈接
    imgUrl: imgUrl || '圖標地址（必須是有效的Link）' // 分享圖標
   })
   Vue.wechat.onMenuShareTimeline({
    title: timelineTitle || desc || '默認分享文案', // 分享標題，由于分享到朋友圈沒有desc，所以這里采用的策略是，指定的朋友圈分享標題優(yōu)先，其次采用發(fā)送給朋友的描述，最后采用默認文案。
    link: link || window.location.href, // 分享鏈接
    imgUrl: imgUrl || '圖標地址（必須是有效的Link）' // 分享圖標
   })
  })
  Vue.wechat.error((res) => {
  })
}
// 為Vue的原型對象添加該方法，則所有vue實例都能繼承該方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每個模塊都有自己內(nèi)部的路由配置
// 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: '這是首頁，歡迎點擊關(guān)注，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)

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

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

這種情況，我們采取在vue實例的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>

需要注意的坑點

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

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

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

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

總結(jié)

以上所述是小編給大家介紹的Vue項目全局配置微信分享思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: