Comment charger les informations de base d'uniapp

Avec le développement rapide de l'Internet mobile, de plus en plus de développeurs espèrent développer plusieurs plateformes en même temps pour améliorer la couverture des projets et l'expérience utilisateur. À cette époque, Uniapp (nom complet : Universal Application) a vu le jour. Il s'agit d'un outil de développement multiplateforme basé sur Vue.js lancé par DCloud. Il peut être écrit une seule fois et publié sur plusieurs plateformes en même temps.

Dans Uniapp, les données sont un contenu très important et le chargement des données est nécessaire. Par exemple, nous devons charger certaines données de base dans la page pour afficher le contenu de la page, telles que des informations sur l'utilisateur, des informations sur le produit, etc. Alors, comment gérer le chargement de ces informations de base dans Uniapp ?

1. Traiter les données de base avant le chargement de la page

Dans Uniapp, nous pouvons traiter les données de base avant le chargement de la page. La méthode spécifique consiste à utiliser la fonction uni.showLoading() dans la fonction de cycle de vie de la page pour afficher l'animation de chargement et en même temps lancer une demande de données. Une fois la demande réussie, les données sont affectées aux données. attribut de la page. L'exemple de code est le suivant :

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

}
3fa3f474cbb4b6d948eebecb1be5dde4

Le code ci-dessus est un exemple de traitement des données de base avant le chargement de la page.

2. Utilisez Vuex pour gérer les données globales

Si des données globales doivent être utilisées dans le projet, nous devons utiliser Vuex pour la gestion. Vuex est la bibliothèque officielle de gestion d'état pour Vue.js, qui peut gérer efficacement tous les états de l'application, y compris les données globales.

Dans Uniapp, nous pouvons créer l'objet magasin Vuex dans le fichier store.js et soumettre les méthodes en mutations via la méthode commit() pour changer l'état dans l'état. L'exemple de code est le suivant :

// 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;
}

}
})

exporter le magasin par défaut ;

//Fichier du module de page
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
028402f0d1e2c7f0a5739e0164ec6833

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

Le code ci-dessus est un exemple de gestion de données globales via Vuex .

3. Utilisez minix pour mélanger et traiter les données

Dans Uniapp, nous pouvons également utiliser minix pour le traitement des données. Les mixins sont une solution générale pour partager du code entre composants. Certaines méthodes de traitement des demandes de données couramment utilisées peuvent être extraites et mélangées dans la page pour améliorer la réutilisabilité du code.

La méthode spécifique consiste à définir la méthode de traitement des demandes de données dans le fichier minix, puis à l'introduire dans la page à l'aide de l'attribut mixins. L'exemple de code est le suivant :

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

return {
  userInfo: {}
}

},
méthodes : {

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

}
}

//page module file
6600ab65906a5d165c30c216af2667f1

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer userInfoMixin depuis './userInfoMixin.js';

export par défaut {

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

}
9429d6e1efad07153846e528605c447e

Le code ci-dessus est un exemple d'utilisation du mixage minix pour traiter les données.

En général, il existe de nombreuses façons de traiter les données de base dans Uniapp. Il est préférable de choisir la méthode appropriée en fonction de la situation réelle du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!