什么是hybridhybrid即“混合”,即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到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 扫一扫<!–以下是演示,无法正常运行,微信有严格的权限验证,外部页面不能随意使用schema–> 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’;// …省略…封装schemavoke.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<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title></head><body> <button id=“btn”>分享</button></body><script src=“voke.js”></script><script> document.getElementById(‘btn’).addEventListener(‘click’,function(){ window.invoke.share({ titile:‘111’, content:‘2222’ }, function(res){ if (res.status){ alert(‘分享成功!’); } else { alert(res.message); } }); });</script></html>内置上线将以上封装的代码打包,叫做invoke.js,内置到客户端客户端每次启动webview,都默认执行invoke.js本地加载,免去网络加载都时间,速度会更快本地加载,没有网络请求,黑客看不到schema协议,更安全