一、安装
npm install weixin-js-sdk --save-dev
npm install axios --save
二、创建wxShare.js文件
import axios from 'axios'
import wx from 'weixin-js-sdk';
export default {
wxShowMenu: function(shareInfo) {
axios.post('后台接口-获取微信分享签名等', {
url: window.location.href
}).then(function(res) {
console.log(res)
var getMsg = res.data;
wx.config({
debug: false, //生产环境需要关闭debug模式
appId: getMsg.appId, //appId通过微信服务号后台查看
timestamp: getMsg.timestamp, //生成签名的时间戳
nonceStr: getMsg.nonceStr, //生成签名的随机字符串
signature: getMsg.signature, //签名
jsApiList: [ //需要调用的JS接口列表
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'showMenuItems',
'hideMenuItems'
]
});
wx.ready(function() {
wx.checkJsApi({
jsApiList: ["showMenuItems"],
success: function(res) {
wx.showMenuItems({
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline' //分享到朋友圈
]
});
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: shareInfo.title, // 分享标题
desc: shareInfo.desc, // 分享描述
link: shareInfo.linkurl, // 分享链接
imgUrl: shareInfo.img // 分享图标
});
//分享给朋友
wx.onMenuShareAppMessage({
title: shareInfo.title, // 分享标题
desc: shareInfo.desc, // 分享描述
link: shareInfo.linkurl, // 分享链接
imgUrl: shareInfo.img // 分享图标
});
});
})
}
}
三、main.js中引入并挂在vue的原型上
我的wxShare.js在static/js目录下
import WXConfig from '../static/js/wxShare.js';
Vue.prototype.WXConfig = WXConfig;
四、vue页面中使用
mounted() {
let obj={
title:'分享标题',
desc:'分享描述',
linkurl: '分享链接',
img: '分享图片',
}
this.WXConfig.wxShowMenu(obj);
},
五、后记
网上找了好几种方法，要么说的不清不楚的，要么存在一些问题达不到要求，或许是我太菜了理解不了。总之，找了好久才找到一个合适的，非常感谢这位大佬，以下是原文链接
https://blog.csdn.net/web_xyk/article/details/80453068
如果文中有错误，还请大佬多多指正！
