vue实现微信分享
效果图
前提： 公众号相关配置
后台返回配置参数格式参考
根据自身情况吧，如有返回直接使用，不用一一赋值。这里后台把所有数据放在
data里面
使用
- 安装 npm i weixin-js-sdk -S
- 在需要组件上引入： import wx from 'weixin-js-sdk’
- 以下相关代码块
<script>
import wx from 'weixin-js-sdk'
export default {
mounted() {
//测试
this.shareWx();
},
methods: {
shareWx() {
// alert(encodeURI(location.href.split('#')[0]));
//处理url
let params = {
url: decodeURIComponent(location.href.split('#')[0])
}
//发送请求
this.axios.getShareSdk(params).then((response) =>{
console.log("123", response);
// wx.config(response.data); //如后台配置好相关的参数， 可以直接使用
//配置参数
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: response.appId, // 必填，公众号的唯一标识
timestamp: response.timestamp, // 必填，生成签名的时间戳
nonceStr: response.nonceStr, // 必填，生成签名的随机串
signature: response.signature,// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
/**
* 通过ready接口处理成功验证
* config信息验证成功后会执行ready方法
* 需在用户可能点击分享按钮前就先调用
*/
wx.ready(function() { //
let tel = getStore('account'); //从本地获取
let imgs = 'https://common.cnblogs.com/images/wechat.png',
links = '域名访问地址/?#/share?invite='+ tel; // 分享链接
let shareData = {
title: '努力学习',
desc: '好的东西我都想与你一起分享~',//这里请特别注意是要去除html
link: links,
imgUrl: imgs,
};
//兼容新老版本接口， 如不需要处理逻辑情况下， 调试好可以直接使用
if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用，故判断
wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
}else{
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
}
//调试，需单独处理回调使用
// wx.updateAppMessageShareData({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
// title: '这里是标题1', // 分享标题
// desc: 'This is a test!', // 分享描述
// link: '域名访问地址/#/share?invite='+ tel, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: '', // 分享图标
// success() {
// // 用户确认分享后执行的回调函数
// alert("分享给朋友成功1");
// },
// cancel() {
// // 用户取消分享后执行的回调函数
// alert("分享给朋友取消1");
// },
// fail(res) {
// // alert(JSON.stringify(res));
// }
// });
// wx.updateTimelineShareData({ //分享朋友圈
// shareData, //直接调用配置好的参数
// success() {
// // 用户确认分享后执行的回调函数
// alert("成功2");
// },
// cancel() {
// // 用户取消分享后执行的回调函数
// alert("取消2");
// },
// fail(res) {
// // alert(JSON.stringify(res));
// }
// });
});
wx.error(res =>{//通过error接口处理失败验证
// config信息验证失败会执行error函数
console.log(res);
});
})
}
}
}
</script>
遇到问题
Q： 安卓设备中微信会自动截取 #号 后面的内容， 导致无法分享
A： 在 #号前面加 ？号
links = '域名访问地址/?#/share?invite='+ tel; // 分享链接
常见错误及解决方法
- 以下是常见问题一部分，点击查看更多
