vue页面分享微信朋友圈

个人博客地址

微信官方文档

注：1.web的分享只能通过微信右上角自带的三个点分享，只有app才能实现自定义按钮的分享。

步骤：

1.安装 ：npm i -S weixin-js-sdk

2.新建js导入

import wx from ‘weixin-js-sdk’ //微信sdk依赖

3.js文件

import wx from 'weixin-js-sdk'			//微信sdk依赖
import axios from 'axios';    // 引用全局

//要用到微信API
function getJSSDK (url, dataForWeixin) {
  // 调用后台接口换取参数
  axios({
    url: "/news-serve/admin/wx-index/share",// 需要改成自己对应的接口
    params: {
      url: url
    }
  }).then(res => {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.data.appId, // 必填，公众号的唯一标识
      timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.data.signature, // 必填，签名
      // jsApiList: jsApiList // 必填，需要使用的JS接口列表
      jsApiList: [ //需要调用的JS接口列表
        'updateAppMessageShareData', //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口
        'updateTimelineShareData', //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 老接口
        // 'getLocation'  //获取定位
      ]
    })
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
      wx.updateTimelineShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger (result) { },
        success: function success (result) {
          //console.log('已分享');
        },
        cancel: function cancel (result) {
          //console.log('已取消');
        },
        fail: function fail (result) {
          //alert(JSON.stringify(result));
        }
      });
      wx.updateAppMessageShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        trigger: function trigger (result) { },
        success: function success (result) {
          //console.log('已分享');
        },
        cancel: function cancel (result) {
          //console.log('已取消');
        },
        fail: function fail (result) {
          //alert(JSON.stringify(result));
        }
      });
    });
    wx.error(function (result) {
      // alert(JSON.stringify(res)+"微信验证失败");
    });
  })
}

export default {
  // 获取JSSDK
  getJSSDK: getJSSDK
}

4. 页面中引用 （在页面信息请求回来时调用这个share()方法，加载微信配置）

import weiXinShare from "../util/shareWx"

/**
 * @Description: 分享朋友圈
 * @date 2021/1/25
 */
share (title, desc, img) {
  // 分享朋友圈
  var ip1 = location.href.split("#")[0];
  let dataForWeixin = {
    title: title, //分享标题
    desc: desc, //分享内容
    linkurl: location.href, //分享链接
    img: img //分享内容显示的图片(图片必须是正方形的链接)
  };
  weiXinShare.getJSSDK(ip1, dataForWeixin);
}

_this.share(_this.options.title,_this.options.content.replace(/<[^>]+>/g,''),_this.options.img);

5. 效果: