Learning notes uni app

Environmental preparation

• install HBuilderX
• Installing a plug-in
  • Built in browser
  • Built-in terminal
  • app Real machine operation
  • prettier
  • scss/sass compile

Project structures,

• div h1 The labels are web label , Unable to automatically convert non applet ,app
• Official compatibility labels must be used view text
• label
  • view
  • text
  • navigator
    • Page Jump
    • url
  • button

button

<button type="default" @click="goDetail"> Details page </button>

methods: {
    
    goDetail() {
    
        //  Page Jump 
    	uni.navigateTo({
    
    		url: '../detail/detail',
    		success: res => {
    },
    		fail: () => {
    },
    		complete: () => {
    }
    	});
    }
}

url Parameter passing

//  Defining parameters 
data(){
    
    return {
    
        name:'xx',
        age:30
    }
}

• navigator Parameter passing

<navigator :url="`../detail/detail?name=${name}&age=${age}`"> Details page </navigator>

• uni.navigateTo Parameter passing

uni.navigateTo({
    
	url: `../detail/detail?name=${
      this.name}&age=${
      this.age}`,
});

• obtain url Parameters

data(){
    
  return {
    
      name:'',
      age:''
  }  
},
onLoad(e){
    
    console.log(e)
    const {
    age,name} = e;
    this.age = age
    this.name = name
}

pages.json

• tabBar

"tabBar": {
    
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
    
			"pagePath": "pages/index/index",
			"iconPath": "static/wx.png",
			"selectedIconPath": "static/wx_hl.png",
			"text": " home page "
		},
		{
    
			"pagePath": "pages/my/my",
			"iconPath": "static/my.png",
			"selectedIconPath": "static/my_hl.png",
			"text": " my "
		}]
	}

• pages.style.enablePullDownRefresh
  • Allow to refresh

manifest.json

• h5
  • Setting agent

"h5":{
    "devServer":{
        "proxy":{
            "/xxx":{
                "target":"https://xxx/xxx",
                "changeOrgin":true;
                "secure":true,
                "pathRewrite":{
                    "^/xxx":""
                }
            }
        }
    }
}

components

• easycom Mechanism
• Components must be placed in the change folder

Life cycle

• Application life cycle
  • App.vue
    • onLaunch
    • onShow
    • onHide
• Page lifecycle
  • onLoad
  • onShow
  • onHide
  • onReachBottom
    • Pull up and touch the bottom
  • onPullDownRefresh
    • Come down and refresh
• Component lifecycle
  • vue relevant
    • mounted

Components

uni_ui

• uni-badge
  • Digital angle sign

<uni-badge size="small" :text="100" absolute="rightTop" type="primary">
	<button type="default"> The lower right </button>
</uni-badge>

• uni-card
  • card

<uni-card title=" Basic card " :isFull="true" sub-title=" Subtitle " extra=" Additional information ">
	<text> This is a bulletin card  , There is no outer margin , The left and right will fit the parent element .</text>
</uni-card>

• uni-dateformat

  • date

• uni-collapse

  • uni-collapse-item
  • Fold panel

• uni-notice-bar

  • Notice board

• uni-list

  • uni-list-item
  • List components

• uni-load-more

  • Load more
  • onReachBottom
    • Monitoring page bottoms out

• uni-rate

  • score

• uni-steps

  • Step bar

• uni-popup

  • Pop-up layer
  • open()
  • close()

• uni-grid

  • GongGe

• uni-swiper-dot

  • swiper
    • swiper-item
  • Shuffling figure

• scroll-view

  • Scroll bar

• uni-search-bar

  • Search bar

• uni-index-list

  • Index list

• uni-goods-nav

  • Commodity navigation

Network request

• uni.request

uni.request({
    
    url:'',
    method:'GET',
    data:{
    },
    success:res=>{
    
        //  Called on success 
        console.log(res)
    },
    fail:()=>{
    
        //  Call... On failure 
    },
    complete:()={
    
        //  Whether it succeeds or fails, it will call 
    }
})

Conditional compilation

• idndef
• iddef

//  If not h5, Compile the url
#idndef H5
url:"https://xxx/xxx"
#endif
//  If it is h5, Compile the url
#ifdef 
url:'/xx/xx'
#endif