vue实现微信二次分享以及自定义分享的示例

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appid: '', // 必填，公众号的唯一标识
 timestamp: , // 必填，生成签名的时间戳
 noncestr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名
 jsapilist: [] // 必填，需要使用的js接口列表
});

wx.checkjsapi({
 jsapilist: ['chooseimage'], // 需要检测的js接口列表，所有js接口列表见附录2,
 success: function(res) {
 // 以键值对的形式返回，可用的api值true，不可用为false
 // 如：{"checkresult":{"chooseimage":true},"errmsg":"checkjsapi:ok"}
 }
});

wx.ready(function () { //需在用户可能点击分享按钮前就先调用
 wx.updateappmessagesharedata({ 
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
  imgurl: '', // 分享图标
  success: function () {
   // 设置成功
  }
 })
});

wx.error(function(res){
 // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于spa可以在这里更新签名。
});

// wetchat.js －－ 个人封装
import wx from 'weixin-js-sdk'; // 引入wxjs
import apiurl from "@/api/index"; // 本项目的api （根据自己项目）
export function wxchatshare(param) {
 let _url = encodeuricomponent(param.url) // 当前页面的url
 apiurl.wechatconfig(_url) // wechatconfig是获取微信配置相关信息的接口，此处根据个人项目写法而定，类似于this.$ajax
 .then (res => {
  if(res.data.code==200) {
  // 接口返回配置信息
   wx.config({
    debug: false,
    appid: res.data.content.appid,
    timestamp: res.data.content.timestamp, // 必填，生成签名的时间戳
    noncestr: res.data.content.noncestr, // 必填，生成签名的随机串
    signature: res.data.content.signature, // 必填，签名
    jsapilist: [ // 用的方法都要加进来
     'updateappmessagesharedata', 'updatetimelinesharedata', 'onmenusharetimeline', 'onmenushareappmessage'
    ]
   });
   wx.ready(function () {
    //分享到朋友圈

    wx.updatetimelinesharedata({ 
     title: param.title, // 分享标题
     link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
     imgurl: param.imgurl, // 分享图标
     success: function () {
      // 设置成功
      console.log("分享到朋友圈成功返回的信息为:", res);
      this.$message.message("设置成功!");
     }
    })

    wx.onmenusharetimeline({
     title: param.title, // 分享标题
     link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
     imgurl: param.imgurl, // 分享图标
     success: function () {
     // 用户点击了分享后执行的回调函数
     },
    })

    //分享给朋友

    wx.updateappmessagesharedata({ 
     title: param.title, // 分享标题
     desc: param.desc, // 分享描述
     link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
     imgurl: param.imgurl, // 分享图标
     success: function () {
      // 设置成功
      console.log("分享到朋友圈成功返回的信息为:", res);
      this.$message.message("设置成功!");
     }
    })
    wx.onmenushareappmessage({
     title: param.title, // 分享标题
     desc: param.desc, // 分享描述
     link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
     imgurl: param.imgurl, // 分享图标
     type: param.type, // 分享类型,music、video或link，不填默认为link
     dataurl: param.dataurl, // 如果type是music或video，则要提供数据链接，默认为空
     success: function () {
     // 用户点击了分享后执行的回调函数
     }
    });
   });
   wx.error(function (res) {
    console.log('验证失败返回的信息:', res);
   });
  } else {
   console.log(res.data.message);
  }
 })
 }

// home.vue

 import * as wechatjs from '@/utils/wechat' // 引入wechat.js

// 写在方法中调用，或者在生命周期中调用
let _param = {
 studentid: 1, // 个人项目而定
 activityid: 1, // 个人项目而定
 url: window.location.href, // 当前页面url
 title: "为我点赞，一起免费抢考拉阅读vip会员卡，畅读一万本好书～", // 分享数据配置
 desc: "孩子要读书，上考拉阅读", // 分享数据配置
 link: _nowurl, // 分享数据配置
 imgurl: url, // 分享数据配置 －－ 全路径
 type: "link", // 分享类型,music、video或link，不填默认为link
 dataurl: " ", // 如果type是music或video，则要提供数据链接，默认为空