hybrid简单了解

技术点总有它的来由。

文章概要：

• 1.hybrid 基本概念
• 2.前端和客户端的交互
• 3.前端和客户端的交互实现
• 4.前端交互实现关注点
• 5.小结

1.hybrid 基本概念

⑴.什么是hybrid？

hybrid即“混合”，前端和客户端的混合开发模式，某些环节也可能涉及到 server 端。 hybrid 底层依赖于Native提供的容器（WebView），上层使用html&css&JS做业务开发。

⑵.webview是什么？

app中的一个组件，类似于小型浏览器内核。native提供的容器盒子，用于加载h5页面。

图中表示了两种h5页面资源运用的方式

   ①以静态资源打包到app内的方式。

    前端将代码提供给native，native客户端拿到前端静态页面，以文件形式存储在 app 中。这种模式，如果前端静态页面需要更新，客户端就需要去server端下载静态资源，即客户端每次打开需要去线上检查有无更新包有就下载压缩包，解压更新静态资源。

　优点：因为资源在本地，通过file 协议读取，读取速度非常快，且可以做到断网模式下页面合理的展示。

• 这样就涉及到了一个server端静态资源包管理系统。
• 同时H5的资源是静态的存储在native本地，以file的方式读取，那么H5向远端发起的请求就存在跨域，所以H5的请求需要经过native做一层代理转发。
• 静态资源越多native包就越大（所以这种模式更适用于，产品功能稳定，体验要求又高，且迭代频繁的场景）。

   ②以线上url方式（更偏H5）

　将资源部署在线上，native打开一个新的webview请求线上资源展示（同在浏览器中输入url,查看页面过程一致）

　优点：按需加载，用户使用到的页面才会更新，发请求可以不经过native做代理。

• 不可避免请求线上资源，都需要时间，所以会出现瞬间白屏（弱网模式特别明显）。
• 断网模式下没有内容显示。

　③两种模式资源加载

　本地读取：

    aaarticlea/png;base64,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" alt="" />

    线上读取：

    aaarticlea/png;base64,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" alt="" />

(3).hybrid存在的意义？

可以快速迭代开发更新。（无需app审核，哈哈因为对手机的操作权限不高？，相对于app）

hybrid开发效率高,低成本,跨平台,ios和安卓共用一套h5代码。(ios和安卓接口一致)

hybrid从业务开发上讲，没有版本问题，有BUG能及时修复（相对于app）。

2.前端和客户端的通讯

native提供的容器盒子，用于加载h5页面，那么h5的页面要怎么跟native交互？

前端和客户端的交互大概描述：

• JS访问客户端的能力，传递参数和回调函数。
• 客户端通过回调函数返回内容。

前端的页面跟native交互，是通过schema协议。（事实上Native能捕捉webview发出的一切请求，这个协议的意义在于可以在浏览器中直接打开APP）

⑴.什么是schema协议？

大概描述 ：scheme是一种页面内跳转协议，通过定义自己的scheme协议，native 拦截这个请求，可以非常方便跳转app中的各个页面。

通过执行以下操作支持自定义URL方案：

• 定义应用程序schema URL的格式。
• 注册应用程序schema URL方案，以便系统将适当的URL定向到应用程序。
• 应用程序处理收到的网址URL。

一些URL Scheme 

https://www.zhihu.com/question/19907735

截取一端代码，代码来源：https://github.com/tcoulter/jockeyJS/blob/master/JockeyJS/JS/jockey.JS

// 这段代码主要功能是前端通过一个特殊的协议给客户端发消息，客户端拦截请求然后处理
dispatchMessage: function(type, envelope) {
    // We send the message by navigating the browser to a special URL.
    // The iOS library will catch the navigation, prevent the UIWebView
    // from continuing, and use the data in the URL to execute code
    // within the iOS app.

    var src = "jockey://" + type + "/" + envelope.id + "?" + encodeURIComponent(JSON.stringify(envelope));
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", src);
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
}

⑵.具体H5与Native通信，JS to native？

JS与Native通信一般都是创建这类URL被Native捕获处理。

⑶.native到h5页面,native to JS？

native提供的容器盒子那么native，可否调用它提供的webview中window对象的方法了？

native 可以 调用之前跟前端约定好的挂载在window对象上面的方法。（具体实现了？）

（图片来源点击）

/ Send an event to JavaScript, passing a payload.
// payload can be an NSDictionary or NSArray, or anything that is serializable to JSON.
// It can be nil.
[Jockey send:@"event-name" withPayload:payload toWebView:webView];

// If you want to send an event and also execute code within the iOS app when all
// JavaScript listeners have finished processing.
[Jockey send:@"event-name" withPayload:payload toWebView:webView perform:^{
  // Respond to callback.
}];

3.前端和客户端的交互实现

前端与Native两种交互形式：

① URL Schema（前端先定义对象，以及交互方法）

② 客户端定义对象，注入全局变量（Android本身就支持类似的实现,所以此处讨论ios的JavaScriptCore ）

JavaScriptCore是一个C++实现的开源项目。使用Apple提供的JavaScriptCore框架，可以在Objective-C或者基于C的程序中执行Javascript代码，也可以向JavaScript环境中插入一些自定义的对象。JavaScriptCore从iOS 7.0之后可以直接使用，资料：https://developer.apple.com/documentation/javascriptcore。

⑴.URL Schema（前端先定义对象，以及交互方法）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>Document</title>
</head>
<body>
    <button id="btn1">扫一扫</button>
    <script type="text/javascript">
        function send(type, payload,callback) {
            var envelope = {
                id: id,
                type: type,
                host: host,
                payload: payload
            };
            window.myapp.[envelop.id] = callback;
            var src = "myapp://"+envelope.id + "?" + encodeURIComponent(JSON.stringify(envelop));
            //告诉客户端此时调用的函数， 函数执行完成后，告诉h5执行window.myapp.[envelop.id]这个函数。
　　　　　　　// host 加入使得客户端更容易控制是否响应和处理（毕竟app内可能有需求内嵌第三方页面）
            var iframe = document.createElement("iframe");
            iframe.setAttribute("src", src);
            document.documentElement.appendChild(iframe);
            iframe.parentNode.removeChild(iframe);
            iframe = null;
        }

        document.getElementById('btn1').addEventListener('click', function () {
            send("scan", {}, (payload) => {
                console.log("hi")
            })
        })
    </script>
</body>
</html>

通常代码实现会把send函数部分进行封装，前端只需要实现与native约定的功能函数。

getPort: function() {
    window.send("getPort", {}, (payload) => {

    });
},
login: function(args = {}) {
    window.send("login", args, (payload) => {

    });
},

⑵.客户端定义对象，注入全局变量（客户端注入全局变量，供h5使用）

// 页面调用了未声明方法，事实上是Native注入给window对象的。（native在本地实现了js方法并注入h5）
// 在页面加载完成前注入全局变量myapp，myapp下面的方法，即app提供的API方法
myapp.getPort(data, (payload) => {

});
myapp.login(data, (payload) => {

});

两种方式的区别，由客户端还是由h5预先定义对象，以及交互方法 。

4.前端交互实现关注点

代码来源：https://github.com/tcoulter/jockeyJS/blob/master/JockeyJS/JS/jockey.JS（以下代码例子，以URL Schema方式为基础）

⑴.导航栏的设置

导航栏通常是native实现，有回按钮退防止页面假死，即页面卡死可以回退。

同时native需要提供API供h5进行简单的定制（比如有的需要关闭按钮，分享按钮，收藏按钮等）

setBarBack() {
    Jockey.send("setBarBack", {
        "bar": {
            "position": "left",
            "cliekEvent": "onBack",
        }
    });　
    // 取消监听onBack事件
    Jockey.off('onBack');
    // 监听onBack事件
    Jockey.on('onBack', () => {
        history.back()
    });
},

⑵.跳转是Hybrid必用API之一，对前端来说有以下跳转：

① H5跳转Native界面

② H5新开Webview跳转H5页面。

用native的方法来跳转，一般是为了做页面的动画切换。

如图我们通常只会使用到导航栏下面部分，但我们关注页面的导航栏，H5端可以注册事件监听native的导航栏的事件（非必须）

⑶.获取基本信息

在具备用户体系的模式下，H5页面能从native拿到基本的登录信息，Native本身就保存了用户信息，提供接口给h5使用。

function getInfo() {
    return new Promise((resolve, reject) => {
        Jockey.send("getInfo", {}, (payload) => {

        });
    });
},

⑷.调用native原生具备的功能

相机，手机页面横屏显示或者竖屏显示等。

⑸.关于调试

Android：输入chrome://inspect/#devices即可（前提native打开了调试模式），当然Android也可以使用模拟器，但与Android的真机表现过于不一样，还是建议使用真机测试。

iOS:需一台Mac机，然后打开safari，在偏好设置中将开发模式打开，然后点击打开safari浏览器，查看菜单栏开发菜单（前提native打开了调试模式）...

5.小结

文章只是一个对hybrid的简单了解，文中例子比较粗糙，理解不准确之处，还请教正。对于有兴趣深入了解Hybrid技术的设计与实现前端部分细节的可以看看参考资料~~

参考资料：

http://www.cnblogs.com/yexiaochai/p/4921635.html

http://www.cnblogs.com/yexiaochai/p/5524783.html

http://www.cnblogs.com/yexiaochai/p/5813248.html