vue实现微信分享

vue实现微信分享

效果图

前提： 公众号相关配置

参考微信公众平台

使用

• 安装 npm i weixin-js-sdk -S
• 在需要组件上引入： import wx from 'weixin-js-sdk’
• 以下相关代码块

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,
               };

				//调试，需单独处理回调使用
               // 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));
               //     }
               // });

				
				//兼容新老版本接口， 如不需要处理逻辑情况下， 调试好可以直接使用
               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.error(res =>{//通过error接口处理失败验证
               // config信息验证失败会执行error函数
               console.log(res);
           });
       })
   }
}

遇到问题

Q： 安卓设备中微信会自动截取 #号 后面的内容， 导致无法分享
A： 在 #号前面加 ？号

links = '域名访问地址/?#/share?invite='+ tel; // 分享链接