微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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(),代码如下
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">
添加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模式微信分享#号的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。
展开阅读全文
微信hash ajax,基于vue hash模式微信分享#号的解决相关推荐
- 基于vue 的h5微信分享
之前一直都是使用的html,jquery,js等做的微信分享,现在项目都改用vue做了,但是微信分享还是要接入的,这里简单分享一下移动端vue如何接入微信分享. 1.首先安装微信分享依赖 npm in ...
- sqlserver 微信 读取_基于SQLServer数据库实现微信推送消息
本文主要向大家介绍了基于SQLServer数据库实现微信推送消息,通过具体的内容向大家展现,希望对大家学习SQLServer数据库有所帮助. 最近新上了一个项目,需要监控设备数据,增加一个报警功能. ...
- Java模拟打开微信链接_PHP基于curl实现模拟微信浏览器打开微信链接的方法示例...
本文实例讲述了PHP基于curl实现模拟微信浏览器打开微信链接的方法.分享给大家供大家参考,具体如下: 网络上没有可以直接打开微信的浏览器 但是我们可以模拟浏览器 微信浏览器的HTTP_USER_AG ...
- 微信小程序——基于vue的框架mpvue
起手式:必要的开发环境 工欲善其事必先利其器!在开始写代码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具: 1)node.js 现在,前端工具链基本都依赖Node.js,所 ...
- python 微信视频_基于Python快速整理微信视频与图片
photoes.jpg 作为超级APP,微信已经成了移动互联网的入口.而我们也早已习惯通过微信收发图片与视频等多媒体文件.身为一名屌丝通信狗,经常出差海外,跟家人的沟通方式主要就靠微信了,每当累了或抑 ...
- 基于springboot+vue的地方美食分享网站
081-springboot基于vue的地方美食分享网站 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Na ...
- 关于vue路由模式导致微信jssdk授权问题的正确解决姿势
如何正确解决vue路由模式weixin-jssdk授权问题 第一种情况:最常用的history模式 第二种也比较常用,hash模式 第三种就是memoryHistory 总结 第一种情况:最常用的hi ...
- 对hash签名失败_vue项目中微信jssdk在ios签名失败
一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...
- 基于Vue的微信公众号开发及选型研究
目录 1.背景介绍 1.1微信公众号简介 1.2Vue框架简介 1.3组件库简介 2.开发流程 2.1申请微信公众号 2.2申请微信测试号及配置 2.3安装微信开发者工具 2.4创建Vue项目 2.5 ...
最新文章
- @RestController和@Controller区别
- PB级分布式大数据的处理和分析应用
- 电路 第五版 第一章 电路模型和电路定律
- 二进制指数类型退避算法
- linux查看db2存储过程,DB2查看存储过程里SQL语句的执行情况
- 英语(10)---脱口而出的英语
- innobackupex参数之 --throttle 限速这个值设置多少合理 原创
- 如何配置 Linux ipv6 6RD隧道
- word字间距异常处理方式
- Kiwi Syslog日志服务器的安装及配置使用
- 十分钟教你写个软件防火墙!powershell。
- iOS 仿百度外卖,饿了么-商品列表页
- PostgreSQL 12 中文文档
- python通过代理发送邮件_python发送邮件
- Vivado 错误代码 [USF-XSim-62] [XSIM 43-4316] 解决思路
- 【程序设计】C语言初学者常犯的17条错误
- 起始点的跳变、冲激函数匹配法
- Android删除UIM卡联系人
- Go搭配mysql_GitHub - goshark/dhs: go语言搭配vue前端实现mysql双机热备管理平台
- dbeaver 设置编码_宝鼎伺服马达编码器磨损维修
热门文章
- Android蓝牙操作笔记
- 埃斯顿服务器上电无显示,埃斯顿伺服常见现象报警及排除
- C语言输入数字出现相应答案,写一个函数 输入一个十六进制数,输出相应的十进制数。...
- 使用 Autofill 插件快速提交BUG
- python单元测试示范卷_Python单元测试--Unittest
- session作用域_看完这篇Bean的作用域与生命周期,问到面试官不敢问-乐字节java...
- 剑指offer面试题[4]-空格替换
- 面试中软性问题的套路与反套路
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
- Win10家庭版之Docker ToolBox,Win10家庭版升级专业版