vue实现微信二次分享和自定义分享示例

微信二次分享/自定义分享

使用应用程序从应用程序共享(共享一次)

使用微信导航栏分享(二次分享)-已处理

使用微信导航栏分享(二次分享)-未处理

如上图所示，如果没有做相关处理，页面会第二次共享，用户看到的是链接空图。上面显示的副本(考拉阅读)实际上是获得的标题标签中的副本。我在网上查的相关例子显示，如果图片没有设置，浏览器渲染的第一张图片会自动获取。经过个人测试，还没有实现(朋友圈也一样，没有做图片展示)。

微信js-sdk文档

登录微信公众平台，进入“微信官方账号设置”的“功能设置”填写“JS界面安全域名”。(常规后端配置)

前端需要调用后端的接口，获取微信聪图所需的参数

wx . config({ debug 3360 true，//开启调试模式，所有被调用API的返回值都会在客户端告警时发出。要查看传入的参数，可以在pc端打开，参数信息会通过log打印出来，只在pc端打印。AppId: ' '，//必选，微信官方账号唯一标识timestamp://必选，生成签名时间戳noncestr3360 ' '，//必选，生成签名随机字符串signature: ' '，//必选，签名jsApiList 3360[]//必选，JS要用在jsaplist中，需要填写你调用的jsApi，updateAppMessageShareData(分享微信，QQ)，updateTimelineShareData(微信朋友圈，QQ空间)，

但是在这次开发中，我只使用了updateAppMessageShareData，updateTimelineShareData，但是部分安卓(微信7.0.3版)没有分享图片和文案，ios也没有任何问题，所以在添加了废弃的onMenuShareTimeline和onMenuShareAppMessage之后，安卓也可以正常分享了。

判断当前客户端版本是否支持指定的JS接口

wx . checkjsapi({ jsaplist :[' choose image ']，//待检测js接口列表，所有js接口列表见附录2，success :函数(RES){//以键值对形式返回，可用api值为真。不可用为false //，例如：{ '检查结果' : { '选择图像' : true ' }，' errmsg' : '检查jsapi 3360 ok ' } })；wx.config中的Debug设置为true，微信测试时会自动弹出相关信息，过程(分为开始和结束)也会在微信开发者工具中打印出来，如下图

1.通过就绪接口成功验证

2.在就绪接口中调用updateAppMessageShareData和updateTimelineShareData方法

Wx.ready(function () {//需要调用wx . updateappmessagesharedata({ title : ' '，//share title desc3360 ' '，//share description link: ' '，//share link，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。//共享图标成功3360 function(){//设置成功} })；在vue的开发项目中，可以在创建或安装的生命周期中调用它

3.通过错误界面处理故障验证

wx . error(function(RES){//config information验证失败，将执行错误函数。如果由于签名过期而导致验证失败，则可以在Config的调试模式下或在返回的RES参数中查看特定的错误信息。对于SPA，签名可以在这里更新。});注意点

通过后端界面获取微信配置参数时，需要传递当前页面url

-url(当前网页的url，不包括#及其后续部分)，如果没有#，则需要传递完整的url-url URL需要用以下encodeURIComponent(url)代码进行编码

//wet chat . js-从‘weixin-js-SDK’导入个人包wx；//从“@/API/index”引入wxjsimport API URL//这个项目的api(根据自己的项目)导出函数wxchatshare(param){ let _ URL=encodeuricomponent(param。URL)//当前页面的URL API URL。微信配置(_ URL)//微信配置是一个获取微信配置相关信息的界面，这取决于个人项目的编写，类似于这个。$ Ajax . then(RES={ if(RES . data . code==200){//接口返回配置信息wx.config({ debug: false，appid : RES . data . content . appid，timestamp 360 RES . data . content . timestamp，//是必需的，生成签名的时间戳为non crest 3360 RES . data . content . non crest，//是必需的。生成随机签名字符串signature:res。data.content.signature，//必选，并对jsApiList:进行签名[//使用的所有方法都应该添加' updateappmessagesharedata '，' updatetimelinesharedata '，' onmenusharetime '，' onmenusharepmessage ']})；Wx.ready(function () {//分享到朋友圈wx . updatetimelinesharedata({ title : param . title，//分享标题link: param.link，//分享链接，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致，imgur : param . imgurl .//分享图标成功3360 function(){//设置成功console.log('分享到朋友圈后返回的信息为这个。$Message.message('设置成功！');} })wx . onmensharimeline({ title : param . title，//共享标题链接： param.link，//共享链接。链接的域名或路径必须与当前页面对应的微信官方账号的JS安全域名一致。//分享图标成功：函数(){//用户点击了分享后执行的回调函数}，})//分享给好友wx . updateappmessagesharedata({ title : param . title，//分享标题desc: param.desc，//分享描述链接： param.link，//分享链接，链接的域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。//分享图标成功：函数(){//设置成功console.log('分享到朋友圈后返回的信息为： '，RES)；这个。$Message.message('设置成功！');} })wx . onmenusharappmessage({ title : param . title，//share title desc3360param.desc，//share description link : param . link，//share link，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致，imgUrl: param.imgUrl，//sharing icon type3360param。类型，//共享类型，音乐，视频或链接，以及默认的linkdataurl3360param。未填写dataurl。//如果类型为音乐或视频，应提供数据链接，默认值为null success: function () {//用户点击share后执行的回调函数} })；});wx . error(function(RES){ console . log('验证失败返回的信息： '，RES)；});} else { console . log(RES . data . message)；}})}//home.vueimport * as微信js from ' @/utils/微信'//引入wechatjs在方法中调用，或者在生命周期中调用let _param={studentId: 1。//活动ID : 1视个人项目，//URL : window.location.href视个人项目，//当前页面url title:赞我，抢考拉免费读VIP会员卡，读万本好书~’，//共享数据配置desc:孩子该读书，去考拉读’，//共享数据配置link: _nowUrl，//共享数据配置imgurl3360url，//共享数据配置//如果类型为音乐或视频，应提供数据链接，默认为空。以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。