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

Question

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

Answer 1

界面呈现大体分两种：用html+css绘制页面，运行原理是打包工具创建一个只有一个或多个Activity的安卓应用，这个Activity上就只有一个WebView来显示页面。就相当于那个app实质上只是个浏览器，只能看你写的页面的浏览器；类似RN这种用jsx+类css描述界面，运行原理是打包工具创建一个安卓应用，界面上的控件元素是通过你前面的描述来要求原生层创建对应样式的原生控件。一个很容易区分的方法是，打开手机的设置-开发人员设置-显示布局边界，然后打开你想查看的app，如果整个界面上只有一个大框框，里面的编辑框啦、按钮啦这些元素都没有框，那么就是第一种；如果几乎每个元素都有五颜六色的框框住，且你知道它并不是直接原生开发的，那么就属于第二种。这两种都是用js来编写逻辑，都用到了Bridge这种概念来打通原生(native)和js层的通讯，包括下面这些用途：告诉native要画一个怎样的控件(RN这种的)native告诉js有什么东西被点击了之类的(同样是RN这种的)告诉native需要调用什么native方法（两种都会）

Answer 2

NativeScript我用过，其他听过但是没用过，但我觉的原理应该差不多，简单给你说说ns的原理。如果你使用过ns的话，你会发现其实和开发Angularwebapp基本没什么区别，无非是很多空间组件变成了ns提供的那些。在Angular中有一个叫做platform的概念，大体的架构思想是这样的，就是你在写Component的时候，这实际是一个高度抽象的概念，它已与组件所具体渲染的环境（platform）解耦，同一个Component在不同的platform下的渲染逻辑和编译逻辑不相同，但表现形式相同，举例来说：通常开发web程序，使用的都是platform-browser，它会将组件编译为浏览器识别的css、js、html等文件github上有一些项目提供了platform-canvas，它会将组件编译为在某个canvas元素上渲染的脚本之前我看过一篇文章，文章中实现了platform-momery，大体的功能就是将Angular组件编译为了只在内存中渲染并运行的platform因此，对于ns来说，它就是要实现这么一个platform，算是一座桥，入口端是Angular组件，出口端是不同类型的移动端代码，要了解中间这种转换和编译的过程，需要学习一些编译原理的知识，最起码要明白AST这个概念，这个概念其实在各种js的编译工具中，经常被提起，比如babel、webpack等等。同理的，对于react-native、weex等，肯定内部原理都是这样的，就是要实现这么一座桥，将react或者vue与移动端的代码连接起来。当然，这只是其中的一种实现方案，还有类似使用webview来实现的，这个我接触的不多，就不说了，好像ionic就是这种套路。总之最终的结果就是，只通过js写逻辑，对于渲染逻辑的话，交给库来实现。我觉的要想查阅相关资料，直接学习其中的某个库就好了，或者看看编译原理。如有错误，还望指正。