hybrid

時間 2019-12-06

標籤 hybrid 欄目 Hybrid 简体版

原文原文鏈接

一，hybrid是什麼，爲什麼用hybrid？

二，hybrid更新和上線流程

三，hybrid和h5區別

四，前端js和客戶端如何通信？

一，hybrid是什麼，爲什麼用hybrid？

1，文字解釋

hybrid即「混合」，即前端和客戶端的混合開發

需前端開發人員和客戶端開發人員配合完成

某些環節也可能涉及到server端

2，存在價值，爲什麼用hybrid

能夠快速迭代更新【關鍵】，無須app審覈，（思考爲什麼？，由於沒有權限操做手機系統的API，不會有安全隱患）

體驗流暢（和NA的體驗基本相似）-肉眼區別不出來

減小開發和溝通成本，雙端公用一套代碼（ios和android）

3，webview

是app中的一個組件，app能夠有webview，也能夠沒有

用於加載H5頁面等，即一個小型的瀏覽器內核，是個統稱

例，瀏覽器中：

微信中：

4，file://協議

一開始作網頁，就已經使用file協議了，雙擊打開

只不過當初沒有協議，標準的概念

再次強調協議，標準的重要性！！！如前端的 w3c標準,promise標準等等啊

加載本地的資源

01，http協議和file協議區別：

file協議：本地文件，快 file://

http／https協議：網絡加載，慢 http://

5，hybrid實現流程

不是全部場景都適合hybrid：

使用NA：體驗要求極致，變化不頻繁（如頭條的首頁）

使用hybrid：體驗要求高，變化頻繁（如頭條的新聞詳情頁）

使用H5：體驗無要求，不經常使用（如舉報，反饋等頁面）

具體實現：

前端作好靜態頁面，（html，css，js）將文件交給客戶端

客戶端拿到前端靜態頁面，以文件形式存儲在app中

客戶端在一個webview中，使用file協議加載靜態頁面

具體流程圖：

遺留問題：

app發佈以後，靜態文件如何實時更新？

靜態頁面如何獲取內容？

二，hybrid 更新上線流程

回顧hybrid實現流程

思考（目的，實現途徑）

serve端，能夠隨時更新文件

更新流程

思考（目的，可行途徑）：

要替換每一個客戶端的靜態文件

只能客戶端來作

客戶端去server下載最新的靜態文件

維護server的靜態文件

完整流程：

分版本，有版本號，如201803211015

將靜態文件壓縮成zip包，上傳到服務端

客戶端每次啓動，都去服務端檢查版本號

若是服務端版本號大於客戶端版本號，就去下載最新的zip包

下載完以後解壓包，而後將現有文件覆蓋

要點1:服務端的版本和zip包維護

要點2:更新zip包以前，先對比版本號

要點3，zip包下載解壓和覆蓋

三，hybrid 和 H5 的比較：

1，優勢：

體驗好，跟NA基本一致

可快速迭代，無需app審覈（關鍵）

2，缺點:

開發成本高，連調，測試，查bug都比較麻煩

運維成本高，參考上面講的更新上線流程

3，適用的場景

hybrid：產品的穩定功能，體驗要求高，迭代頻繁，適用於產品型

h5:單次的運營活動（如XX紅包），或不經常使用功能，適用於運營型

四，前端和客戶端通信

（微信公衆平臺：JS-SDk（微信公衆平臺封裝的，h5前端和客戶端的一個橋），下面內容要深刻一些）

1，回顧以前的問題

2，js和客戶端通信的基本形式

3，schema協議簡介和使用（前端和客戶端通訊的協議規定）

4，schema使用的封裝

5，內置上線

新聞詳情頁適用hybrid，前端如何獲取新聞內容？

不能用ajax獲取，第一，跨域，第二，速度慢

hybrid是客戶端獲取新聞內容（能夠提早獲取），而後js通信拿到內容，再渲染

js和客戶端通信的基本形式

js訪問客戶端能力，傳遞參數和回調函數

客戶端經過回調函數返回內容

schema協議簡介和使用（前端和客戶端）

以前介紹了http/https和file協議

scheme協議——前端和客戶端通信的約定如 weixin:// （APP本身定的）

// schema協議簡介和使用
// 如下是演示，沒法正常運行，微信有嚴格的權限驗證，外部頁面不能隨意使用schema
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'weixin://dl/scan'; //iframe訪問schema
var body = document.body || document.getElementsByTagName('body')[0];
body.appendChild(iframe);
setTimeout(function() {
    body.removeChild(iframe); //銷燬iframe
    iframe = null;
})

加上參數和callbackcss

// 若是要加上參數和callback,那麼就要這麼寫
window['_weixin_scan_callback'] = function(result) {
    alert(result);
}

// ..省略
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback'
// ..省略

schema協議的封裝html

新建invoke.js前端

(function(window) {
    // 跳用schema的封裝
    function _invoke(action, data, callback) {
        // 拼裝schema協議
        var schema = 'myapp://utils/' + action;

        // 拼接參數
        schema += '?a=a';
        var key;
        for (key in data) {
            if (data.hasOwnProperty(key)) {
                schema += '&' + key + data[key];
            }
        }

        // 處理callback
        var callbackName = '';
        if (typeof callback === 'string') {
            callbackName = callback;
        } else {
            callbackName = action + Date.now();
            window[callbackName] = callback;
        }
        schema += '&callback=' + callbackName;

        // 觸發
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = schema; //重要
        var body = document.body || document.getElementsByTagName('body')[0];
        body.appendChild(iframe);
        setTimeout(function() {
            body.removeChild(iframe); //銷燬iframe
            iframe = null;
        })
    }


    // 暴露到全局變量
    window.invoke = {
        share: function(data, callback) {
            _invoke('share', data, callback)

        },
        scan: function(data, callback) {
            _invoke('scan', data, callback)
        },
        login: function(data, callback) {
            _invoke('login', data, callback)
        },
    }
})(window)

schema.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>schema</title>
</head>

<body>
    <button id="btn1">掃一掃</button>
    <button id="btn2">分享</button>
    <script src="./invoke.js"></script>
    <script>
    document.getElementById('btn1').addEventListener('click', function() {
        window.invoke.scan({}, function() {})
    })

    document.getElementById('btn2').addEventListener('click', function() {
        window.invoke.share({
            title: 'xxx',
            content: 'yyy'
        }, function(result) {
            if (result.errno === 0) {
                alert('分享成功');
            } else {
                // 分享失敗
                alert(result.message);
            }
        })
    })
    </script>
</body>

</html>