Uni app Foundation

Directory structure

New interface

 //  After the new page is created, if you are in page.json There is no corresponding interface declaration in   Please be there. pages Inside plus 
		{
    
			"path": "pages/index/index",// The path of the page 
			"style": {
    
				"navigationBarTitleText": " children APP", // Top title 
    			"enablePullDownRefresh": false,// Enable pull-down refresh 
       			"app-plus": {
    
					"titleNView": false // Do not use the system top navigation bar 
				}			
			}
		},

uniApp All in the interface div Have been replaced by view

uniapp Page supported lifecycles

 The screenshot here is only part of    You can check it here 
https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page

created  stay vue Can be supported in   But in uniapp I only support onload

Interface jump

// Similar to an applet 
uni.navigateTo({
    
	url: '/pages/index/index',
	success: res => {
    },
	fail: () => {
    },
	complete: () => {
    }
});
//vue
this.$router.push('/pages/index/index')
//router Jump 
this.$route({
    
	url: 'pages/index/index'
})

Interface value transfer （ Just like a small program ）

uni.navigateTo({
    
	// It can also be in url Intermediate direct value transfer 
	url:'/pages/niceServeDetail/niceServeDetail?id=666',
	// Receive the value from the second interface 
	events: {
    
	    //  Add a listener... For the specified event , Get the data transferred from the opened page to the current page 
	    acceptDataFromOpenedPage: function(data) {
    
	      console.log(data)
	    },
	    someEvent: function(data) {
    
	      console.log(data)
	    }
    },
	success: (res) => {
    
		// Transfer values to the second interface 
		res.eventChannel.emit("title","titleContent")
		// The second interface transfers values to the first interface 
		eventChannel.emit('acceptDataFromOpenedPage', {
    data: 'data from second page'});
  		eventChannel.emit('someEvent', {
    data: 'data from second page for someEvent'});
	}
})
// In the second interface onload In the receiving 
onload(option){
    
	console.log(" Here is url Transmitted value ->",option.id);
	// #ifdef APP-NVUE
	const eventChannel = this.$scope.eventChannel; //  compatible APP-NVUE
	// #endif
	// #ifndef APP-NVUE
	const eventChannel = this.getOpenerEventChannel();
	// #endif
	eventChannel.on("title",(res)=>{
    
	 	console.log(" The value received ->",res);
	})
}

Play the news （ It is surprisingly similar to an applet ）

uni.showToast({
    
	title: 'msg',
	icon:'none',
	mask:false,// Similar to transparent mask effect , Click to penetrate 
});

Using third party dependencies

Follow vue It's the same

// For example, add dependencies  uni-ui
npm i uni-ui -S

Network request

uni.request({
    
	url:"url",
	data:" Request parameters ",
	method:"GET",
	success: (e) => {
    
		//TODO 
	},
	fail: (e) => {
    
		 
	}
})

Pull up to refresh Pull down load

// Pull down data refresh   Need to open  "enablePullDownRefresh": true,
// Drop down listening function 
onPullDownRefresh() {
    
},
// Bottom function   That is, pull up the monitor   stay vue Life cycle function peers in the interface 
onReachBottom() {
    
			
}

Bottom navigation bar settings

vuex Use vuex Official website

stay uniApp Built in vuex We just need to configure it

// stay index In file 
//  Page path ：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue Plug in mechanism of 

//Vuex.Store  Constructor options 
const store = new Vuex.Store({
    
  state:{
    // Storage status 
   "username":"foo",
  	"age":18
  }
})

  export default store

### stay main.js Inject... Into the file

//  Page path ：main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store // Setting global $store object 

//  hold  store  The object is provided to  “store”  Options , This can  store  All the subcomponents are injected with the instance of 
const app = new Vue({
    
    store,
    ...App
})
app.$mount()

Use

this.$store.state.username  // Can get 

vuex Zhongduo module Under the circumstances state obtain

//this.$store.state. The name of the warehouse .prop
this.$store.state.mineStore.isLogin