基于vue hash模式微信分享#號(hào)的解決
看代碼吧~
// 問題描述在微信中分享到朋友圈或好友時(shí),分享出去的路由被破壞,打開分享的鏈接,路由中的“#”會(huì)被去掉并追加?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本人沒加具體跟你們的后臺(tái)協(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' ] }); } }) //處理驗(yàn)證失敗的信息 wx.error(function (res) { alert('驗(yàn)證失敗返回的信息:',res); }); console.log(window.location.href.split('#')[0]) wx.ready(function () { // 分享給朋友 wx.onMenuShareAppMessage({ title: '這是標(biāo)題', // 分享標(biāo)題 desc: "這是測(cè)試的數(shù)據(jù)", // 分享描述 link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享鏈接!這里是關(guān)鍵 因?yàn)槲⑿艜?huì)把我們分享的鏈接截取掉 我在這里手動(dòng)拼接上 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: "這是測(cè)試的數(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ǔ)充知識(shí):解決video標(biāo)簽播放在微信瀏覽器中自動(dòng)全屏的坑(vue-video-player使用后續(xù))
屬性熟悉
下面是微信video中幾個(gè)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ú)的一個(gè)view,會(huì)覆蓋在任何元素之上,據(jù)說是為了統(tǒng)一用戶體驗(yàn),加上這個(gè)屬性之后,也可以讓其他元素浮在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”: 這個(gè)屬性是iOS中設(shè)置可以讓視頻在小窗內(nèi)播放,也就是不是全屏播放
playsinline=“true”: IOS微信瀏覽器支持小窗內(nèi)播放
思路與初嘗試
上面屬性熟悉后,有了些思路, 不就是把上面要的屬性都寫一遍嗎,這樣iOS端和android端微信都能起作用, 然鵝, 實(shí)際情況并非如此。 經(jīng)過我無數(shù)次嘗試, 總結(jié)出就是得分開寫!!
代碼修改
之前:playsinline="playsinline"這里是true寫死的,現(xiàn)在改為計(jì)算屬性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()這個(gè)計(jì)算屬性,原因是在安卓和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ù)添加兩個(gè)端所需的屬性
//在vue-video-player的onPlayerCanplay(視頻可播放)這個(gè)方法中添加回調(diào) onPlayerCanplay(player) { // console.log('player Canplay!', player) //解決自動(dòng)全屏 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ū)分兩個(gè)端內(nèi)核的不同,按需添加所需的Attribute
":playsinline"組件中自定義屬性按內(nèi)核不同按需傳值, x5內(nèi)核為false,反之為true然后來渲染組件(具體原理有待挖掘)
以上這篇基于vue hash模式微信分享#號(hào)的解決就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼
本文主要介紹了el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗(yàn)2024-09-09vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09Vuex 使用及簡單實(shí)例(計(jì)數(shù)器)
這篇文章主要介紹了Vuex 使用及簡單實(shí)例(計(jì)數(shù)器),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05