hybrid小了解

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>