vue实现微信自带浏览器分享（小卡片形式）

注意：只能在微信自带浏览器打开进行分享
1.图片效果
在这里插入图片描述
2.cdn引入weixin-js-sdk的依赖

在index.html中引入

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

2.在assets/js文件夹中创建share.js文件

import axios from "axios";
import qs from "qs";let common_share = {"imgUrl": 'https://profile-avatar.csdnimg.cn/1fcf9ab0aa7a45e3b5da1d8e667c80c9_oneya1.jpg!1',    // 分享显示的缩略图地址"link": "分享地址",    // 分享地址"desc": '分享描述',   // 分享描述"title": '分享标题',   // 分享标题
};
let backUrl = "域名地址";
let wxMessage = {//默认提交地址url: backUrl + "/wx/getWxAutoMessage",//获取appid等信息
}share(common_share);//默认分享export function share(shareData) {if (!shareData) {shareData = common_share;}axios({url: wxMessage.url,method: "post",data: qs.stringify({ "url": window.location.href }),headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function (res) {var resultData = res.data.data;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: resultData.appId, // 必填，公众号的唯一标识timestamp: resultData.timestamp, // 必填，生成签名的时间戳nonceStr: resultData.nonceStr, // 必填，生成签名的随机串signature: resultData.signature,// 必填，签名，见附录1jsApiList: [// 必填，需要使用的JS接口列表，所有JS接口列表见附录2'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','updateAppMessageShareData','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard']});});wx.onMenuShareTimeline(shareData);wx.onMenuShareAppMessage(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);
}