基于vue hash模式微信分享#号的解决

2023-07-17 02:51:04 271

看代码吧~

//问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。
//获取签名
this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig",
this.$qs.stringify({"url":window.location.href.split('#')[0]})).then((res)=>{//有人说要加转译encodeURIComponent本人没加具体跟你们的后台协商
if(res.data.status.code==='0000'){
wx.config({
debug:false,
appId:res.data.data.appid,
timestamp:res.data.data.timestamp,
nonceStr:res.data.data.nonceStr,
signature:res.data.data.signature,
jsApiList:[
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
}
})
//处理验证失败的信息
wx.error(function(res){
alert('验证失败返回的信息:',res);
});
console.log(window.location.href.split('#')[0])
wx.ready(function(){
//分享给朋友
wx.onMenuShareAppMessage({
title:'这是标题',//分享标题
desc:"这是测试的数据",//分享描述
link:window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1],//分享链接！这里是关键因为微信会把我们分享的链接截取掉我在这里手动拼接上
imgUrl:'',//分享图标
type:'',//分享类型,music、video或link，不填默认为link
dataUrl:'',//如果type是music或video，则要提供数据链接，默认为空
success:function(){
window.alert('已分享给好友');
},
cancel:function(){
//用户取消分享后执行的回调函数
},
fail:function(res){
window.alert(JSON.stringify(res));
}
});

//分享到朋友圈
wx.onMenuShareTimeline({
title:'这是标题',//分享标题
desc:"这是测试的数据",//分享描述
link:window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1],//分享链接
success:function(){
window.alert('已分享到朋友圈');
},
cancel:function(){
},
fail:function(res){
window.alert(JSON.stringify(res));
}
});

补充知识：解决video标签播放在微信浏览器中自动全屏的坑（vue-video-player使用后续）

属性熟悉

下面是微信video中几个Attribute的作用

poster=“loadbg.jpg”:视频封面

x-webkit-airplay=“allow”:允许iOS的airplay

x5-video-player-type=“h5”:启用x5内核的播放器,是微信安卓版特性,另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上,据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了

x5-playsinline=“true”:在x5内核的播放器中小屏播放

x5-video-player-fullscreen=“true”:全屏设置，设置为true是防止横屏

x5-video-orientation=“portraint”:播放方向，landscape横屏，portraint竖屏，默认值为竖屏

webkit-playsinline=“true”:这个属性是iOS中设置可以让视频在小窗内播放，也就是不是全屏播放

playsinline=“true”:IOS微信浏览器支持小窗内播放

思路与初尝试

上面属性熟悉后,有了些思路,不就是把上面要的属性都写一遍吗,这样iOS端和android端微信都能起作用,然鹅,实际情况并非如此。经过我无数次尝试,总结出就是得分开写!!

代码修改

之前:playsinline="playsinline"这里是true写死的,现在改为计算属性playsinline(),代码如下

添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true

computed:{
playsinline(){
varua=navigator.userAgent.toLocaleLowerCase();
//x5内核
if(ua.match(/tencenttraveler/)!=null||ua.match(/qqbrowse/)!=null){
returnfalse
}else{
//ios端
returntrue
}
}
},

配合jq工具,继续添加两个端所需的属性

//在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
onPlayerCanplay(player){
//console.log('playerCanplay!',player)
//解决自动全屏
varua=navigator.userAgent.toLocaleLowerCase();
//x5内核
if(ua.match(/tencenttraveler/)!=null||ua.match(/qqbrowse/)!=null){

$('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
}else{
//ios端
$('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true")

}

}

总结

以区分两个端内核的不同,按需添加所需的Attribute

":playsinline"组件中自定义属性按内核不同按需传值,x5内核为false,反之为true然后来渲染组件(具体原理有待挖掘)

以上这篇基于vuehash模式微信分享#号的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基于vue hash模式微信分享#号的解决

热门推荐

随机推荐