基於vue hash模式微信分享#號的解決

阿新 • • 發佈：2020-09-08

看程式碼吧~

 // 問題描述在微信中分享到朋友圈或好友時，分享出去的路由被破壞，開啟分享的連結，路由中的“#”會被去掉並追加？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: '這是標題',// 分享連結
      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模式微信分享#號的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。