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

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

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

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

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

體驗(yàn)流暢(和NA體驗(yàn)基本類(lèi)似)

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

是app中的一個(gè)組件(app中可以有webview,也可以沒(méi)有)

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

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

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

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

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

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

使用h5:體驗(yàn)無(wú)要求,不常用(如舉報(bào),反饋等頁(yè)面)

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

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

客戶(hù)端在一個(gè)webview中

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

分版本,有版本號(hào),如201803211015

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

客戶(hù)端每次啟動(dòng),都去服務(wù)端檢查版本號(hào)

如果服務(wù)端版本號(hào)大于客戶(hù)端版本號(hào),就去下載最新的zip包

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

hybrid優(yōu)點(diǎn):

體驗(yàn)更好,跟NA體驗(yàn)基本一致

可快速迭代,無(wú)需app審核

hybrid缺點(diǎn):

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

運(yùn)維成本高

適用場(chǎng)景

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

單次運(yùn)營(yíng)活動(dòng)(如xx紅包)或不常用功能.運(yùn)營(yíng)型(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 訪(fǎng)問(wèn) schema
    var body = document.body || document.getElementByName("body")[0];
    body.appendChild(iframe);
    setTimeout(function(){
        body.removeChild(iframe); // 銷(xiāo)毀iframe
        iframe = null;
    });
}

document.getElementById("btn").addEventListener("click", function(){
    invokeScan(); // html調(diào)用schema協(xié)議
})

// 如果要加上參數(shù)和callback,那么就要這么寫(xiě)

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)置到客戶(hù)端

客戶(hù)端每次啟動(dòng)webview,都默認(rèn)執(zhí)行invoke.js

本地加載,免去網(wǎng)絡(luò)加載都時(shí)間,速度會(huì)更快

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