1: Create a new uni-app
2: Run through the h5 page, WeChat applet, and your own mobile phone.
Three: Project catalog
pages: store each page component
static: store static resources
unpackage: exist here after packaging
App.vue: root file
main.js: main entry file
manifest.json: some app configuration
pages.json: store page path (style) and global Path (style)
uni.scss: built-in style
Four: understand the style on the official website
Five: configure tabbar (style reference document)
If the application is a multi-tab application, you can specify the performance of the tab bar through the tabBar configuration item, and the corresponding page displayed when the tab is switched. (List has at least two items)
Six: Condition startup mode configuration The
startup mode configuration takes effect only during the development period and is used to simulate the scene of a direct page, such as: after a small program is forwarded, the user clicks on the opened page.
Seven: Components: uni-app provides a wealth of basic components for developers. Developers can combine various components like building blocks to form their own applications. (Rich components, understand the official documents)
text text component
view（=div）
button (rich attributes, refer to official documents)
Media component image
Eight: the style in uni-app
The way to introduce css:
1 directly in the component page
Introduce icon font chart:
1 Introduce folder fonts in static
2 Introduce
@import url("./static/fonts/iconfont.css") in App.vue public style ;
3 Modify the path in the iconfont.css file
Add the original path: ~@/static/fonts/
4 reference in view: iconfont must be
Import scss files:
1 Download scss compilation plugin
2 Tab
Nine: Data binding (similar to Vue99%)
Ten: Life Cycle
Pull-down refresh: onPullDownRefresh (belonging to the life cycle function)
defines the onPullDownRefresh processing function in js (at the same level as onLoad and other life cycle functions), and listens to the user pull-down refresh event of the page.
1 First give pull-down refresh permission in json
2 Monitor pull-down refresh: (action triggered by pull-down refresh)
3 uni.stopPullDownRefresh stop refresh
4 Pull down refresh can be triggered by button
Bottom loading new content: onReachBottom
Can be configured in json, how far from the bottom to trigger the bottom loading function:
Attached
Eleven: network request (get)
Twelve: Data Cache
1 Set click event to trigger uni.setStorage; uni.getStorage; uni.removeStorage to store separately; query; delete data.
2 The browser searches in the Local Storage of the Application; the WeChat applet searches in the Storage.
Thirteen: Upload pictures (refer to official documents)
1 Trigger the uni.chooseImage function to upload an image by clicking the event
2 this.imgArr = res.tempFilePaths assign the image address to the image array
3 v-for loop to render the image
preview picture
Fourteen: conditionally compiled cross-terminal compatible
html content:
Cross-terminal compatibility of js content:
Cross-terminal compatibility of css content:
Fifteen: Navigation Jump in Uni
Declarative Navigation
Programmatic navigation
Navigation parameters:
directly after the address (?id=80&page=1). The web page that accepts the parameters receives the parameters in the onload.
Attachment: open-type attribute: the way to jump to the page (declarative jump)
Sixteen: The creation of components in uni-app (same as vue)
The life cycle functions of components are the same as vue
1 beforeCreate
2 create
3 beforeMount
4 mount
5 beforeUpdate
6 update
7 beforeDestroy
8 destroy
Seventeen: Communication of uni-app components The
parent passes values to the child:
1 The child component binds data in the parent component
2 The child component receives the data of the parent component through props:[''}
The child passes the value to the parent component:
1 The child component calls the method through the click event:
2 In the method this.$emit('myEven', this.num): trigger the myEven of the parent component and pass data
3 The parent component receives data:
Value passing between sibling components
a ----> b
1 a component triggers events globally and passes parameters through uni.$emit
2 The b component listens globally through uni.$on and receives parameters (in the created() method)
Eighteen: uni ui extension components
1 download
2 import
3 register
4 call method (just copy the code and paste)
