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:

#🎜🎜 #

<script><p> Standard exportieren {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { userInfo: {} } }, onShow() { //页面显示时触发 uni.showLoading({ //显示加载动画 title: '正在加载...' }); //发起数据请求 uni.request({ url: 'http://xxx.com/getUserInfo', success: (res) =&gt; { this.userInfo = res.data; //将数据赋值给data属性 uni.hideLoading(); //隐藏加载动画 } }); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>}<p></script>

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

<script><br> import { mapState } from 'vuex ';# 🎜🎜#</p>export default {<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>computed: mapState(['userInfo']), //映射state中的全局数据到页面data属性中 onShow() { uni.showLoading({ title: '正在加载...' }); //发起数据请求 uni.request({ url: 'http://xxx.com/getUserInfo', success: (res) =&gt; { this.$store.commit('setUserInfo', res.data); //通过Vuex改变全局数据 uni.hideLoading(); } }); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><br>}</p></script>

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

<script><br> userInfoMixin aus './userInfoMixin.js' importieren;#🎜 🎜## 🎜🎜#Standardexport {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>mixins: [userInfoMixin], //在页面中混入minix文件 onShow() { uni.showLoading({ title: '正在加载...' }); this.getUserInfo(); //通过minix文件获取数据 uni.hideLoading(); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>}<br></script>

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!