How to load basic information of uniapp

With the rapid development of mobile Internet, more and more developers hope to develop multiple platforms at the same time to improve project coverage and user experience. At this time, Uniapp (full name: Universal Application) came into being. It is a cross-platform development tool based on Vue.js launched by DCloud. It can be written once and published to multiple platforms at the same time.

In Uniapp, data is very important content, and data loading is necessary. For example, we need to load some basic data into the page to display the content of the page, such as user information, product information, etc. So, how to handle the loading of these basic information in Uniapp?

1. Process basic data before page loading

In Uniapp, we can process basic data before page loading. The specific method is to use the uni.showLoading() function in the life cycle function of the page to display the loading animation, and at the same time initiate a data request. After the request is successful, the data is assigned to the data attribute of the page. The sample code is as follows:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

b905a2af58f8b590cd110b59050a5830

The above code is an example of processing basic data before the page is loaded.

2. Use Vuex to manage global data

If global data needs to be used in the project, we need to use Vuex for management. Vuex is the official state management library of Vue.js, which can effectively manage all states in the application, including global data.

In Uniapp, we can create the Vuex store object in the store.js file and submit the methods in mutations through the commit() method to change the state in the state. The sample code is as follows:

// store.js file
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
state: {

userInfo: {} //定义全局数据

},
mutations: {

setUserInfo(state, userInfo) { //设置全局数据的方法
  state.userInfo = userInfo;
}

}
})

export default store;

//Page module file
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState } from 'vuex';

export default {

computed: mapState(['userInfo']), //映射state中的全局数据到页面data属性中
onShow() {
  uni.showLoading({
    title: '正在加载...'
  });
  //发起数据请求
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.$store.commit('setUserInfo', res.data); //通过Vuex改变全局数据
      uni.hideLoading();
    }
  });
}

}
2cacc6d41bbb37262a98f745aa00fbf0

The above code is an example of managing global data through Vuex.

3. Use minix to mix and process data

In Uniapp, we can also use minix for data processing. Mixins are a general solution for sharing code between components. Some commonly used data request processing methods can be extracted and mixed into the page for use to improve code reusability.

The specific method is to define the data request processing method in the minix file, and then introduce it in the page using the mixins attribute. The sample code is as follows:

//userInfoMixin.js file
export default {
data() {

return {
  userInfo: {}
}

},
methods: {

getUserInfo() { //定义数据请求方法
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data;
    }
  });
}

}
}

//Page module file
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import userInfoMixin from './userInfoMixin.js';

export default {

mixins: [userInfoMixin], //在页面中混入minix文件
onShow() {
  uni.showLoading({
    title: '正在加载...'
  });
  this.getUserInfo(); //通过minix文件获取数据
  uni.hideLoading();
}

}
2cacc6d41bbb37262a98f745aa00fbf0

The above code is an example of using minix mixing to process data.

In general, there are many ways to process basic data in Uniapp. It is best to choose the appropriate method according to the actual situation of the project.

The above is the detailed content of How to load basic information of uniapp. For more information, please follow other related articles on the PHP Chinese website!