最近在做一个项目需求，分享获得一本好书的活动，获取用户的个人信息和unionID，诱导用户分享到朋友圈或者朋友圈，达到裂变的目的新收购。做的过程中遇到了一些坑，所以回来总结一下技术方案。使用微信JS-SDK自定义分享给好友，分享到朋友圈。Step1.要实现微信H5网页的自定义分享功能，首先要熟悉微信公众平台的开发文档。具体文件很详细。以下是需要注意的几点。不要忘记绑定开发者权限和js安全域名，否则可能会报redirect_uri参数错误。2、首先，在做微信H5网页活动时，需要获取用户的个人信息，这需要用户授权。一般授权有两种方式，一种是静默授权，一种是网页授权。这个在微信开发文档里说的很详细。对于已经关注公众号的用户，如果用户从公众号的session或者自定义菜单进入到这个公众号的网页授权页面，即使scope是snsapi_userinfo，也是静默授权的，用户是不知道一般的网页授权过程。四个步骤：①引导用户进入授权页面同意授权，并获取code②将code换成网页授权access_token（区别于基础支持中的access_token）③如有需要，开发者可以刷新网页授权access_token避免过期④通过网页授权获取用户基本信息信息（openid、UnionID、个人头像、性别、省市、微信昵称等）3、下面是具体的实现代码。让我们谈谈总体思路。通过判断参数是否在微信浏览器打开，用户是否被授权，重定向到微信接口获取代码，通过接口传给后台，返回用户基本信息。//用户授权if(this.$route.query.from){//跳转到微信页面let_nowUrl=window.location.href.split("?")[0]+`?pictureId=${this.$route.query.pictureId}`;//参数拼接let_shareUrl=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=WeChat公众号APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;window.location.href=_shareUrl;//重定向到这个定义的URL}//通过代码获取用户信息if(this.$route.query.code){let_code=this.$route.query.code;this.handleWechatMsg(_code);}4。接下来就是如何自定义和分享给朋友或者朋友圈了，同样按照微信开发文档进行配置和调用。调用分享接口成功后，开始调用分享接口，调用成功后执行回调函数。这里微信有限制。如果用户在点击分享时取消，默认是使用success成功回调函数，是获取不到分享成功的最终状态。下面是分享//分享给朋友或朋友圈的具体代码wxChatShare(param){varthat=this;让_url=encodeURIComponent(param.url);apiUrl.wechatConfig(_url).then(res=>{if(res.data.code==200){wx.config({debug:false,appId:res.data.content.appid,timestamp:res.data.content.timestamp,//必填，生成签名时间戳nonceStr:res.data.content.nonceStr,//必填，生成随机字符串签名signature:res.data.content.signature,//必填，签名jsApiList:["onMenuShareTimeline","onMenuShareAppMessage"//"updateAppMessageShareData",//"updateTimelineShareData"]});//wx.ready(function(){//分享到朋友圈wx.onMenuShareTimeline({title:param.title,//分享titlelink:param.link,//分享链接，链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:param.imgUrl,//分享图标success:function(){//回调函数that.$Message.message("分享成功！");那.toRouter();}});//分享给好友wx.onMenuShareAppMessage({title:param.title,//分享标题desc:param.desc,//分享描述link:param.link,//分享链接，链接的域名或路径必须和当前页面对应的公众号JS安全域名是一样的filled，默认为链接dataUrl:param.dataUrl,//如果类型为音乐或视频，需要提供数据链接，默认为空success:function(){//回调函数that.$Message.message("分享成功！");that.toRouter在用户点击分享后执行();}});//wx.updateTimelineShareData({//title:param.title,//分享标题//link:param.link,//分享链接，链接的域名或者路径必须和当前页面对应的公众号JS安全域名一致//imgUrl:param.imgUrl,//分享图标//success:function(res){////设置成功//那.$Message.message("设置成功！");//that.toRouter();//}//});////分享给朋友//wx.updateAppMessageShareData({//title:param.title,//分享标题//desc:param.desc,//分享描述//link:param.link,//分享链接,链接域名或路径必须与当前页面对应的公众号JS安全域名一致//imgUrl:param.imgUrl,//分享图标//success:function(res){////set成功//that.$Message.message("设置成功！");//that.toRouter();//}//});//});wx.error(function(res){console.log("校验失败返回信息：",res);});}else{console.log(res.data.message);}}).catch(err=>{this.$Message.message(error);});}，总结一下，这里遇到的坑就是调用分享事件的时候，不能同时写四个分享按钮事件，如果都写在Android机上，分享按钮还没有被点击的时候，分享成功回调函数已经执行。这里为什么要写四个分享按钮事件，因为发现如果不写将要取消的那两个onMenuShareTimeline，onMenuShareAppMessage会遇到安卓机无法分享的问题，所以注释掉这两个新分享按钮事件updateAppMessageShareData和updateTimelineShareData，你可以分享它们。iOS和安卓都没有问题。我发现这其实是有一些原因的。可能是新旧分享事件执行顺序的问题，即调用新添加的分享按钮时，必须先在wx.ready中执行，即将丢弃的接口不需要.
