记前端hybrid学习总结

摘要：什么是即混合即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到端存在价值可以快速迭代更新无需审核体验流畅和体验基本类似减少开发和沟通成本双端公用一套代码是中的一个组件中可以有也可以没有用于加载页面即一个小型的浏

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协议,更安全