基于vue hash模式微信分享#號的解決
看代碼吧~
// 問題描述在微信中分享到朋友圈或好友時,分享出去的路由被破壞,打開分享的鏈接,路由中的“#”會被去掉并追加?fromTimeline之類的后綴參數(shù),這就造成了分享出去的鏈接只能進(jìn)入首頁,無法正常跳轉(zhuǎn)到其他路由。
// 獲取簽名
this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig",
this.$qs.stringify({"url":window.location.href.split('#')[0]})).then((res) => {//有人說要加轉(zhuǎn)譯encodeURIComponent本人沒加具體跟你們的后臺協(xié)商
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: '這是標(biāo)題', // 分享標(biāo)題
desc: "這是測試的數(shù)據(jù)", // 分享描述
link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享鏈接!這里是關(guān)鍵 因為微信會把我們分享的鏈接截取掉 我在這里手動拼接上
imgUrl: '', // 分享圖標(biāo)
type: '', // 分享類型,music、video或link,不填默認(rèn)為link
dataUrl: '', // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
success: function () {
window.alert('已分享給好友');
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
},
fail: function (res) {
window.alert(JSON.stringify(res));
}
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '這是標(biāo)題', // 分享標(biāo)題
desc: "這是測試的數(shù)據(jù)", // 分享描述
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));
}
});
補(bǔ)充知識:解決video標(biāo)簽播放在微信瀏覽器中自動全屏的坑(vue-video-player使用后續(xù))
屬性熟悉
下面是微信video中幾個Attribute的作用
poster=“l(fā)oadbg.jpg” : 視頻封面
x-webkit-airplay=“allow” : 允許iOS的airplay
x5-video-player-type=“h5” : 啟用x5內(nèi)核的播放器,是微信安卓版特性,另外在X5內(nèi)核里,video是單獨(dú)的一個view,會覆蓋在任何元素之上,據(jù)說是為了統(tǒng)一用戶體驗,加上這個屬性之后,也可以讓其他元素浮在video上面了
x5-playsinline=“true”: 在x5內(nèi)核的播放器中小屏播放
x5-video-player-fullscreen=“true”: 全屏設(shè)置,設(shè)置為 true 是防止橫屏
x5-video-orientation=“portraint”: 播放方向,landscape橫屏,portraint豎屏,默認(rèn)值為豎屏
webkit-playsinline=“true”: 這個屬性是iOS中設(shè)置可以讓視頻在小窗內(nèi)播放,也就是不是全屏播放
playsinline=“true”: IOS微信瀏覽器支持小窗內(nèi)播放
思路與初嘗試
上面屬性熟悉后,有了些思路, 不就是把上面要的屬性都寫一遍嗎,這樣iOS端和android端微信都能起作用, 然鵝, 實際情況并非如此。 經(jīng)過我無數(shù)次嘗試, 總結(jié)出就是得分開寫!!
代碼修改
之前:playsinline="playsinline"這里是true寫死的,現(xiàn)在改為計算屬性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端微信使用的內(nèi)核不同,所需要的attribute也不同,嘗試后,采用x5內(nèi)核返回false,反之為true
computed: {
playsinline(){
var ua = navigator.userAgent.toLocaleLowerCase();
//x5內(nèi)核
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
return false
}else{
//ios端
return true
}
}
},
配合jq工具,繼續(xù)添加兩個端所需的屬性
//在vue-video-player的onPlayerCanplay(視頻可播放)這個方法中添加回調(diào)
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
//解決自動全屏
var ua = navigator.userAgent.toLocaleLowerCase();
//x5內(nèi)核
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")
}
}
總結(jié)
以區(qū)分兩個端內(nèi)核的不同,按需添加所需的Attribute
":playsinline"組件中自定義屬性按內(nèi)核不同按需傳值, x5內(nèi)核為false,反之為true然后來渲染組件(具體原理有待挖掘)
以上這篇基于vue hash模式微信分享#號的解決就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue echart實現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實現(xiàn)echart繪圖代碼詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01
Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實例形式分析了vue2.0組件之間通信的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05
vue如何在vue.config.js文件中導(dǎo)入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3全局屬性app.config.globalProperties的實現(xiàn)
Vue3中的app.config.globalProperties是一個強(qiáng)大的全局配置功能,允許我們在應(yīng)用級別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
vue數(shù)據(jù)雙向綁定原理解析(get & set)
這篇文章主要為大家詳細(xì)解析了vue.js數(shù)據(jù)雙向綁定原理,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03

