看代码吧~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
// 问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？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(),代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="playsinline" customEventName="customstatechangedeventname" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @statechanged="playerStateChanged($event)" @ready="playerReadied"> </video-player> |
添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true
|
1
2
3
4
5
6
7
8
9
10
11
12
|
computed: { playsinline(){ var ua = navigator.userAgent.toLocaleLowerCase(); //x5内核 if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { return false }else{ //ios端 return true } } }, |
配合jq工具,继续添加两个端所需的属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调onPlayerCanplay(player) { // console.log('player Canplay!', player) //解决自动全屏 var ua = 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然后来渲染组件(具体原理有待挖掘)
以上这篇基于vue hash模式微信分享#号的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/gyq04551/article/details/79746764
