| Vue实现微信分享好友，分享朋友圈。 | 您所在的位置：网站首页 › 如何将pdf变成二维码分享到微信 › Vue实现微信分享好友，分享朋友圈。 |
Vue实现微信分享好友，分享朋友圈。
|
实现微信分享功能。
1 、基于vue去实现在微信里去分享给你的微信好友，或者去分享到你的朋友圈里。如果是react 等等 一样用法。 2、目前实现微信分享功能是通过点击微信控件触发的，代码拿走直接用，因为分享出来的是一个有标题，有描述，有图标的一个类似连接，所以灵活使用，分享地址，分享图片，分享的话术等等根据各自的需求去写。 3、使用到微信官网的api 通过 npm i weixin-js-sdk 安装。 最好在项目的main.js里暴露出来。 html部分 分享好友 分享朋友圈简单粗暴，样式不细写。 注意：尽量要在页面创建时去拿到配置项，然后注入配置信息。 js部分 export default { data(){ return{ //必须配置项，从接口获取 appId:"", timestamp:"", noncstr:"", signatureInfo:"", // 自配项 imgurl:"",//分享图片（如分享出来链接上显示的小图标） url:"",//分享地址（如分享出来一个链接，点链接要跳的页面地址） } }, created(){ //指的是要做分享的页面的url送过去，请求成功才能拿到 let url = location.href.split('#')[0]; this.$axios({ url:'/use/shareurl',//请求微信分享的接口地址 method:'post', data:url, }).then(res=>{ if(res.data.success){ //这些配置参数必填项，后面去调微信的pai是需要传的。 this.appId = res.data.appId; this.timestamp = res.data.timestamp; this.noncstr = res.data.noncstr; this.signatureInfo = res.data.signatureInfo; } }).catch(err=>{console.log(err)}) }, methods:{ shareFriend(){//当点击分享好友按钮时 //怎么取图片的地址取决于你放图片的路径，你也可以用线上图片，也可以放在你们的服务器上。 this.imgurl = location.href.split('/index')[0] + "/static/shareimg.jpg"; this.url = "这里是你要分享出来的页面的地址"; this.title="这是一个王哈哈"; this.desc="小绵羊呀小绵羊呀小绵羊呀小绵羊呀小绵羊呀分享好友呀呀哎呀呀啊"; this.goshare() }, goshare(){ let that = this; //开始注入配置项 wx.config({ debug:false,//是否打开debug调试模式。 appId:this.appId, //必填，公众号唯一标识 timestamp:this.timestamp, //必填，生成签名的时间戳 nonceStr:this.noncstr, //必填，生成签名的随机串 signature:this.signatureInfo, //必填，生成的签名 jsApiList:['onMenuShareTimeline','onMenuShareAppMessage'] //必填，允许分享好友，分享朋友圈 }) wx.error((res)=>{//配置成功 for(var msg in res){ let obj = { showAlert:true, errTitle:"错误提示", errMsg:JSON.stringify(res[msg]), errCode:"" } } }) //以上是配置项注入成功 wx.ready(()=>{//点击要去分享 wx.onMenuShareTimeline({//配置去分享朋友圈的选项 title :this.share.title,//分享标题 link : this.share.url, //分享链接 imgUrl : this.share.imgurl, //分享图标 success : function(res){//分享成功 console.log("已分享朋友圈成功") //如分享成功后想做一些其他的业务处理，可以在这里做 }, cancel:function(){ //that.alert="失败弹框话术等等(注意 这里拿不到this实例的)" console.log("已分享失败") } }) wx.onMenuShareAppMessage({//配置去分享好友的选项 title : this.share.title, link : this.share.url, desc : this.share.desc, imgUrl : this.share.imgurl , success : function(res){ console.log("分享好友成功") }, cancel:function(res){ console.log("分享失败") } }); }) }, } }如果想给分享连接带参也是可以。 注意：到目前为止，是不能自动去调微信的分享控件按钮（指右上角的…）直接分享的，建议最好做个页面引导去手动通过控件按钮分享。 效果图：
到这里就结束了，备注也加了。如果你项目用到分享很频繁，建议封装整理下，避免重复代码，有问题或者好的建议可以私聊。共同学习共同进步。 ------努力努力再努力。 |
总结： 1、分享的连接，分享的图片地址，域名尽量不要带端口号，把https替为 http。去调分享接口（获取配置信息时）传给后台的url的域名要和分享连接的域名保持一致（指路由之前的部分） 2、分享的连接里（路由之前的部分）不要带&符号 3、从别的页面跳到要分享的页面时，尽量用location.href= url 否则容易报签名配置失败，导致拿不到配置信息。【本文地址】
公司简介
联系我们