服务器之家

服务器之家 > 正文

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

时间:2021-09-16 16:35     来源/作者:约德尔蒙

看代码吧~

?
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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部