hybrid是什么
hybrid也就是前端和客户端的混合开发。简单的说就是客户端通过webview组件使用file协议来加载h5页面。
这里提到两个概念，webview和file协议。
webview客户端的一个组件，可用来加载h5页面。
file协议是加载本地文件的协议，它的优势的加载速度快。
为什么使用hybrid
先来说下使用hybrid的优点：
1、可以快速迭代更新，无需应用商店审核
2、体验流畅
3、减少开发和沟通成本，双端共用一套代码。
当然，有优点也有缺点，相对于h5而言，它的缺点有两个：
1、开发成本高，联调，测试和查bug都比较麻烦
2、运营成本高
hybrid的使用场景
1、对产品的体验要求高
2、更新迭代频繁
hybrid是怎么实现的
之前说到hybrid的优点：快速迭代更新和体验流畅，那么hybrid是怎么做到这两点的。也就是以下两个问题：
1、hybrid是怎么更新的？
2、hybrid通过file协议加载h5页面做到体验流畅，那么h5页面是怎么动态获取数据的？
先想下我们更新的目的是什么？
其实就是把APP里面的h5静态页面文件替换掉。
接着再想下有什么好的方式可以做到？
我们的APP已经被安装到客户的手机，APP怎么知道自己要更新呢，这就需要别人来告诉它，这个别人自然就是服务器了。因为APP需要向服务器请求数据，我们可以在APP每次启动时就向服务器发送请求是否需要更新，需要的话就把更新文件下载下来并替换掉旧的文件，这种方式是可行的吧。
那么服务器是怎么知道APP需要更新？
这个可以根据版本号来区分，比如APP当前的版本是1.0，服务器上的是1.2，通过版本的比较就知道是否需要更新了。
版本更新讲完了，接着讲下h5和客户端的通讯
先说下通讯的基本形式
js通过客户端提供的接口，把参数和回调函数传给客户端，客户端执行完后通过回调函数返回数据。
那么它们是如何通讯的，这里就要讲到一个新的协议--schema协议
schema协议是什么？
schema协议是用来规定前端和客户端如何通讯的协议。这样说好像跟没说一样，那么我们就说下schema协议是怎么使用的
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_invoke_scan_callback_' //把iframe的src属性设置为客户端定义的接口
var body = document.body;
body.appendChild(iframe); //执行到这一步就会调用客户端的接口
setTimeout(function(){
body.removeChild(iframe); //执行完后要清除
iframe = null
},0)
是不是很简单，但是每次这么调用也太麻烦了，所以最好是封装成一个接口，方便调用。
//invoke.js
(function (window, undefined) {
// 调用 schema 的封装
function _invoke(action, data, callback) {
// 拼装 schema 协议
var schema = 'myapp://utils/' + action
// 拼接参数
schema += '?a=a'
var key
for (key in data) {
if (data.hasOwnProperty(key)) {
schema += '&' + key + data[key]
}
}
// 处理 callback
var callbackName = ''
if (typeof callback === 'string') {
callbackName = callback
} else {
callbackName = action + Date.now()
window[callbackName] = callback
}
schema += 'callback=callbackName'
// 触发
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = schema // 重要！
var body = document.body
body.appendChild(iframe)
setTimeout(function () {
body.removeChild(iframe)
iframe = null
})
}
// 暴露到全局变量
window.invoke = {
share: function (data, callback) {
_invoke('share', data, callback)
},
scan: function (data, callback) {
_invoke('scan', data, callback)
}
login: function (data, callback) {
_invoke('login', data, callback)
}
}
})(window)
