注：要实现这个功能的前提是得先有一个公众号

首先引入JSSDK文件

<script src="//res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

请求后台接口，获取相关签名信息

function getConfig{
  axios({
     url,//请求相关签名信息的后台url
     data: {
        appId: '公众号的appId',
        url: window.location.href // 当前文章的全路径地址
     },
     method:'POST'
  }).then(res => {
  	setConfig(res.data) // 微信sdk相关逻辑函数，接下来会介绍
  })
}

获取到相关签名信息后，处理分享相关配置项

function setConfig(obj) {
   wx.config({
      debug: false, // true时，手机微信环境访问会alert一些errmsg信息，如果显示errmsg:ok表示正常，否认表示出了问题
      appId: '公众号appId', // 必填，公众号的唯一标识
      timestamp: parseInt(obj.timestamp), // 必填，生成签名的时间戳，使用后台返回的数据
      nonceStr: obj.nonceStr, // 必填，生成签名的随机串，使用后台返回的数据
      signature: obj.signature, // 必填，签名，使用后台返回的数据
      jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"] // 必填，需要使用的JS接口列表
   })
   // wx.config 回调函数
   wx.ready(function() {
      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      wx.updateAppMessageShareData({
         title: '文章标题', // 分享标题
         desc: '文章摘要', // 分享描述
         link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: '文章封面图', // 分享图标
         success: function() {
            // 设置成功
         }
      })
      // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
      wx.updateTimelineShareData({
         title: '文章标题', // 分享标题
         link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: '文章封面图', // 分享图标
         success: function() {
             // 设置成功
         }
      })
   })
}