So laden Sie grundlegende Informationen von Uniapp

Mit der rasanten Entwicklung des mobilen Internets hoffen immer mehr Entwickler, mehrere Plattformen gleichzeitig zu entwickeln, um die Projektabdeckung und das Benutzererlebnis zu verbessern. Zu dieser Zeit entstand Uniapp (vollständiger Name: Universal Application). Es handelt sich um ein plattformübergreifendes Entwicklungstool, das auf Vue.js basiert und gleichzeitig auf mehreren Plattformen veröffentlicht werden kann.

In Uniapp sind Daten sehr wichtige Inhalte und das Laden von Daten ist erforderlich. Beispielsweise müssen wir einige grundlegende Daten in die Seite laden, um den Inhalt der Seite anzuzeigen, z. B. Benutzerinformationen, Produktinformationen usw. Wie gehe ich also mit dem Laden dieser grundlegenden Informationen in Uniapp um?

1. Grunddaten vor dem Laden der Seite verarbeiten

In Uniapp können wir Grunddaten vor dem Laden der Seite verarbeiten. Die spezifische Methode besteht darin, die Funktion uni.showLoading () in der Lebenszyklusfunktion der Seite zu verwenden, um die Ladeanimation anzuzeigen und gleichzeitig eine Datenanforderung zu initiieren. Nach erfolgreicher Anforderung werden die Daten den Daten zugewiesen Attribut der Seite. Der Beispielcode lautet wie folgt:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2 #🎜🎜 #

3f1c4e4b6b16bbbd69b2ee476dc4f83a

Standard exportieren {

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

}

2cacc6d41bbb37262a98f745aa00fbf0

Der obige Code ist bevor die Seite geladen wird. Beginnen wir mit einem Beispiel für die Arbeit mit Basisdaten.

2. Verwenden Sie Vuex, um globale Daten zu verwalten.

Wenn globale Daten im Projekt verwendet werden müssen, müssen wir Vuex für die Verwaltung verwenden. Vuex ist die offizielle Statusverwaltungsbibliothek für Vue.js, mit der alle Status in der Anwendung, einschließlich globaler Daten, effektiv verwaltet werden können.

In Uniapp können wir das Vuex-Store-Objekt in der Datei store.js erstellen und die Methoden in Mutationen über die Methode commit() übermitteln, um den Status im Status zu ändern. Der Beispielcode lautet wie folgt:

// Datei „store.js“

Vue aus „vue“ importieren
Vuex aus „vuex“ importieren

Vue .use( Vuex)

const store = new Vuex.Store({

state: {

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

},

mutations: {#🎜🎜 #

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

# 🎜🎜#}
})

Standardspeicher exportieren;

//Seitenmoduldatei

d477f9ce7bf77f53fbcf36bec1b69b7a

<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

Der obige Code ist ein Beispiel für die Verwaltung globaler Daten durch Vuex.

3. Verwenden Sie Minix zum Mischen und Verarbeiten von Daten.

In Uniapp können wir Minix auch zur Datenverarbeitung verwenden. Mixins sind eine allgemeine Lösung zum Teilen von Code zwischen Komponenten. Einige häufig verwendete Methoden zur Verarbeitung von Datenanfragen können extrahiert und in die Seite eingemischt werden, um die Wiederverwendbarkeit des Codes zu verbessern.

Die spezifische Methode besteht darin, die Datenanforderungsverarbeitungsmethode in der Minix-Datei zu definieren und sie dann mithilfe des Mixins-Attributs auf der Seite einzuführen. Der Beispielcode lautet wie folgt:

//userInfoMixin.js-Datei

export default {

data() {

return {
  userInfo: {}
}

},#🎜🎜 # Methoden: {

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

}

}

//Seitenmoduldatei

d477f9ce7bf77f53fbcf36bec1b69b7a

89c662c6f8b87e82add978948dc499d2#🎜 🎜#

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

de5f4c1163741e920c998275338d29b2

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
userInfoMixin aus './userInfoMixin.js' importieren;#🎜 🎜## 🎜🎜#Standardexport {

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

}
2cacc6d41bbb37262a98f745aa00fbf0

Der obige Code ist ein Beispiel für die Verwendung von Minix-Mischung zur Datenverarbeitung.

Im Allgemeinen gibt es viele Möglichkeiten, Basisdaten in Uniapp zu verarbeiten. Es ist am besten, die geeignete Methode entsprechend der tatsächlichen Situation des Projekts zu wählen.

Das obige ist der detaillierte Inhalt vonSo laden Sie grundlegende Informationen von Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!