記前端hybrid學習總結

時間 2019-12-05

標籤前端 hybrid 學習總結欄目 Hybrid 简体版

原文原文鏈接

什麼是hybrid

hybrid即「混合」,即前端和客戶端的混合開發
需前端開發人員和客戶端開發人員配合完成
某些環節可能涉及到server端

hybrid存在價值

能夠快速迭代更新(無需app審覈)
體驗流暢(和NA體驗基本相似)
減小開發和溝通成本,雙端公用一套代碼

webview

是app中的一個組件(app中能夠有webview,也能夠沒有)
用於加載h5頁面,即一個小型的瀏覽器內核

file協議

瀏覽器打開本地文件,就是經過使用file協議css

file協議:本地文件,快
http(s)協議:網絡加載,慢

使用場景

使用NA:體驗要求極致,變化不頻繁(如頭條首頁)
使用hybrid:體驗要求高,變化頻繁(如頭條的新聞詳情頁)
使用h5:體驗無要求,不經常使用(如舉報,反饋等頁面)

具體實現

前端作好靜態頁面(html,js,css),將文件交給客戶端
客戶端拿到前端靜態頁面,以文件形式儲存在app內
客戶端在一個webview中
使用file協議加載靜態頁面

hybrid更新上線流程

分版本,有版本號,如201803211015
將靜態文件壓縮成zip包,上傳到服務端
客戶端每次啓動,都去服務端檢查版本號
若是服務端版本號大於客戶端版本號,就去下載最新的zip包
下載完以後解壓,覆蓋原有文件

hybrid和h5的區別

hybrid優勢:html

體驗更好,跟NA體驗基本一致
可快速迭代,無需app審覈

hybrid缺點:前端

開發成本高:聯調,測試,查bug都比較麻煩
運維成本高

適用場景web

產品都穩定功能,體驗要求高,迭代頻繁.產品型(hybrid)
單次運營活動(如xx紅包)或不經常使用功能.運營型(h5)

schema協議 -- 前端和客戶端通信的約定

網上搜的微信部分的schema協議瀏覽器

weixin://dl/scan 掃一掃

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

document.getElementById('btn').addEventListener('click', function(){
    invokeScan(); // html調用schema協議
})

// 若是要加上參數和callback,那麼就要這麼寫

window['_weixin_scan_callback'] = function(result) {
    alert(result);
}
// ...省略...
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback';
// ...省略...

封裝schema

voke.js安全

(function (window, undefined) {
  // 封裝schema
  function _invoke(action, data, callback){
    // 拼裝schema協議
    var schema = 'myapp://utils/' + action;
    
    // 拼裝參數
    schema += '?a=a';
    for(key in data){
      if(data.hasOwnProperty(key)){
        schema += '&' + key + '=' + data[key];
      }
    }

    // 拼裝callback
    callbackName = '';
    if(typeof callback === 'string'){
      callbackName = callback;
    } else {
      callbackName = action + Date.now();
      window[callbackName] = callback;
    }
    schema += 'callback=callbackName';

    // 觸發schema
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = schema;
    var body = document.body;
    body.appendChild(iframe);
    setTimeout(() => {
      body.removeChild(iframe);
      iframe = null;
    });
  }

  window.invoke = {
    share: function (data, callback) {
      _invoke('share', data, callback);
    }
  }
})(window);

index.html微信

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">分享</button>
</body>
<script src="voke.js"></script>
<script>
  document.getElementById('btn').addEventListener('click',function(){
    window.invoke.share({
      titile:'111',
      content:'2222'
    }, function(res){
      if (res.status){
        alert('分享成功!');
      } else {
        alert(res.message);
      }
    });
  });
</script>
</html>