- js layer This layer provides various components for developers and some tool libraries (event distribution, etc.).
- The C++ layer mainly deals with the communication between java/OC and js (JSBridge) and the execution of Java (JS script engine).
- Native layer (Object C/Java layer) mainly includes UI renderer, network communication and other tool libraries. There are different implementations according to different operating systems.
Based on the react framework (virtual dom)
- First, the Js layer builds Component through Virtual Dom written by jsx
- The Native layer converts it into a real DOM and inserts it into the page of the native App.
- When there is a change, the difference object is generated through the diff algorithm
- Finally, the Native layer applies the difference object to the page elements of the native App.
Realize the interaction between js and java/oc based on JSCore
- Parse JSX code into java code
- Read the JS file and execute it using the JS script engine
- Return an array, the OC/Java object will be described in the array, the properties of the object and the method to be executed will be described, so that the object can set the properties and call the method.
Pros and cons
- Native rendering->native experience
- React facilitates front-end development
- Hybrid technology cross-platform development, cost and difficulty are lower than native
- Hot update for easy iteration
- The supported styles are a subset of CSS, which will not meet the growing needs of web developers;
- There are still some instability problems under existing capabilities, such as performance and bugs.
- All rendering work is handed over to the client for native rendering, which will have a closer to the native experience, but in fact, some simple interface elements are completely capable of rendering using Web technology.
The underlying framework of the applet
Dual thread architecture
- The rendering layer uses WebView to render WXML+WXSS
- The logic layer uses JsCore to execute js scripts
- Webview thread isolation, one webview thread per interface
- Thread communication via WeChat native
- Logical layer network requests are forwarded via WeChat native
- UI rendering and Java script execution are in two threads separately, so as to avoid some logical tasks from preempting UI rendering resources.
- In order to solve management and security issues, a sandbox environment is provided to run the developer’s Java code (logic layer), thereby preventing developers from using open interfaces provided by some browsers, such as jumping pages, operating DOM, and dynamically executing scripts. .
- The separation of the rendering layer and the logic layer also provides the possibility to run in different environments (small programs and small program developer tools)
1. In the rendering layer, the host environment will convert WXML into JS objects first, and then render the real Dom tree.
2. When data changes occur in the logic layer, the data needs to be transferred from the logic layer to the rendering layer through the setData method provided by the host environment
3. Compare the differences before and after, apply the differences to the original Dom tree, and render the correct UI interface
Exparser component framework + native components
When native components are rendered
1. The rendering layer webview creates components, inserts them into the DOM tree and calculates the layout (position and width and height)
2. Notify Native through the communication mechanism, and Native will insert a native area according to the layout and render
3. When webview knows that the position or width and height have changed, notify Native to make corresponding adjustments
View layer <-> client (most native components involved)
- iOS uses WKWebView to provide messageHandlers features
- Android is to inject a native method into the window object of WebView, which will eventually be encapsulated into a compatibility layer such as WeiXinJSBridge
Logical layer <-> client
- On the Android side, it is consistent with the rendering layer
- In the developer tools, the logic layer actually uses a hidden label to simulate JSCore. And through local variableization of BOM objects that are not supported in JSCore, developers cannot use BOM normally in the applet code, thereby avoiding unnecessary errors
- The bottom layer of the developer tool maintains a WebSocket server, which is used to establish a reliable message communication link between WebView and the developer tool, so that interface calls, event notifications, and data exchange can proceed normally, so that the applet simulator becomes a unified Overall
Pros and cons
Advantages: separation of rendering layer and logic layer -> fast rendering and fast loading
Disadvantages: thread communication delay, setData has no diff operation, frequent operations will have obvious performance problems
- Have the advantages of hybrid technology
- Close to the original experience
- Cross-platform development
- Use Web-related technology framework to write business code
- Each has implemented a cross-language communication solution to complete the communication between Native (Java/Objective-c/…) and Java (the rendering layer and the logic layer in the applet)