What is the principle of packaging html5 into app applications?

using cordova to package vue Android APP, is curious about this intermediate principle. I don"t know what documents are available to consult. Now there are many such tools, is the principle the same? For example, React-Native , NativeScript , weex these

Html5
Mar.19,2022

NativeScript I have used it, others have heard of it but have not used it, but I think the principle should be similar. Let me tell you briefly the principle of ns .

if you have used ns , you will find that it is basically the same as developing Angular web app, except that many spatial components become those provided by ns . There is a concept called platform in Angular. The general architectural idea is that when you write Component, it is actually a highly abstract concept, which has been decoupled from the environment (platform) rendered by the component. The rendering logic and compilation logic of the same Component under different platform are different, but in the same form, for example:

  • usually web programs are developed using platform-browser, which compiles the components into css, js, html and other files recognized by the browser
  • there are projects on github that provide platform-canvas, which compiles the component into a script rendered on a canvas element
  • I read an article before, in which the general function of platform-momery, is to compile Angular components into platform that renders and runs only in memory

therefore, for ns , it is to achieve such a platform, as a bridge, the entrance is Angular components, and the exit is different types of mobile code. To understand the intermediate conversion and compilation process, you need to learn some knowledge of compilation principles, or at least understand the concept of AST. In fact, this concept is often mentioned in various js compilation tools, such as babel, webpack, and so on. By the same token, for react-native, weex, etc., the internal principle must be like this, which is to implement such a bridge to connect react or vue with the code on the mobile side.

of course, this is only one of the implementation solutions, and there is something similar to using webview. I don't have much contact with this, so I won't talk about it. It seems that ionic is such a routine. In short, the end result is to write logic only through js, and for rendering logic, give it to the library to achieve.

I think if you want to see the relevant information, just learn one of the libraries directly, or look at the compilation principle. If there are any mistakes, please correct them.

there are generally two types of interface presentation:

  1. draw a page with html + css . The principle is that the packaging tool creates an Android application with only one or more Activity , and there is only one WebView on this Activity . It is equivalent to that app is essentially a browser that can only see the pages you write;
  2. is similar to RN , which uses the jsx + class css to describe the interface, which works by packaging the tool to create an Android application, and the control elements on the interface require the native layer to create native controls of the corresponding style through your previous description .

an easy way to distinguish is to open the phone's settings-developer settings-display the layout boundary, and then open the app, you want to view. If there is only one big box in the whole interface, and there are no boxes for editing boxes and buttons, then it is the first one. If almost every element is framed in a variety of colors, and you know that it is not directly developed natively, then it belongs to the second category.

both use js to write logic, and both use the concept of Bridge to communicate between the native ( native ) and js layers, including the following uses:

  • tells native what kind of control to draw ( RN like this)
  • native tells js that something has been clicked or something (also RN )
  • tell native what native method to call (both)

Previous: Whether xss sensitive characters are escaped before they are inserted into the database or when they are read from the database.

Next: In the chrome devtool (browser console), what does the value of double brackets [[]] mean and how do I get it?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32427-2be0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32427-2be0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?