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

時間 2020-07-20

標籤一篇搞定微信分享 line 简体版

原文原文鏈接

前言

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

微信分享

最簡單的配置

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

<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。java

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

與好友分享後是這樣

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

真正的分享

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

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

line分享

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

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

<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;
        }
    })

}

以上。

更多專業前端知識，請上【猿2048】www.mk2048.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。