hybrid文字解释
- hybrid即 “混合” ，前端和客户端混合开发
- 需要前端和客户端的人员配合完成
- 某些环节也可能涉及到server端
hybrid存在价值
- 快速更新迭代，不需要app审核
- 减少开发和沟通成本，双端公用一套代码（基本上）
- 体验流畅，和原生差别不大
hybrid和h5的区别
- hybrid和h5相比，开发成本和运维成本比较高，需要客户端和服务端的配合
- hybrid的速度比h5快，但成本更高
- h5成本比较低，但速度较慢
hybrid具体实现
- 前端写好的html，css，js代码放入服务端，由客户端通过服务端下载到本地。
- 通过file协议，从本地获取代码，速度很快
- 并通过webview展示出来（webview是app的一个组件，可有可无，相当于一个小型浏览器内核）
hybrid更新流程
- 前端写好前端代码，打包压缩后，带上版本号，放到服务端。
- 客户端每次启动，判断版本号是否更新，若更新，则到服务端获取最新的前端代码，否则不更新
js和客户端的通信
- 通过schema协议进行通信，和http协议中，通过ajax和jsonp的方式类似。
以下是schema封装：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js和客户端的通信</title> </head> <body> <script> ;(function(window) { // 调用 schema 的封装 function _invoke(action, data, callback) { // 拼接 schema 协议 var schema = 'myschema://' + action; // 拼接参数 schema += '?a=a'; for (var k in data) { if (data.hasOwnProperty(k)) { schema += '&' + k + '=' + data[k]; } } // 处理回调 var callbackName = ''; if (typeof callback === 'string') { callbackName = callback; } else { callbackName = action + Data.now(); // 定义全局函数接收结果 window[callbackName] = callback; } schema += '&callback=' + callbackName; // 创建元素插入通过schema获取到的内容 var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = schema; document.body.appendChild(iframe); setTimeout(function() { document.body.removeChild(iframe); iframe = null; }) } function invokeShare(data, callback) { _invoke('share', data, callback) } function invokeScan(data, callback) { _invoke('scan', data, callback) } function invokeLogin(data, callback) { _invoke('login', data, callback) } // 暴露到全局变量 window.invoke = { share: invokeShare, scan: invokeScan, login: invokeLogin // } })(window); window.invoke.share({ title: 'xxx', content: 'yyy' }, function(result) { console.log(result); }) </script> </body> </html>