uniapp interview basics

Advantages and disadvantages of uniapp

advantage:

1. A set of codes can generate multiple
2. The learning cost is low, the syntax is Vue, and the components are small programs
3. Strong ability to expand
4. Use HBuilderX to develop, support vue syntax
5. Breaking through the system's limitation on the native ability of H5 calls

shortcoming:

1. It was born in a short period of time, and many places are not perfect
2. small community
3. The official feedback on the problem is not timely
4. Worse than WeChat applets and iOS on the Android platform
5. File Naming Restricted

Uniapp configuration file, entry file, main component, page management part

pages.json configuration file, global page path configuration, application status bar, navigation bar, title, window background color setting and other
main.js entry files, the main function is to initialize the vue instance, define global components, and use required plug-ins such as vuex, Note that uni-app page routing is managed uniformly by the framework, and developers need to configure the path and page style of each routing page in pages.json. Similar to how applets
configure page routing in app.json. Therefore, the routing usage of uni-app is different from that of Vue Router. If you still want to use Vue Router to
manage routing, you can search for Vue-Router App in the plug-in market.
Vue is the main component of uni-app, and all pages are under App.vue It is the page entry file that is switched. But App.vue itself is not a page, and view elements cannot be written here, that is, there is no.
The functions of this file include: calling application lifecycle functions, configuring global styles, and configuring global storage globalData.
The application lifecycle can only be monitored in App.vue, and is invalid for page monitoring.
The pages page management part is used to store pages or components.
The manifest.json file is the configuration file of the application, which is used to specify the name, icon, permissions, etc. of the application. The project created by HBuilderX has this file in the root directory, and the project created by CLI has this file in the src directory.
package.jsonThe file is used to configure uni-app globally, determine the path of the page file, window style, native navigation bar, native tabbar at the bottom, etc. It is similar to the page management part of app.json in WeChat applet. Note that the application for location permissions and other content that originally belonged to app.json are configured in the manifest in uni-app.

The difference between uni-app and Vue2

1. Changes in components/labels

It used to be an html tag, but now it is an applet tag.

1. div changed to view
2. change span and font to text
3. a changed to navigator
4. img changed to image
5. The input is still there, but the type attribute is changed to confirmtype
6. form, button, checkbox, radio, label, textarea, canvas, video are still there.
7. Select changed to picker
8. iframe changed to web-view
9. ul and li are gone, and they are all replaced by view
10. audio is no longer recommended, changed to api method, background audio api document
11. In fact, old HTML tags can also be used in uni-app, and the uni-app compiler will convert old tags into new tags during compilation, such as compiling divs into views. But this usage is not recommended, it is easy to be confused when debugging the H5 side.

2. Add new components commonly used in mobile phones

1. scroll-view area scrollable view container
2. swiper swipeable area view container
3. icon icon
4. rich-text rich text (cannot execute js, but can render various text formats and pictures)
5. progress progress bar
6. slider slider indicator
7. switch switch selector
8. camera camera
9. live-player live broadcast
10. map map
11. cover-view The view container cover-view that can cover native components needs to be emphasized a few more words, the video, map, canvas, and textarea of ​​the non-h5 side of uni-app are native components, and their hierarchy is higher than other components.
    If you need to cover native components, such as adding a mask on the map, you need to use the cover-view component

3、JS

The api of uni-app refers to the applet, so it is different from the js api of the browser, such as

• alert, confirm changed to uni.showmodel
• ajax axios changed to uni.request
• Cookie and session are gone, local.storage is changed to uni.storage
• Vue-router is gone, changed to uni.navigateTo routing and page jump

There are still many js APIs for uni-app, but they are basically the APIs of small programs, just change wx.request to uni.request. See details

4. Vue, applet, uni-app life cycle connection

** vue：**

1. beforeCreate (before creation) is called before the instance is initialized
2. created (after creation) is called immediately after the instance is created
3. beforeMount (before loading, mount) is called before the mount starts
4. mounted (after loading) is called after the instance is mounted. See (opens new window) for details. Note: It is not sure that all subcomponents are mounted here. If you need to perform operations after subcomponents are fully mounted, you can use $nextTick
5. beforeUpdate (before update) is called when the data is updated, which occurs before the virtual DOM is patched
6. updated (after updating) the virtual DOM is re-rendered and patched due to data changes, after which the hook will be called
7. beforeDestroy (before destruction) is called before the instance is destroyed. At this step, the instance is still fully available
8. destroyed (after destruction) Called after the Vue instance is destroyed. After calling, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed

** Small program/uni-app: **
1. onLoad: Triggered when the page is loaded for the first time, you can get the parameters in the path to open the current page in the parameters of onLoad.
2. onShow: Triggered after loading is completed, the background switches to the foreground or re-enters the page
3. onReady: Triggered when the page is rendered for the first time
4. onHide: Triggered when switching from the foreground to the background or entering another page
5. onUnload: Triggered when the page is unloaded
6. onPullDownRefresh: Listen to the user's pull-down action
7. onReachBottom: The processing function of the page bottoming event
8. onShareAppMessage: The user clicks on the upper right corner to forward

The difference between rpx, px, em, rem, %, vh, vw

rpx	相当于把屏幕宽度分为750份，1份就是1rpx
px	绝对单位，页面按精确像素展示
em	相对单位，相对于它的父节点字体进行计算
rem	相对单位，相对根节点html的字体大小来计算
%	一般来说就是相对于父元素
vh	视窗高度，1vh等于视窗高度的1%
vw	视窗宽度，1vw等于视窗宽度的1%

The difference between the page parameter transfer methods of vue, uni-app, and applets

Vue parameter passing
1. Vue can jump to pass parameters through the label router-link, pass path+path, query+parameters
2. You can also use this.$router.push ({}) in the event to jump to the parameter passing
applet/uniapp pass Parameter Jump parameters are
passed by splicing parameters after the jump path

//示例
// navigate.vue页面接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}