一篇搞定微信分享和line分享

轉載：http://www.cnblogs.com/liuyongjia/p/7581813.html

 

前言

在h5的頁面開發中，分享是不可或缺的一部分，對於一些傳播性比較強的頁面，活動頁之類的，分享功能極爲重要。例如，京東等電商年底時會有一系列的總結h5在微信中傳播，就不得不提到微信的分享機制。

微信分享

最簡單的配置

微信分享靜態頁
微信分享須要後臺回傳時間戳、簽名等信息，若是頁面比較簡單，就能夠用下述方法作簡單設置。
微信默認抓取第一張符合要求的圖片做爲分享圖，圖片大於300px × 300px，圖片不能是display：none的。
根據上述規則，img的設置能夠爲這樣：

<img src="//img30.360buyimg.com/mobilecms/jfs/t4033/80/1876911537/17072/11729313/589bec20Nc5555ece.jpg" style="position:absolute;width:100%;z-index:0;">

要記得把這張圖片放到最前面，若是網頁加載了其餘符合規則的圖片，也能保證正常分享。
（以前看到過一個weixinjsbridge的源碼，抓取的規則大概是這樣，具體忘記了，後面也找不到那個源代碼了，若是有錯誤，請通知我。）
分享標題是取頁面標題，可使用js動態修改標題，可是iOS下會有問題，有關修改title的hack，方法以下。

/**  * 處理微信設置title問題  * 頁面在加載完成後設置title在微信下不會觸發改變  */ define(function(){ return function(src){ var frame = document.createElement('iframe'),flag = false; frame.style.display = 'none'; frame.onload=frame.onerror=frame.onreadystatechange=function(){ if(flag){return} flag = true; setTimeout(function(){document.body.removeChild(frame)},0) }; // frame.src = src? (src + (src.indexOf('?') != -1?'&':'?') + '__=' + Date.now()) : '/favicon.ico', document.body.appendChild(frame); } });

相似的hack有不少，基於jquery、原生的也有不少，基本原理就是使用iframe。

以後分享之後，在朋友圈是這樣

與好友分享後是這樣

若是對於分享的要求不高，上面的方法就能夠了。
But，怎麼可能？

真正的分享

在傳播性極強的h5活動頁中，常常會須要帶有不一樣的圖片、定製的描述、title等等，此時，必需要申請一個公衆號，而且須要後臺的配合，才能完整的使用微信的分享功能。
申請公衆號交給產品，開發接口交給網關，前端要作什麼呢？
先放個官方文檔連接，我來簡述步驟，若是有疑問，能夠留言，或者查閱官方文檔。

1. 頁面導入官方js，http://res.wx.qq.com/open/js/jweixin-1.2.0.js。（須要吐槽的是，以前官網是是1.0.0版本，忽然變成了1.2.0，毫無通知。。）
2. 請求接口，獲取時間戳、簽名等一系列公衆號的信息。
3. 調用wx.config()，把這些必填的信息填入。
4. 調用wx.ready() 處理一些初始化的內容。此處配置分享到朋友圈、分享給好友的內容。
5. 調用wx.error()處理錯誤信息，有時候簽名會失效，此處能夠從新請求接口，從新進行2-4步。

6. end
   簡單吧，官方文檔十分詳細，接下來分享一個方法，你們能夠自行參考修改。

   var wxShares = function(title, desc, link, imgUrl) { // req爲我封裝的一個ajax方法 req({ url: '//youdomainulr.com', // 請求接口url success: function(data) { if (typeof data == "string") { data = JSON.parse(data); } // 具體的數據結構不必定是這樣，只是例子 var appId = data.shareResult.appId, timestamp = data.shareResult.timestamp, nonceStr = data.shareResult.nonceStr, signature = data.shareResult.signature; wx.config({ debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。 appId: appId, // 必填，公衆號的惟一標識 timestamp: timestamp, // 必填，生成簽名的時間戳 nonceStr: nonceStr, // 必填，生成簽名的隨機串 signature: signature, // 必填，簽名，見附錄1 jsApiList: ['checkJsApi', 'openLocation', 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2 }); wx.ready(function() { wx.checkJsApi({ jsApiList: [ 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage' ], success: function(res) { // alert(JSON.stringify(res)); } }); wx.onMenuShareAppMessage({ title: title, // 分享標題 desc: desc, // 分享描述 link: link, // 分享連接 imgUrl: imgUrl, // 分享圖標 type: 'link', // 分享類型,music、video或link，不填默認爲link dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空 success: function() { console.log("分享成功"); // 用戶確認分享後執行的回調函數 }, cancel: function() { // 用戶取消分享後執行的回調函數 } }); wx.onMenuShareTimeline({ title: title, // 分享標題 link: link, // 分享連接 imgUrl: imgUrl, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } }); }); } }); };

   上面的代碼給出了分享到朋友圈和分享給好友的例子，其餘還有不少渠道如qq、微博，大同小異，請自行參考官方文檔。

line分享

微信還不夠，咱們要作海外站了怎麼辦？這時須要分享到line。（facebook因爲業務不適合，不須要作，我暫時沒有研究，若是有空，我會補一篇。）
老樣子，先上官方文檔。line被牆了，可能須要FQ。
官方文檔極爲貼心，基本上能夠知足大部分需求，我這裏也不贅述了，按照官方文檔一步步操做很簡單。
But，官網的例子只支持那幾種按鈕樣式，我要自定義樣式怎麼辦？官方提供了提交途徑，問題我寫一個頁面，要搞這麼麻煩嗎？
因而我想到了喚起app協議，就這麼一搜，哈哈哈哈哈

看看貼心的Google智能提示第一個是什麼，哈哈哈哈哈哈
然而，我發現，並不能打開官網，剩下的英文網站也沒有解答，日語看不懂。o(╥﹏╥)o ，後來終於找到了一篇博客。

<meta property="og:title" content="標題"/> <meta property="og:description" content="內容敘述"/> <meta property="og:url" content="分享網址"/> <meta property="og:image" content="分享圖片"/>

注意這上面提到的抓取meta，若是非要適配line，能夠這麼寫，若是不須要，就按照正常的配置就好了。

<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title> <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!"> <link rel="apple-touch-icon-precomposed" href="//st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201709071824">

如圖所示，line內置的爬蟲會本身抓取頁面上的配置。

上面的寫法基本上就知足咱們的須要了。由於line是自行抓取分享過來的連接上的內容，他提到的配置我也懶得上線了，就抄着主站上的內容改一改就好了。哈哈

接下來我們來看主要的分享連結，這兩個方法就是這次的主角
//桌機
"https://lineit.line.me/share/ui?url="+ encodeURIComponent("分享的網址")

//手機
"line://msg/text/"+ encodeURIComponent("分享的網址")

這裏須要判斷環境，pc的話，就另起標籤頁，它本身會判斷cookie登陸與否，不然就用相似openapp的這種協議，去喚起line（若是安裝了的話，就會打開line）。
這裏有一個問題，正常來講，若是用戶安裝了，則本身打開line正常分享，沒裝的話，就無法打開這種協議了。
並且，通過我在微信、uc等環境下打開，（我裝了line），並不會跳轉到line裏面，毫無反應，也不提示找不到app。不知道國外的app是否是也是這個調性。
最後與產品協調解決方案是，判斷是否在line中，若是在，調用line分享，不然，彈窗展現一個url，讓用戶去複製粘貼。o(╥﹏╥)o，也算是降級方案了吧。
line環境下的webview發送請求時，ua會帶有 Line 這個字段，按照這樣處理便可。
方法以下：

function getPlatform () { var _ua = navigator.userAgent , _iswx = _ua.indexOf('MicroMessenger') != -1 , _isLine = _ua.indexOf('Line') != -1 ; if (_iswx) { return "wx"; } else if (_isLine) { return "line"; } else { return "m"; } } /**  ** obj 爲share對象，封裝須要傳遞的描述信息  ** callback 爲callback對象，封裝了一些不一樣平臺下的回調函數 */ function share(obj, callback) { getShareInformation(function () { var shareObj = obj || {} , title = obj.title || '默認title' , desc = obj.desc || '默認描述' , url = obj.url || '默認url' , img = obj.img || '默認圖片' , currentPlatform = getPlatform() ; switch (currentPlatform) { case 'wx': // TODO 須要請求微信的一些信息 callback.wxCallback(shareObj); break; case 'line': window.open('line://msg/text/'+ encodeURIComponent(url),"_blank") break; case 'm': callback.mCallback(shareObj); break; default: callback.mCallback(shareObj); break; } }) }

以上。