Vue项目全局配置微信分享思路详解

// 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)

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