hybrid学习

本文旨在介绍几种hybrid解决方案的渲染区别, 对hybrid学习做粗略学习,便于以后技术选型时能清楚各自的优劣,对其原理做大概了解.
参考学习:
https://juejin.im/post/5b4ff3bee51d4519721b9986
https://zhuanlan.zhihu.com/p/41502551
http://vczero.github.io/react_native/H5-React-Native-Native.html
https://juejin.im/entry/58842a4a128fe10068336681
http://yanni4night.github.io/NWBridge/
https://75team.com/post/ios-webview-and-js.html

hybrid定义

Hybrid App，俗称混合应用，即混合了 Native技术与 Web技术进行开发的移动应用。其实是在原生的 App 中，使用 WebView 作为容器直接承载 Web页面。因此，最核心的点就是 Native端与 H5端之间的双向通讯层.

三种Hybrid混合方案分析

现在比较流行的混合方案主要有三种，主要是在UI渲染机制上的不同：

image.png

接下来我们针对第一种方案做稍微详细一点点的了解...

基于 WebView 的机制和开放的 API的三种方案

image.png

App中 H5 的接入方式

将 H5 接入 App 中通常有两种方式：

image.png

使用内置包H5方法的流程：

H5: 每个代码包都有一个唯一且递增的版本号；
Native: 提供包下载且解压到对应目录的服务，前端可以由下面这个协议来调用该功能
服务端: 提供一个接口，可以获取线上最新代码包的版本号和下载地址。

1、前端更新代码打包后按版本号上传至指定的服务器上；
2、每次打开页面时，H5请求接口获取线上最新代码包版本号，并与本地包进行版本号比对，当线上的版本号大于本地包版本号时，发起包下载协议：
3、客户端接受到协议后，直接去线上地址下载最新的代码包，并解压替换到当前目录文件。
拥有这样的机制后，H5在开发后，就可以直接打包将包上传到对应的服务器上，这样在 App 中打开页面后，即可以实时的热更新。

总结

在搜资料的时候看到一段话,觉得很有道理,就摘抄了下来.希望作者不要介意,已经忘了是哪篇文章了抱歉了>_<

如果你了解这些东西的本质其实就很清楚了。动态或者脚本语言要跟本地语言互通要具备如下几点：
1.本地语言有一个runtime机制来对对象的方法调用进行动态解析。
2.本地语言一定有一个脚本的解析引擎
3.建立一个脚本语言到本地语言的映射表，KEY是脚本语言认识的符号，VALUE是本地语言认识的符号。通过这个映射表来构建从脚本到本地的调用。

最后编辑于：2019.04.16 21:46:14