移動端分享插件使用總結

  對於分享插件來說，大家肯定都很熟悉，最常用的就是百度分享、jiathis分享等，可分享的媒體也非常多，當然最常用的需求無非也就新浪微博、QQ空間、QQ好友、微信朋友圈、微信好友，其他什么亂七八糟的人人網、貓撲、豆瓣就不多做考慮了，插件內的更多選項列出來有20多個。。。

既然插件功能已經這么完善了，那還有什么好說的，看看文檔就能解決了還有什么好總結的？

但是，問題來了，以上的插件在微信分享時，都是生成一個二維碼供用戶手機掃一掃，如下圖：

這在pc端沒問題，但是在移動端的時候，如果瀏覽器不支持長按識別二維碼功能。。。（我能怎么掃啊，我也很絕望啊），而且即使支持也會感覺用戶體驗很差，分享很費勁。。。

所以，本篇總結的是 如何盡可能的在移動端瀏覽器中使用微信分享功能（盡可能。。。。有的地方真的，臣妾做不到啊。），本文中主要是對網上個方法的總結，個人使用經驗，沒有什么原創干貨。

 

開始進入正題：

　　需求：需要在微信、各種移動端瀏覽器、QQ內置瀏覽器中實現將頁面分享至微信好友、朋友圈、新浪微博、QQ好友、QQ空間。

　　分析：常用插件（百度、jiathis等）對於移動端的微信分享會出現上面剛開始討論的問題，手機上彈出二維碼無法使用，其他的媒體分享方式倒是正常，所以就移動端微信分享的問題進一步學習。

　　經過一番資料查找發現：

1. 微信中，只能通過提示點擊右上角進行分享
2. QQ瀏覽器、UC瀏覽器可通過開放的API調用微信分享
3. 其他的瀏覽器沒有明確的分享接口，但是大都可以手動通過設置菜單進行分享到微信中
4. 其他的瀏覽器沒有明確的分享接口，可以通過URL scheme調整至QQ瀏覽器（前提是要安裝了QQ瀏覽器）

　　參考資料：

　　一個在手機網頁端可以直接調用原生分享的js 

　　 soshm.js 一個具有中國特色的社交分享組件    demo

 

　　經過一番查找，最后使用soshm.js進行功能開發，因為soshm.js使用webpack把圖標、css、js等都打包成一個soshm.js，引用方便，而且樣式也不錯，也能達到需要的配置功能，所以。。。。。

　　使用后。。。。測試后。。。。

　　根據自己的需求對源碼做了一些修改，總結下該插件的幾個問題：

1. UC瀏覽器使用分享時，自定義圖片無效，直接截屏，會截取到分享的彈窗遮罩（這個是UC瀏覽器的問題）
2. QQ內置瀏覽器中無法使用分享功能，測試就分享到騰訊微博有跳轉（暫定解決辦法：同微信提示右上角菜單分享）
3. QQ內置瀏覽器使用右上角自帶分享功能如何自定義標題圖片鏈接等的問題 QQ對外分享組件接口文
4. 除QQ、UC瀏覽器之外的瀏覽器對於分享至微信好友、微信朋友圈的處理

　　好了，現在就對問題一個一個來修改吧：

　　問題一：UC瀏覽器使用分享時，自定義圖片無效，直接截屏，會截取到分享的彈窗遮罩（這個是UC瀏覽器的問題）；

　　　　查看soshm.js中關於UC瀏覽器操作代碼：

if (device.isUCBrowser) {  //判斷是uc瀏覽器
        if (nativeShareApps[site]) {   //判斷選擇的分享方式是否支持
          app = device.isIOS ? nativeShareApps[site][0] : nativeShareApps[site][1];   //區分IOS和安卓不同的方法名稱
        }

        if (app !== undefined) {
          shareInfo = [data.title, data.digest, data.url, app, '', '@'+data.from, ''];  //配置分享信息

          // android
          if (window.ucweb) {
            ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
          }

          // ios
          if (window.ucbrowser) {
            ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
          }
          return;
        }
      }

　　　　從第7行中發現配置的shareInfo數據第二項為自定義圖片路徑，但是實際使用時會發現 data.digest 會顯示在 簡介 中，而圖片是截屏，

　　　　網上找了很久，沒有找到對應的UC瀏覽器的分享接口，這就很尷尬了，也試着改變 data.digest的位置，沒有收效，所以。。。最后只能選擇一個折中的辦法：

　　　　　　圖片使用截屏，但要隱藏分享插件的遮罩層，盡量顯示頁面的內容，所以，繼續改soshm.js咯

　　　　　　下方代碼為 點擊分享按鈕，彈窗分享遮罩，並給按鈕綁定事件，點擊空白處關閉遮罩的方法；

  soshm.popIn = function(options) {
    var popDelegation;
    var pop = doc.querySelector('.soshm-pop');
    if (!pop) {
      pop = doc.createElement('div');
      pop.className = 'soshm-pop';
      body.appendChild(pop);
    }

    options = extend({}, defaults, options);
    pop.innerHTML =
      '<div class="soshm-pop-sites">' +
        getSitesHtml(options.sites, 3) +
      '</div>';

    var popDelegation = delegate(pop, '.soshm-item', 'click', function(e) {
      var site = e.delegateTarget.dataset.site;
      pop.style.display = 'none';
      setTimeout(function() {
        shareTo(site, options);
      }, 50);
    });
　　　　要想在UC瀏覽器截屏之前關閉遮罩，想法是在點擊具體分享功能后，執行shareTo之前，執行pop.style.display = 'none';關閉遮罩層，實現起來好像很簡單，但是為什么要在加一個setTimeout，延遲50毫米來執行shareTo呢？
　　　　這也是無奈，如果直接使用pop.style.display = 'none';緊跟着執行shareTo(site, options); 你會發現沒有效果，遮罩層還是會被截取到，起初以為是pop元素上有 transition 0.6S過渡的原因，結果使用 pop.parentNode.removeChild(pop)直接刪除pop元素，
　　　　發現也是無效的，這是為什么呢？？？？ 還沒搞明白， 后來只能使用setTimeout進行延遲處理，50毫米即可，還可以更小。。。。 DOM操作為什么不會在shareTo之前完成，有沒大神知道的。。

    pop.classList.remove('soshm-pop-hide');
    pop.style.display = 'block';
    setTimeout(function() {
      pop.classList.add('soshm-pop-show');
    }.bind(this), 0);

    pop.addEventListener('click', function() {
      pop.classList.remove('soshm-pop-show');
      pop.classList.add('soshm-pop-hide');
      setTimeout(function() {
        pop.style.display = 'none';
        popDelegation.destroy();
      }, 1100);
    }, false);
  };

 

　　問題二：QQ內置瀏覽器中無法使用分享功能，測試就分享到騰訊微博有跳轉（暫定解決辦法：同微信提示右上角菜單分享）；

　　　　原因：通過在代碼中添加alert（）調試，發現QQ內置瀏覽器打開分享時，運行到了 QQ瀏覽器APP中，使用了QQ瀏覽器APP的接口進行分享就無效了，兩者不知道怎么共通，這些都沒有相關文檔查看，一頭霧水，

　　　　所以，又是一個折中的辦法 判斷如果是QQ內置瀏覽器中，則同微信提示右上角菜單分享；效果如下：

　　　　

  　　　這時候，問題又來了（蛋疼。。。），怎么區分微信、QQ瀏覽器APP、QQ內置瀏覽器這三者呢？三個本來同根生，就是尼瑪非的長得不一樣。。。

　　　　判斷瀏覽器類型最常用的辦法肯定就是 用戶代理(user agent),獲取方式：window.navigator.userAgent，然后你就會獲得一長串比如下方的 安卓中對於三個兄弟的userAgent：

　　　　       　　　

　　　　之前是通過MicroMessenger 判斷是否是微信中打開，
　　　　通過MQQBrowser判斷 是否是QQ瀏覽器APP中打開，
　　　　但是要判斷是否是QQ內置瀏覽器打開的就有點尷尬了，經過暗中觀察發現一些區別：

　　　　　　1、微信和QQ內置中代由mobile前綴， 而QQ瀏覽器APP只有MQQBrowser
　　　　　　2、QQ內置瀏覽器會出現 V1_AND_SQ_6.7.1_YYB_D QQ這些字段；

　　　　

　　　　最后：使用  'Mobile MQQBrowser' && ! 'MicroMessenger'  來判斷QQ內置瀏覽器，由於手上沒什么測試機，暫時在本人安卓上是能正確判斷的，可能對於不同系統、不同版本軟件或存在問題，這個待日后測試；

　　　　滿心歡喜的又以為弄好了QQ內置瀏覽器分享，可是。。。。他喵的，一使用，分享到QQ好友 微信好友等，發現尼瑪 標題、簡介、圖片 什么都沒有，微信中直接一個null，賊尷尬，這也就引發了第三個問題；

 

　　問題三：QQ內置瀏覽器使用右上角自帶分享功能如何自定義標題圖片鏈接等的問題      

　　　　又他喵的一番苦問，苦找，發現原來要想自定義QQ內置瀏覽器右上角分享需要像微信中分享一樣，載入官方JS，才能進行相應的配置；

　　　　官方鏈接：QQ對外分享組件接口  手機QQ內置網頁，微信內置網頁中進行分享到QQ和微信的操作

　　　　這下終於能好點了吧：

  if (deviceDetect('Mobile MQQBrowser') && !deviceDetect('MicroMessenger')) {  //判斷是QQ內置瀏覽器
    loadScript('http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js', function() {
      setShareInfo({
        title: '{$goods.goods_name}',
        summary: '{$goods.goods_name}',
        pic:"圖片路徑",
        url: “頁面url”
      });
    })
  }
  
　//loadScript 用於插入官方js
  function loadScript(url, done) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = onreadystatechange = function() {
      if (!this.readyState ||
          this.readyState === 'load' ||
          this.readyState === 'complete') {
        done && done();
        script.onload = onreadystatechange
        script.parentNode.removeChild(script);
      }
    };
    document.body.appendChild(script);
  }

 

　　問題四：除QQ、UC瀏覽器之外的瀏覽器對於分享至微信好友、微信朋友圈的處理；　　　　

　　　　各種款式各種版本的瀏覽器多不勝數，無法一一對應寫出分享調用，況且也拿不到分享接口（這個最蛋疼，UC和QQ也都是前人留下的不懂哪里查看，哪天要是不爽給改了，那就。。。。），

　　　　所以對於其他類型的瀏覽器處理辦法：

　　　　　　1、隱藏微信相關的分享；

　　　　　　2、點擊微信分享，彈窗提示用戶手動使用瀏覽器菜單中的分享功能，現在的手機瀏覽器大都支持分享到微信中；

　　　　綜合考慮，選擇第二種方式比較適合，修改：

  // 在普通瀏覽器里點擊微信分享，通過QQ瀏覽器當橋梁喚起微信客戶端
    // 如果沒有安裝QQ瀏覽器則點擊無反應
    if (site.indexOf('weixin') !== -1) {
      layer.open({content:'請使用瀏覽器菜單中分享按鈕，選擇分享至微信', skin:'msg', time:5});    這里使用了layer插件進行彈窗提示，大家可以根據自己的情況修改；

      // var mttbrowserURL = appendToQuerysting(location.href, {__soshmbridge: site});
      // openAppByScheme('mttbrowser://url=' + mttbrowserURL);
　　　　上面是原來的代碼，使用的是URL scheme調用QQ瀏覽器APP，但是前提是你安裝了QQ瀏覽器，即使按照了QQ瀏覽器，也只能在QQ瀏覽器中打開該頁面，還是得手動再次點擊分享，個人感覺有點雞肋。。。。

    }

 

 

一個移動端分享插件，磕磕絆絆，雖然沒有真正的解決所有瀏覽器的分享問題，但也達到了能較好的使用，感謝soshm.js作者  https://github.com/calledT/soshm 

　　后續繼續改進。。