微信二次分享/自定义分享从App使用App分享（一次性分享）使用微信导航栏分享（二次分享）--已处理使用微信导航栏分享（二次分享）)--不做上图处理，如果不做相关处理，页面会被分享两次，用户看到的是一个链接+空图，上面显示的文案（考拉阅读）实际上是title标签里的copywriting是自己在网上找的相关例子。如果不设置图片，会自动获取浏览器渲染的第一张图片。经过个人测试，没有实现（朋友圈也是一样，图片展示没有）。微信js-sdk文档首先登录微信公众平台，进入“公众号设置”的“功能设置”填写“JS接口安全域名”。（后台通用配置）前端需要调用后台接口获取微信的congfig需要的参数wx.config({debug:true,//开启debug模式，返回值所有调用的API都会在客户端告警，如果想查看传入的参数，可以在PC端打开，通过日志打印参数信息，只会在PC端打印。appId:'',//必填,公众号唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，用于生成签名的随机字符串signature:'',//必填，签名jsApiList:[]//required，需要使用的JS接口列表});jsApiList需要填写你调用的jsApi，updateAppMessageShareData（分享微信，QQ），updateTimelineShareData（朋友圈，QQ空间），onMenuShareTimeline/onMenuShareAppMessage/onMenuShareQQ这三个即将被丢弃，不推荐使用。??但是在这次开发中，我只用了updateAppMessageShareData，updateTimelineShareData，有的Android（微信7.0.3版本）的分享还是没有图片和文案，ios是没问题的，所以我加了deprecated的onMenuShareTimeline，在onMenuShareAppMessage之后，Android机也可以正常分享。判断当前客户端版本是否支持指定的JS接口wx.checkJsApi({jsApiList:['chooseImage'],//需要检查的JS接口列表，所有JS接口列表见附录2,success:function(res){//使用键值对的形式返回，可用的api值为true，不可用的值为false//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});wx.如果config中的debug设置为true，微信测试时会自动弹出相关信息，同时微信开发者工具中也会打印出流程（分为begin和end）。如下图，通过ready接口处理验证成功。在ready接口中调用updateAppMessageShareData,updateTimelineShareDatamethodwx.ready(function(){//需要调用wx.updateAppMessageShareData({title:'在用户点击分享按钮之前',//分享标题desc:'',//分享描述link:'',//分享链接，链接域名或路径必须对应当前页面JS安全域名同imgUrl:'',//分享图标成功:function(){//设置成功}})});在vue的开发项目中，可以在created或者mounted的生命周期中调用，通过error接口处理失败verifywx.error(function(res){//如果config信息校验通过，就会执行error函数fails.如果签名过期验证失败，具体错误信息可以在config的debug模式下查看，或者在返回的res参数中查看。对于SPA可以在这里更新签名。});??获取时的注意事项微信通过后台接口配置参数，需要传当前页面url-url（当前网页的url，不包括#及其后面的部分），如果不是#，需要传完整的url-url需要编码encodeURIComponent(url)代码如下//wetchat.js-个人包importwxfrom'weixin-js-sdk';//从“@/api/index”导入wxJSimportapiUrl；//本项目的api（根据自己的项目）exportfunctionwxChatShare(param){let_url=encodeURIComponent(param.url)//当前页面的urlapiUrl.wechatConfig(_url)//wechatConfig是获取微信配置信息这里的接口取决于个人项目的写法，类似这样。$ajax.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:[//所有方法必须在'updateAppMessageShareData'中添加，'updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage']});wx.ready(function(){//分享到朋友圈wx.updateTimelineShareData({title:param.title,//分享标题link:param.link,//分享链接，链接域名或路径必须与当前页面对应的JS安全域名imgUrl:param.imgUrl,//分享图标success:function(){//设置成功console.log("分享给朋友圈返回的信息是：",res);this.$Message.message("设置成功！");}})wx.onMenuShareTimeline({title:param.title,//分享标题link:param.link,//分享链接，域名或链接路径必须对应当前页面的公众号JS安全域名同imgUrl:param.imgUrl,//分享图标success:function(){//用户点击分享后执行的回调函数},})//分享给好友wx.updateAppMessageShareData({title:param.title,//分享标题desc:param.desc,//分享描述link:param.link,//分享链接，链接域名或路径必须与对应的公众号JS安全域名一致当前页面imgUrl:param.imgUrl,//分享图标成功:function(){//设置成功console.log("分享到朋友圈后返回的信息是：",res);this.$Message.message("Set成功！");}})wx.onMenuShareAppMessage({title:param.title,//分享标题desc:param.desc,//分享描述link:param.link,//分享链接，链接域名或路径必须对应当前页公众号JS安全域名同imgUrl:param.imgUrl,//分享图标类型:param.type,//分享类型，音乐，视频或链接，不填则默认为链接dataUrl:param.dataUrl,//如果类型是音乐或视频，需要提供数据链接，默认为空success:function(){//用户点击分享后执行的回调函数}});});wx.error(function(res){console.log('验证失败返回信息：',res);});}else{console.log(res.data.message);}})}//home.vueimport*aswechatJSfrom'@/utils/wechat'//importwechat.js//写在方法里调用，或者生命周期里调用let_param={studentId:1,//取决于个人项目activityId:1,//取决于个人项目url:window.location.href,//当前页面urltitle:"像我一样，免费抢考拉阅读VIP会员卡，读一万不错books~",//分享数据配置desc:"小朋友要读书，去考拉看书",//分享数据配置link:_nowUrl,//分享数据配置imgUrl:url,//分享数据配置-全路径类型:"link",//分享类型，音乐，视频或链接，默认为链接dataUrl:"",//如果类型是音乐或视频eo，需要提供数据链接，默认为空}如有不明之处或需要指正，请留言~
