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

html5 xue8 1年前 110次浏览


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




回答:


NativeScript 我用过,其他听过但是没用过,但我觉的原理应该差不多,简单给你说说 ns 的原理。


如果你使用过 ns 的话,你会发现其实和开发 Angular web app 基本没什么区别,无非是很多空间组件变成了 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 写逻辑,对于渲染逻辑的话,交给库来实现。


我觉的要想查阅相关资料,直接学习其中的某个库就好了,或者看看编译原理。如有错误,还望指正。



回答:


界面呈现大体分两种:



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

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


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


这两种都是用 js 来编写逻辑,都用到了 Bridge 这种概念来打通原生 (native) 和 js 层的通讯。包括绘制界面的时候也需要这个 Bridge 告诉原生层要如何显示界面。



0条回复
撰写答案