移動端分享插件使用總結

時間 2019-11-11

標籤移動分享插件使用總結欄目無線简体版

原文原文鏈接

對於分享插件來講，你們確定都很熟悉，最經常使用的就是百度分享、jiathis分享等，可分享的媒體也很是多，固然最經常使用的需求無非也就新浪微博、QQ空間、QQ好友、微信朋友圈、微信好友，其餘什麼亂七八糟的人人網、貓撲、豆瓣就很少作考慮了，插件內的更多選項列出來有20多個。。。css

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

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

這在pc端沒問題，可是在移動端的時候，若是瀏覽器不支持長按識別二維碼功能。。。（我能怎麼掃啊，我也很絕望啊），並且即便支持也會感受用戶體驗不好，分享很費勁。。。webpack

因此，本篇總結的是如何儘量的在移動端瀏覽器中使用微信分享功能（儘量。。。。有的地方真的，臣妾作不到啊。），本文中主要是對網上個方法的總結，我的使用經驗，沒有什麼原創乾貨。ios

開始進入正題：

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

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

　　通過一番資料查找發現：web

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

　　參考資料：shell

　　一個在手機網頁端能夠直接調用原生分享的js api

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

　　通過一番查找，最後使用soshm.js進行功能開發，由於soshm.js使用webpack把圖標、css、js等都打包成一個soshm.js，引用方便，並且樣式也不錯，也能達到須要的配置功能，因此。。。。。

　　使用後。。。。測試後。。。。

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

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

　　好了，如今就對問題一個一個來修改吧：

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

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

 1 if (device.isUCBrowser) {  //判斷是uc瀏覽器
 2         if (nativeShareApps[site]) {   //判斷選擇的分享方式是否支持
 3           app = device.isIOS ? nativeShareApps[site][0] : nativeShareApps[site][1];   //區分IOS和安卓不一樣的方法名稱
 4         }
 5 
 6         if (app !== undefined) {
 7           shareInfo = [data.title, data.digest, data.url, app, '', '@'+data.from, ''];  //配置分享信息
 8 
 9           // android
10           if (window.ucweb) {
11             ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
12           }
13 
14           // ios
15           if (window.ucbrowser) {
16             ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
17           }
18           return;
19         }
20       }

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

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

　　　　　　圖片使用截屏，但要隱藏分享插件的遮罩層，儘可能顯示頁面的內容，因此，繼續改soshm.js咯

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

 1   soshm.popIn = function(options) {
 2     var popDelegation;
 3     var pop = doc.querySelector('.soshm-pop');
 4     if (!pop) {
 5       pop = doc.createElement('div');
 6       pop.className = 'soshm-pop';
 7       body.appendChild(pop);
 8     }
 9 
10     options = extend({}, defaults, options);
11     pop.innerHTML =
12       '<div class="soshm-pop-sites">' +
13         getSitesHtml(options.sites, 3) +
14       '</div>';
15 
16     var popDelegation = delegate(pop, '.soshm-item', 'click', function(e) {
17       var site = e.delegateTarget.dataset.site;
18       pop.style.display = 'none';
19       setTimeout(function() {
20         shareTo(site, options);
21       }, 50);
22     });
　　　　要想在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以前完成，有沒大神知道的。。

23     pop.classList.remove('soshm-pop-hide');
24     pop.style.display = 'block';
25     setTimeout(function() {
26       pop.classList.add('soshm-pop-show');
27     }.bind(this), 0);
28 
29     pop.addEventListener('click', function() {
30       pop.classList.remove('soshm-pop-show');
31       pop.classList.add('soshm-pop-hide');
32       setTimeout(function() {
33         pop.style.display = 'none';
34         popDelegation.destroy();
35       }, 1100);
36     }, false);
37   };

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

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

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

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

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

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

　　　　　　一、微信和QQ內置中代由mobile前綴，而QQ瀏覽器APP只有MQQBrowser
　　　　　　二、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   // 在普通瀏覽器裏點擊微信分享，經過QQ瀏覽器當橋樑喚起微信客戶端
2     // 若是沒有安裝QQ瀏覽器則點擊無反應
3     if (site.indexOf('weixin') !== -1) {
4       layer.open({content:'請使用瀏覽器菜單中分享按鈕，選擇分享至微信', skin:'msg', time:5});    這裏使用了layer插件進行彈窗提示，你們能夠根據本身的狀況修改；

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

7     }