Vue项目配置微信分享

一、引入微信js

// index.html
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

二、封装wxshare.js

// assets => js => 新建 wxshare.js
export function wxShare ({title, desc, link, imgUrl,success}={}) {
  let wxShare = {
    title: title || '默认标题', // 分享标题
    desc: desc || '默认分享文案', // 分享描述
    link: link || window.location.href, // 分享链接
    imgUrl: imgUrl || 'https://cn.vuejs.org/images/logo.png', // 分享图标
    success: function () {
      // 用户点击了分享后执行的回调函数
      success && success()
    }
  }
  wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    // wx.updateAppMessageShareData(wxShare)
    // 自定义“分享到朋友圈”及“分享到qq空间”
    // wx.updateTimelineShareData(wxShare)

    // 以上新分享方法的成功回调不是转发成功回调，而是自定义内容成功回调
    //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareAppMessage(wxShare);
    //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareTimeline(wxShare);
  })
  wx.error(res => {
    // config信息验证失败会执行error函数
    console.log(res)
  })
}

三、配置微信wx.config

// app.vue
 created(){
    this.wxShareConfig();
  },
  methods: {
    //配置微信转发
    wxShareConfig(){
      // 方便从接口中获取配置参数
      let appId = "wx7f963082054fe371";
      let nonceStr = "JrLvVC3ygqSlcBnc";
      let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
      let timestamp = "1592445883";
      // 配置信息
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
      })
    }
  }

四、使用

　　使用一：配置统一的分享内容

// main.js
import {wxShare} from './assets/js/wxshare';
// 为Vue的原型对象添加该方法，则所有vue实例都能继承该方法
Vue.prototype.$wxShare = wxShare

// App.vue
// 配置全局的分享
 created(){
    this.wxShareConfig();
  },
  methods: {
    //配置微信转发
    wxShareConfig(){
      // 方便从接口中获取配置参数
      let appId = "wx7f963082054fe371";
      let nonceStr = "JrLvVC3ygqSlcBnc";
      let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
      let timestamp = "1592445883";
      // 配置信息
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
      })
      this.$wxShare();
    }
  }

　　使用二： 每个模块都有固定的配置内容（在路由中配置固定的分享内容）

// App.vue
// 配置全局的分享
 created(){
    this.wxShareConfig();
  },
  methods: {
    //配置微信转发
    wxShareConfig(){
      // 方便从接口中获取配置参数
      let appId = "wx7f963082054fe371";
      let nonceStr = "JrLvVC3ygqSlcBnc";
      let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
      let timestamp = "1592445883";
      // 配置信息
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
      })
    }
  }

// router/index.js
import {wxShare} from '@/assets/wxshare';

// 商品详情
  {
    path: '/productDetail',
    name: 'productDetail',
    component: ProductDetail,
    meta: {
      title: '商品详情',
      link: 'http://www.baidu.com',
      desc: '啊哈哈哈哈哈哈'
    }
  },

router.afterEach(route => {
  wxShare({ title: route.meta.title, desc: route.meta.desc, link: route.meta.link, imgUrl: route.meta.imgUrl})
})

　　使用三：页面中单独修改分享内容 （如异步数据修改分享内容）

// 特定配置的页面
// 在vue实例的created钩子中

created(){
   this.$wxShare({
      title: '低头是泥污，抬头是彩虹',
      desc: '与你一同前行',
      success: () => {
         console.log('转发页面成功');
         //进行其他操作
      }
   })
},
// 或者 异步加载数据
created(){
   axios.post('http://test.jjo.cn/api',params).then(res => {
     this.$wxShare({
　　　　 title: res.title,
        desc: res.desc,
        ...
　　　})
   })
},

【实现】实现某一个页面配置单独的分享内容，其他页面内容一致

// wxshare.js
export function wxShare ({title, desc, link, imgUrl,success} = {}) {
    let wxShare = {
        title: title || '默认标题', // 分享标题
    desc:    desc || '默认分享文案', // 分享描述
    link:    link || window.location.href, // 分享链接
    imgUrl: imgUrl || 'https://cn.vuejs.org/images/logo.png', // 分享图标
    success: function () {
      // 用户点击了分享后执行的回调函数
      success && success()
    }
    }
  wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
    // wx.updateAppMessageShareData(wxShare)
    // 自定义“分享到朋友圈”及“分享到qq空间”
    // wx.updateTimelineShareData(wxShare)

    // 以上新分享方法的成功回调不是转发成功回调，而是自定义内容成功回调
    //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareAppMessage(wxShare);
    //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareTimeline(wxShare);
  })
  wx.error(res => {
    // config信息验证失败会执行error函数
    console.log(res)
  })
}

// App.vue
// 配置全局的分享
 created(){
    this.wxShareConfig();
  },
  methods: {
    //配置微信转发
    wxShareConfig(){
      // 方便从接口中获取配置参数
      let appId = "wx7f963082054fe371";
      let nonceStr = "JrLvVC3ygqSlcBnc";
      let signature = "66c459474ebbea661b38be92149c5f60d91d05ed";
      let timestamp = "1592445883";
      // 配置信息
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
      })
      this.$wxShare();
    }
  }

详情页单独配置

// detail.vue
  created() {
    getProductDetail({ commodity_id: this.$route.query.commodity_id }).then(
      res => {
        if (res.data.code == 200) {
          this.productDetail = res.data.data;
          this.seletdStock = res.data.data.total_stock;
          this.scrollImgList = res.data.data.scroll_image;
          this.$wxShare({
              title: this.productDetail.name,
              desc: "仅售" + this.productDetail.sale_price + "元，立即抢购！",
              link: '',
              imgUrl: this.scrollImgList[0]
          });
        }
      }
    );
  },

运行效果：

首页分享

详情页分享

【注意】需要注意的是从详情页返回至首页再次分享，配置的分享标题、图片、链接仍然为详情页的内容

【处理】 在详情页销毁之前将配置的内容重置

  beforeDestroy() {
    this.$wxShare();
  },