首页 >> js开发 >> js基于vue hash模式微信分享#号的解决js大全
js基于vue hash模式微信分享#号的解决js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
看代码吧~看代码吧~
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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));
}
});
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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标签播放在微信浏览器中自动全屏的坑(vue-video-player使用后续)属性熟悉属性熟悉下面是微信video中几个Attribute的作用poster=“loadbg.jpg” : 视频封面poster=“loadbg.jpg” : x-webkit-airplay=“allow” : 允许iOS的airplayx-webkit-airplay=“allow” : x5-video-player-type=“h5” : 启用x5内核的播放器,是微信安卓版特性,另外在X5内核里,video是单独的一个view,会覆盖在任何元素之上,据说是为了统一用户体验,加上这个属性之后,也可以让其他元素浮在video上面了x5-video-player-type=“h5” : x5-playsinline=“true”: 在x5内核的播放器中小屏播放x5-playsinline=“true”: x5-video-player-fullscreen=“true”: 全屏设置,设置为 true 是防止横屏x5-video-player-fullscreen=“true”: x5-video-orientation=“portraint”: 播放方向,landscape横屏,portraint竖屏,默认值为竖屏x5-video-orientation=“portraint”: webkit-playsinline=“true”: 这个属性是iOS中设置可以让视频在小窗内播放,也就是不是全屏播放webkit-playsinline=“true”: playsinline=“true”: IOS微信浏览器支持小窗内播放playsinline=“true”:思路与初尝试思路与初尝试上面属性熟悉后,有了些思路, 不就是把上面要的属性都写一遍吗,这样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">
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
}
}
},
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")
}
}
//在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模式微信分享#号的解决就是小编分享给大家的全部内容了,希望能给大家一个参考。
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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));
}
});
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?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标签播放在微信浏览器中自动全屏的坑(vue-video-player使用后续)属性熟悉属性熟悉下面是微信video中几个Attribute的作用poster=“loadbg.jpg” : 视频封面poster=“loadbg.jpg” : x-webkit-airplay=“allow” : 允许iOS的airplayx-webkit-airplay=“allow” : x5-video-player-type=“h5” : 启用x5内核的播放器,是微信安卓版特性,另外在X5内核里,video是单独的一个view,会覆盖在任何元素之上,据说是为了统一用户体验,加上这个属性之后,也可以让其他元素浮在video上面了x5-video-player-type=“h5” : x5-playsinline=“true”: 在x5内核的播放器中小屏播放x5-playsinline=“true”: x5-video-player-fullscreen=“true”: 全屏设置,设置为 true 是防止横屏x5-video-player-fullscreen=“true”: x5-video-orientation=“portraint”: 播放方向,landscape横屏,portraint竖屏,默认值为竖屏x5-video-orientation=“portraint”: webkit-playsinline=“true”: 这个属性是iOS中设置可以让视频在小窗内播放,也就是不是全屏播放webkit-playsinline=“true”: playsinline=“true”: IOS微信浏览器支持小窗内播放playsinline=“true”:思路与初尝试思路与初尝试上面属性熟悉后,有了些思路, 不就是把上面要的属性都写一遍吗,这样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">
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">
computed: {
playsinline(){
var ua = navigator.userAgent.toLocaleLowerCase();
//x5内核
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
return false
}else{
//ios端
return 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")
}
}
//在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模式微信分享#号的解决就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- JavaScriptvue.js+element 默认提示中英文操作
- jsvue mvvm数据响应实现js大全
- JavaScript详解Vue.js3.0 组件是如何渲染为DOM的
- js解决vant的Toast组件时提示not defined的问题js大全
- jsvue实现动态给id赋值,点击事件获取当前点击的元素的id操作js大全
- jsJs数组扁平化实现方法代码总汇js大全
- jsvue 实现element-ui中的加载中状态js大全
- jsVue 401配合Vuex防止多次弹框的案例js大全
- jsvue router返回到指定的路由的场景分析js大全
- jsVue向后台传数组数据,springboot接收vue传的数组数据实例js大全