记前端hybrid学习总结

李涛发布于2019-06-25 17:13 / 3501人阅读

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

什么是hybrid

hybrid即“混合”,即前端和客户端的混合开发

需前端开发人员和客户端开发人员配合完成

某些环节可能涉及到server端

hybrid存在价值

可以快速迭代更新(无需app审核)

体验流畅(和NA体验基本类似)

减少开发和沟通成本,双端公用一套代码

webview

是app中的一个组件(app中可以有webview,也可以没有)

用于加载h5页面,即一个小型的浏览器内核

file协议

浏览器打开本地文件,就是通过使用file协议

file协议:本地文件,快

http(s)协议:网络加载,慢

使用场景

使用NA:体验要求极致,变化不频繁(如头条首页)

使用hybrid:体验要求高,变化频繁(如头条的新闻详情页)

使用h5:体验无要求,不常用(如举报,反馈等页面)

具体实现

前端做好静态页面(html,js,css),将文件交给客户端

客户端拿到前端静态页面,以文件形式储存在app内

客户端在一个webview中

使用file协议加载静态页面

hybrid更新上线流程

分版本,有版本号,如201803211015

将静态文件压缩成zip包,上传到服务端

客户端每次启动,都去服务端检查版本号

如果服务端版本号大于客户端版本号,就去下载最新的zip包

下载完之后解压,覆盖原有文件

hybrid和h5的区别

hybrid优点:

体验更好,跟NA体验基本一致

可快速迭代,无需app审核

hybrid缺点:

开发成本高:联调,测试,查bug都比较麻烦

运维成本高

适用场景

产品都稳定功能,体验要求高,迭代频繁.产品型(hybrid)

单次运营活动(如xx红包)或不常用功能.运营型(h5)

schema协议 -- 前端和客户端通讯的约定

网上搜的微信部分的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";
// ...省略...

封装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




  
  
  
  Document

内置上线

将以上封装的代码打包,叫做invoke.js,内置到客户端

客户端每次启动webview,都默认执行invoke.js

本地加载,免去网络加载都时间,速度会更快

本地加载,没有网络请求,黑客看不到schema协议,更安全

混合云超融合服务器机器学习学习总结机器学习总结 javascript学习总结机器学习培训总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/17233.html

记前端hybrid学习总结

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

CodeSheep 2019-08-23 15:41 评论0 收藏0
记前端hybrid学习总结

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

chengtao1633 2019-06-25 12:41 评论0 收藏0
记前端hybrid学习总结

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

yimo 2019-08-02 14:25 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

Jochen 2019-08-05 11:14 评论0 收藏0