Article Directory
foreword
This article is mainly to learn the theoretical knowledge of the implementation of the small program framework and some things used at the bottom layer, but not to go deep into every technical principle, which can be used for interviews, or to understand what the bottom layer of the small program is implemented with. can be used as a reference. There will also be some small programs how to optimize things.
1. Host
host environment
1. The WeChat applet is opened from the WeChat app, so we say that the host environment of the applet is the WeChat app.
2. How much power the mini-program can achieve depends on how much functionality the WeChat app provides to the mini-program.
Two, run
1. Before opening the Mini Program, the WeChat app will download the code package of the entire Mini Program to the local.
2. Operating environment
The running environment of the applet is divided into 渲染层and 逻辑层
① WXMLtemplate and WXSSstyle work in the rendering layer (to put it bluntly, it is similar to html and css, basically the same)
② JSscript work in the logic layer
1. Concrete implementation:
1. Rendering layer:
webViewRender using
2. Logic layer:
Use jsCorethreads to run js scripts ( jsCorethat is, one that runs js scripts)
3. Platform differences
Because different devices such as ios and Android are different, there will be differences in js support. So we can use es6+ to develop small programs, but in the end we still need to compile them into es5 to enhance compatibility.
4. Operating mechanism
1. There are two types of applet startup, one is cold startup (the background is cleared and destroyed), and the other is hot startup (the background is not cleared, but the application is switched)
2. Running state
① Suspended state, that is, the applet is switched to the background. Currently, the official statement is that the js thread of the applet will stop after 5 seconds.
(The problem encountered: I wrote a countdown with a timer, but when the user switches to the background, the countdown is over, so the time will cause inaccuracy, so I need to use new Date to calculate the remaining time of the countdown, which is actually still inaccurate .)
② If the applet takes a long time, the background applet will be destroyed. The official said it is currently 30 minutes.
2. Small program optimization
1. Start-up optimization
Start-up link: the user opens the applet as the starting point, and ends when the user sees the homepage of the applet.
Optimization methods: package size optimization, code injection optimization, first screen rendering optimization
① Use subpackages, try to put only the necessary pages for startup in the main package, and place other functional pages in subpackages, and public components are not necessary, if you put them in public components In the package, it will also occupy the main package code volume. Advantages of subcontracting: reduce volume and reduce initial loading.
②Static resources, such as pictures, audio, video, and fonts, should be placed on the server as much as possible, and remember to compress them.
③ There is also removal of unnecessary dependencies.
④ Avoid synchronous execution methods during startup, and avoid complex calculation logic in life cycle functions.
⑤In the page, what I want to say is that try not to put data that has nothing to do with the rendering view in the data
⑥Data caching, do not use storge for global data sharing, but some data that can improve the startup speed and load the page can use the cache , which can improve user experience to a certain extent.
Summarize
Of course, if you want to be compatible with multi-terminal operation at one time, you should use uniapp for better compatibility. But if you want to have more extended functions, you can look at the official documentation of the WeChat applet.
So much first. . .