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:

d477f9ce7bf77f53fbcf36bec1b69b7a
f5fd152e572341484f96fad1f62d44b4

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

dcfb60f645867e6fbbbfbf4d1ed2374b

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
d477f9ce7bf77f53fbcf36bec1b69b7a
f5fd152e572341484f96fad1f62d44b4

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

de5f4c1163741e920c998275338d29b2
9aef2673226c7cf7798f7b019dd771ab

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState } daripada 'vuex';

eksport lalai {

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

Kod di atas ialah contoh mengurus data global melalui Vuex.

3. Gunakan minix untuk mencampur dan memproses data

Dalam Uniapp, kami juga boleh menggunakan minix untuk pemprosesan data. Mixin ialah penyelesaian umum untuk berkongsi kod antara komponen. Beberapa kaedah pemprosesan permintaan data biasa boleh diekstrak dan dicampur ke dalam halaman untuk digunakan untuk meningkatkan kebolehgunaan semula kod.

Kaedah khusus adalah untuk menentukan kaedah pemprosesan permintaan data dalam fail minix, dan kemudian memperkenalkannya dalam halaman menggunakan atribut mixins. Kod sampel adalah seperti berikut:

//userInfoMixin.js fail
eksport lalai {
data() {

return {
  userInfo: {}
}

},
kaedah: {

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

}
}

//Fail modul halaman
d477f9ce7bf77f53fbcf36bec1b69b7a
f5fd152e572341484f96fad1f62d44b4

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

de5f4c1163741e920c998275338d29b2
< ;/template> ;

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

eksport lalai {

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

}
9429d6e1efad07153846e528605c447e

Kod di atas ialah contoh penggunaan pencampuran minix untuk memproses data.

Secara umumnya, terdapat banyak cara untuk memproses data asas dalam Uniapp. Sebaiknya pilih kaedah yang sesuai mengikut situasi sebenar projek.

Atas ialah kandungan terperinci Bagaimana untuk memuatkan maklumat asas uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!