介绍
这篇文章主要介绍如何使用vue实现微信二次分享以及自定义分享的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信二次分享/自定义分享
从应用程序中使用应用程序分享(一次分享)
使用微信导航栏的分享(二次分享)——已做处理
使用微信导航栏的分享(二次分享)——未做处理
如上图,如果不做相关处理,页面进行二次分享,用户看到的就是链接+空图,上面显示的文案(考拉阅读)实际上是获取的标题标签中的文案,我在网上查的相关例子有说明,图片如果不设置,将会自动获取浏览器渲染的第一张图片,经过个人测试,并没有实现(朋友圈同理,不做图片展示)。
微信js-sdk说明文档
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(一般后端配置)
前端需要调取后端的接口,获取微信的congfig所需要的参数
wx.config ({
,调试:真的,,//,开启调试模式,调用的所有api的返回值会在客户端提醒出来,若要查看传入的参数,可以在pc端打开,参数信息会通过日志打出,仅在pc端时才会打印。
,appId: & # 39; & # 39;,,//,必填,公众号的唯一标识
,时间戳:,,//,必填,生成签名的时间戳
,nonceStr: & # 39; & # 39;,,//,必填,生成签名的随机串
,签名:& # 39;& # 39;//,必填,签名
,jsApiList:[],//,必填,需要使用的JS接口列表
}); jsApiList里面需要填写你调用的jsApi, updateAppMessageShareData(分享微信,QQ), updateTimelineShareData(微信朋友圈,QQ空间),onMenuShareTimeline/onMenuShareAppMessage onMenuShareQQ这三个即将废弃,不建议使用。
但是在本次开发中,我只使用了updateAppMessageShareData, updateTimelineShareData,个别Android(微信版本7.0.3)分享出来的还是没有图片和文案,ios的是没有问题,所以又加上了弃用的onMenuShareTimeline, onMenuShareAppMessage之后,安卓机也可以正常分享。
判断当前客户端版本是否支持指定JS接口
wx.checkJsApi ({
,jsApiList: [& # 39; chooseImage& # 39;],,//,需要检测的JS接口列表,所有JS接口列表见附录2,
,成功:函数(res), {
,//以键值对的形式返回,可用的api值为真,不可用为假//大敌;如:{“checkResult": {“chooseImage":真},“errMsg":“checkJsApi: ok"}
,}
}); 天气。配置中的调试设为真,在微信测试时会自动弹出相关信息,在微信开发者工具中也会打印出流程(分为开始,结束),如下图
1,通过准备接口处理成功验证
2,在准备接口中调取updateAppMessageShareData, updateTimelineShareData方法
wx.ready (function (),{,//需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({大敌;
标题:才能,& # 39;& # 39;,,//,分享标题
desc才能:& # 39;& # 39;,,//,分享描述
链接才能:& # 39;& # 39;,,//,分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl才能:& # 39;& # 39;,,//,分享图标
,,成功:function (), {//,,,设置成功
,,}
,})
}); 在vue的开发项目中,可在创建或安装生命周期中调用
3,通过错误接口处理失败验证
wx.error(函数(res) {
,//配置信息验证失败会执行错误函数,如签名过期导致验证失败,具体错误信息可以打开配置的调试模式查看,也可以在返回的res参数中查看,对于温泉可以在这里更新签名。
}); <强>需要注意的点
通过后端的接口获取微信配置的参数时,需要传递当前页面url
<李> - url(当前网页的url,不包含#及其后面部分),如果没有#,则需要传递完整的url
<李> - url需要编码,,,encodeURIComponent (url)
代码如下
//, wetchat.js ,,个人封装
import wx 得到& # 39;weixin-js-sdk& # 39;,,//,引入wxJS
import apiUrl 得到“@/api/index",,//,本项目的api (根据自己项目)
export function wxChatShare(参数),{
,let _url =, encodeURIComponent (param.url),//,当前页面的url
,apiUrl.wechatConfig (_url),//, wechatConfig是获取微信配置相关信息的接口,此处根据个人项目写法而定,类似于美元ajax
,.then (res =祝辞,{
如果才能(res.data.code==200), {//,才能接口返回配置信息
,,wx.config ({
,,,调试:,假的,
,,,appId:, res.data.content.appid,
,,,时间戳:,res.data.content.timestamp,,//,必填,生成签名的时间戳
,,,nonceStr:, res.data.content.nonceStr,,//,必填,生成签名的随机串
,,,签名:,res.data.content.signature,,//,必填,签名
,,,jsApiList:,,//用的方法都要加进来
,,,,& # 39;updateAppMessageShareData& # 39;,, & # 39; updateTimelineShareData& # 39;,, & # 39; onMenuShareTimeline& # 39;,, & # 39; onMenuShareAppMessage& # 39;
,,,)
,,});
,,wx.ready (function (), {
,,,//分享到朋友圈
,,,wx.updateTimelineShareData ({,
,,,,标题:,param.title,,//,分享标题
,,,,链接:,param.link,,//,分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
,,,,imgUrl:, param.imgUrl,,//,分享图标
,,,,成功:,function (), {
,,,,,//,设置成功
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
