摘要：什么是即混合即前端和客戶端的混合開發需前端開發人員和客戶端開發人員配合完成某些環節可能涉及到端存在價值可以快速迭代更新無需審核體驗流暢和體驗基本類似減少開發和溝通成本雙端公用一套代碼是中的一個組件中可以有也可以沒有用于加載頁面即一個小型的瀏

hybrid即“混合”,即前端和客戶端的混合開發

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

某些環節可能涉及到server端

可以快速迭代更新(無需app審核)

體驗流暢(和NA體驗基本類似)

減少開發和溝通成本,雙端公用一套代碼

是app中的一個組件(app中可以有webview,也可以沒有)

用于加載h5頁面,即一個小型的瀏覽器內核

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

file協議:本地文件,快

http(s)協議:網絡加載,慢

使用NA:體驗要求極致,變化不頻繁(如頭條首頁)

使用hybrid:體驗要求高,變化頻繁(如頭條的新聞詳情頁)

使用h5:體驗無要求,不常用(如舉報,反饋等頁面)

前端做好靜態頁面(html,js,css),將文件交給客戶端

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

客戶端在一個webview中

使用file協議加載靜態頁面

分版本,有版本號,如201803211015

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

客戶端每次啟動,都去服務端檢查版本號

如果服務端版本號大于客戶端版本號,就去下載最新的zip包

下載完之后解壓,覆蓋原有文件

hybrid優點:

體驗更好,跟NA體驗基本一致

可快速迭代,無需app審核

hybrid缺點:

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

運維成本高

適用場景

產品都穩定功能,體驗要求高,迭代頻繁.產品型(hybrid)

單次運營活動(如xx紅包)或不常用功能.運營型(h5)

網上搜的微信部分的schema協議

weixin://dl/scan    掃一掃

    
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";
// ...省略...

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

  
  
  
  


  分享

將以上封裝的代碼打包,叫做invoke.js,內置到客戶端

客戶端每次啟動webview,都默認執行invoke.js

本地加載,免去網絡加載都時間,速度會更快

本地加載,沒有網絡請求,黑客看不到schema協議,更安全