Vernacular uni-app
https://uniapp.dcloud.net.cn/vernacular.html#
Main content extraction:
uni-app converts some html tags into some tags that conform to mobile naming, and adds some mobile-specific tags
div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image
...
scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本
In uni-appeach end, except for the h5 end, the js of other ends runs under an independent v8engine, not in the browser, so the objects of the browser cannot be used
Automatically update rendering
In traditional webpages document.getElementByIdand traditional Androiddevelopment findviewbyid, elements are obtained, and element attributes are manipulated to update the interface display, but now to separate this operation, the
current method is the binding mode of vue, and bind a js to this dom element Variables, scriptmodifying the value of js variables in , domwill automatically change, and the page will automatically update and render. It is also the data change that drives the page display rendering. flutterThis is also the idea of separation.
vueis automatic two-way data binding. Modify the data directly through assignment. If the data is bound to the interface, the interface will automatically update the rendering.
Unit
px cannot dynamically adapt to screens of different widths, and rem cannot be used for nvue/weex. If you want to use a unit that adapts to the screen width, it is recommended to use rpx, which is fully supported.
engineering structure
Every displayable page must be registered in pages.json. If you have developed a small program, then pages.json is similar to app.json. If you are familiar with vue, there is no vue route here, it is all managed in pages.json.
The home page of the original project is usually index.html or default.html, which is configured in the web server. The homepage of uni-app is configured in pages.json, and the first page under the page node is the homepage. Generally in the /pages/xx directory.
In apps and applets, in order to improve the experience, the page provides a native navigation bar and bottom tabbar. Note that these configurations are done in pages.json, not in the vue page, but the click event is monitored on the displayed vue page in doing.
If you are familiar with small program development, the comparison changes are as follows:
- It turns out that app.json was split into two. Page management, moved into pages.json of uni-app; non-page management, moved into manifest.json
- The original app.js and app.wxss were merged into app.vue
Multi-terminal comparison
flutter, rn, uni-app comparison
Viewpoint summary: pure typesetting flutter, native multi-use native, good at react use rn, others use uni-app