基于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 相关文章推荐
理解Javascript_12_执行模型浅析
Oct 18 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
layui select动态添加option的实例
Mar 07 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 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 加密解密内部算法
2010/04/22 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python如何将多个PDF进行合并
2019/08/13 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
小学生元旦广播稿
2014/02/21 职场文书
小学毕业感言500字
2014/02/28 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
世界读书日的活动方案
2014/08/20 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android