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

hybrid即“混合”,即前端和客戶端的混合開發(fā)

需前端開發(fā)人員和客戶端開發(fā)人員配合完成

某些環(huán)節(jié)可能涉及到server端

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

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

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

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

用于加載h5頁面,即一個小型的瀏覽器內(nèi)核

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

file協(xié)議:本地文件,快

http(s)協(xié)議:網(wǎng)絡加載,慢

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

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

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

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

客戶端拿到前端靜態(tài)頁面,以文件形式儲存在app內(nèi)

客戶端在一個webview中

使用file協(xié)議加載靜態(tài)頁面

分版本,有版本號,如201803211015

將靜態(tài)文件壓縮成zip包,上傳到服務端

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

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

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

hybrid優(yōu)點:

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

可快速迭代,無需app審核

hybrid缺點:

開發(fā)成本高:聯(lián)調(diào),測試,查bug都比較麻煩

運維成本高

適用場景

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

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

網(wǎng)上搜的微信部分的schema協(xié)議

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調(diào)用schema協(xié)議
})

// 如果要加上參數(shù)和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協(xié)議
    var schema = "myapp://utils/" + action;
    
    // 拼裝參數(shù)
    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";

    // 觸發(fā)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,內(nèi)置到客戶端

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

本地加載,免去網(wǎng)絡加載都時間,速度會更快

本地加載,沒有網(wǎng)絡請求,黑客看不到schema協(xié)議,更安全