Foreword: I have been using uni-app for a while, and I have been in the stage of corresponding search when needed. Recently, I want to improve the efficiency of code development, and I am going to sort out and reconstruct the knowledge system in my head.
About versions and frameworks
Currently uView does not support VUE3.0 version (nvue does not yet support VUE3.0)
How to check uview2 version?
View after adding in the code
console.log(uni.$u.config.v)How to upgrade uview2?
Version upgrade · uView-UI v2.x common problem sorting · Kancloud (kancloud.cn)
npm update uview-ui uni-app project file directory
Some changes to note when using uniapp
Component/Label Changes
It used to be html tags, for example <div>, and now it is applet components, for example <view>. So what's the difference between 标签and 组件, isn't it all surrounded by angle brackets for a paragraph of English? In fact, tags are an old concept, and tags are built-in things in browsers. But components are free to expand. Similar to how you can encapsulate a piece of js into a function or module, you can also encapsulate a ui control into a component.
uni-appRefer to the applet specification and provide a batch of built-in components.
The following is the mapping table of html tags and uni-app built-in components:
- div changed to view(opens new window)
- Change span and font to text(opens new window)
- change a to navigator(opens new window)
- change img to image(opens new window)
- input (opens new window) is just an input box. In the original html specification, input is not only an input box, but also radio, checkbox, time, date, and file selection functions. In uni-app and applet specifications, input is just an input box. Other functions uni-app has separate components or API: radio component (opens new window) , checkbox component (opens new window) , time selection (opens new window) , date selection (opens new window) , picture selection (opens new window ) , video selection (opens new window) , multimedia file selection (including pictures and videos) (opens new window) , general file selection (opens new window) .
- form (opens new window)、button (opens new window)、label (opens new window)、textarea (opens new window)、canvas (opens new window)、video (opens new window)这些还在。
- change select to picker(opens new window)
- iframe changed to web-view(opens new window)
- The ul and li are gone, and they are all replaced by view. To make a list, generally use the uList component(opens new window)
- audio is no longer recommended, and changed to api mode, background audio api document (opens new window) In fact, the old HTML tags can also be used in uni-app, and the uni-app compiler will convert the old tags to new tags when compiling , such as compiling div into view. But this usage is not recommended, it is easy to be confused when debugging the H5 side.
In addition to the changes, a batch of new components commonly used in mobile phones have been added
-
scroll-view area scrollable view container(opens new window)
-
iconIcon (opens new window)
-
rich-text rich text (cannot execute js, but can render various text formats and pictures)(opens new window)
-
progress progress bar(opens new window)
-
switch switch selector(opens new window)
-
camera camera(opens new window)
-
live-player live(opens new window)
-
mapMap (opens new window)
-
cover-view can cover the view container of the native component(opens new window)
cover-view needs to emphasize a few more words, the video, map, canvas, and textarea of the non-h5 side of uni-app are native components, and their level is higher than other components. To cover native components, you need to use the cover-view component. See Level Introduction(opens new window) for details
In addition to built-in components, there are also many open source extension components that encapsulate common operations. DCloud has established a plug-in market to collect these extension components. For details, see Plug-in Market
-
js api changes
Because the api of uni-app refers to the applet, it is different from the js api of the browser, such as
- alert, confirm changed to uni.showmodel(opens new window)
- ajax changed to uni.request(opens new window)
- Cookie and session are gone, local.storage is changed to uni.storage
Notes on layout and style in uniapp
Layout: Flex Layout Flex Layout Tutorial: Grammar - Ruan Yifeng's Weblog (ruanyifeng.com)
Container properties:
The flex-flow attribute is a shorthand for the flex-direction attribute and the flex-wrap attribute, and the default value is row nowrap.
The align-content attribute defines the alignment of multiple axes. This property has no effect if the item has only one axis. Project properties:
The flex property is a shorthand for flex-grow, flex-shrink and flex-basis, and the default value is 0 1 auto.
This property has two shortcut values:
auto (1 1 auto) , fill up the remaining space, and shrink when the space is insufficient
none (0 0 auto), do not shrink when there is insufficient space, shrink other items on the same axis
uniapp, vh and vw are available. When you need to make an element height cover the entire screen , you can set the height to100vh。
In general, it is recommended to use rpxunits for font, width and height, etc. If you need to fix the size, use it px.
Adaptation of uView's top and bottom safe areas
// 使用特定组件占位，它会自动判断机型，给元素加上一个适当底部内边距
<u-status-bar></u-status-bar> // 顶部安全区适配
<u-safe-bottom></u-safe-bottom> // 底部安全区适配In uView, some components, such as u-popup and u-keyboard components, provide a safeAreaInsetBottom parameter (Boolean type). If it is set to true, the safe area will be adapted inside the component, so as to avoid the safety area indicator bar from causing The problem.
The width of uView u-tag and u-button components is affected by special effect styles
Solution: Add a view container to the outside of the components u-tag and u-button to set the width style, or add a width: fit-content; attribute to the outer frame for self-adaptation.