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


Posted in Javascript onSeptember 07, 2020

看代码吧~

// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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(),代码如下

<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

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

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

//在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模式微信分享#号的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 #Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 #Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 #Javascript
小程序实现可拖动的悬浮按钮
Sep 07 #Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 #Javascript
nginx部署多个vue项目的方法示例
Sep 06 #Javascript
js实现简单的无缝轮播效果
Sep 05 #Javascript
You might like
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JavaScript 变量、作用域及内存
2015/04/08 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
深入理解Python中的*重复运算符
2017/10/28 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
北京振戎融通Java面试题
2015/09/03 面试题
法学专业应届生求职信
2013/10/16 职场文书
效能风暴心得体会
2014/09/04 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
报案材料怎么写
2015/05/25 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
大学运动会加油稿
2015/07/22 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
施工安全协议书
2016/03/22 职场文书