hybrid学习笔记

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)

最后把封装好的invoke.js内置到客户端，客户端每次启动webview，默认执行invoke.js，这样h5就能跟客户端通讯了。