html5打包成app应用的原理是什么？

Question

在用cordova把vue打包安卓APP，挺好奇这中间的原理的，不知道有哪些文档资料可以查阅，现在有好多这种工具，原理都是一样的吗？比如React-Native,NativeScript,weex这些

Answer 1

界面呈现大体分两种：

1. 用 html + css 绘制页面，运行原理是打包工具创建一个只有一个或多个 Activity 的安卓应用，这个 Activity 上就只有一个 WebView 来显示页面。就相当于那个 app 实质上只是个浏览器，只能看你写的页面的浏览器；

2. 类似 RN 这种用 jsx + 类 css 描述界面，运行原理是打包工具创建一个安卓应用，界面上的控件元素是通过你前面的 描述 来要求原生层创建对应样式的原生控件。

一个很容易区分的方法是，打开手机的设置-开发人员设置-显示布局边界，然后打开你想查看的 app，如果整个界面上只有一个大框框，里面的编辑框啦、按钮啦这些元素都没有框，那么就是第一种；如果几乎每个元素都有五颜六色的框框住，且你知道它并不是直接原生开发的，那么就属于第二种。

这两种都是用 js 来编写逻辑，都用到了 Bridge 这种概念来打通原生 (native) 和 js 层的通讯，包括下面这些用途：

• 告诉 native 要画一个怎样的控件 (RN 这种的)

• native 告诉 js 有什么东西被点击了之类的 (同样是 RN 这种的)

• 告诉 native 需要调用什么 native 方法（两种都会）