Vue中动态生成微信分享链接和分享文字

在微信网页开发中，如果需要在不同的页面，每次分享出去的信息都是动态的不同的，就是动态的链接或者标题、描述、图片等信息，可以通过vue的导航守卫来实现

一、在vue中需要引入微信jssdk

1. 配置安全域名（参考官方文档）

2. 引入微信的js文件，vue中可以直接npm安装也可以
   npm install weixin-js-sdk --save

3. 并在main.js中引入js：
   import wx from 'weixin-js-sdk'

4. 并且将wx绑定到vue原型上，那么其他的所有组件都可以使用：
   Vue.prototype.$wx = wx

5. 通过config接口注入权限验证配置
   在main.js中配置微信分享的权限接口

   wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: '', // 必填，公众号的唯一标识
       timestamp: , // 必填，生成签名的时间戳
       nonceStr: '', // 必填，生成签名的随机串
       signature: '',// 必填，签名，见附录1
       // 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口
       // 这里配置获取地理位置所需要的接口权限
       jsApiList: [
       	'checkJsApi',
       	'onMenuShareWeibo',
           'onMenuShareTimeline',
           'onMenuShareAppMessage',
           'onMenuShareQQ'   
       ]
   });
   
   wx.ready(function(){
    
       // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
   });
    
   wx.error(function(res){
    
       // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
   
   });
   
   
   

6. 配置微信分享接口内容

因为需要动态生成微信分享链接，所以将配置微信分享链接的信息封装为方法，分享的信息从方法的形参中获取，这样就可以动态传递分享信息了

在main.js中定义分享方法

function wxShareReady(shareInfo) {
  wx.ready(() => {
    wx.onMenuShareTimeline({
      title: shareInfo.title, // 分享标题
      link: shareInfo.link, // 分享链接
      imgUrl: shareInfo.img,
      desc: shareInfo.desc,
      success: function () {
      },
      cancel: function () {
      }
    })
    //分享到朋友圈
    wx.onMenuShareAppMessage({
      title: shareInfo.title, // 分享标题
      link: shareInfo.link, // 分享链接
      imgUrl: shareInfo.img,
      desc: shareInfo.desc,
      trigger: function (res) {
      },
      success: function (res) {
      },
      cancel: function (res) {
      },
      fail: function (res) {
      }
    })

    //分享到QQ
    wx.onMenuShareQQ({
      title: shareInfo.title, // 分享标题
      desc: shareInfo.desc, // 分享描述
      link: shareInfo.link, // 分享链接
      imgUrl: shareInfo.img, // 分享图标
      success: function () {
      },
      cancel: function () {
      }
    })
    //分享到微博
    wx.onMenuShareWeibo({
      title: shareInfo.title, // 分享标题
      desc: shareInfo.desc, // 分享描述
      link: shareInfo.link, // 分享链接
      imgUrl: shareInfo.imgUrl, // 分享图标
      success: function () {
      },
      cancel: function () {
      }
    })
  })
}

二、根据路由动态生成微信分享信息

1. 应该已经在main.js中引入router, 这个router.js只是定义了路由信息
   import router from './router/router.js'

2. 通过路由的导航守卫动态生成分享信息

vue的导航守卫可以在路由跳转的时候，获取到当前的路由对象、路由参数等一些路由的堆栈信息，并且可以设置是否可以进行跳转 （可以用来鉴权等），相当于路由拦截器

配置导航守卫

router.beforeEach((to, from, next) => {
  let shareInfo = {
    img: 'http://xxxxx/share.jpg',
    link: 'http://xxxx.com',
    title: '默认分享标题',
    desc: '默认分享描述'
  }
  // 判断路由的跳转path， to代表将要跳转的路由对象，from代表跳转之前的路由对象
  if (to.path === '/share') {
    shareInfo = {
      img: 'http://xxxxx/share1.jpg',
      link: 'http://xxxx1.com',
      title: '分享标题1',
      desc: '分享描述1'
    }
  } else if(to.path === 'play') {
  	shareInfo = {
      img: 'http://xxxxx/share2.jpg',
      link: 'http://xxxx2.com',
      title: '分享标题2',
      desc: '分享描述2'
    }
  }
  // 调用当前main.js中定义的分享方法，传递分享参数
  wxShareReady(shareInfo);

  // 调用next()方法放行，必须加上次方法，否则无法跳转
  next()
  
})

这样在不同的路由页面，通过微信分享出去的就是不同的分享链接和标题等