Bagaimana untuk memuatkan maklumat asas uniapp

Dengan perkembangan pesat Internet mudah alih, semakin ramai pembangun berharap untuk membangunkan berbilang platform pada masa yang sama untuk meningkatkan liputan projek dan pengalaman pengguna. Pada masa ini, Uniapp (nama penuh: Aplikasi Universal) wujud. Ia adalah alat pembangunan merentas platform berdasarkan Vue.js yang dilancarkan oleh DCloud Ia boleh ditulis sekali dan diterbitkan ke berbilang platform pada masa yang sama.

Dalam Uniapp, data ialah kandungan yang sangat penting dan pemuatan data diperlukan. Sebagai contoh, kita perlu memuatkan beberapa data asas ke dalam halaman untuk memaparkan kandungan halaman, seperti maklumat pengguna, maklumat produk, dsb. Jadi, bagaimana untuk mengendalikan pemuatan maklumat asas ini dalam Uniapp?

1. Proses data asas sebelum memuatkan halaman

Dalam Uniapp, kami boleh memproses data asas sebelum memuatkan halaman. Kaedah khusus ialah menggunakan fungsi uni.showLoading() dalam fungsi kitaran hayat halaman untuk memaparkan animasi pemuatan, dan pada masa yang sama memulakan permintaan data Selepas permintaan berjaya, data diberikan kepada data atribut halaman. Kod sampel adalah seperti berikut:

eksport lalai {

data() {
  return {
    userInfo: {}
  }
},
onShow() { //页面显示时触发
  uni.showLoading({ //显示加载动画
    title: '正在加载...'
  });
  //发起数据请求
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data; //将数据赋值给data属性
      uni.hideLoading(); //隐藏加载动画
    }
  });
}

}

Kod di atas ialah contoh pemprosesan data asas sebelum halaman dimuatkan.

2. Gunakan Vuex untuk mengurus data global

Jika data global perlu digunakan dalam projek, kami perlu menggunakan Vuex untuk pengurusan. Vuex ialah perpustakaan pengurusan negeri rasmi untuk Vue.js, yang boleh mengurus semua negeri dalam aplikasi dengan berkesan, termasuk data global.

Dalam Uniapp, kami boleh mencipta objek kedai Vuex dalam fail store.js dan menyerahkan kaedah dalam mutasi melalui kaedah commit() untuk menukar keadaan dalam keadaan. Kod sampel adalah seperti berikut:

// fail store.js
import Vue daripada 'vue'
import Vuex daripada 'vuex'

Vue.use(Vuex)

kedai const = Vuex.Store baharu({
keadaan: {

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

},
mutasi: {

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

}
})

eksport stor lalai;

//Fail modul halaman