Lassen Sie uns darüber sprechen, wie Anfänger uniapp nutzen

Da der Markt für mobile Anwendungen wächst, beginnen immer mehr Unternehmen oder Einzelpersonen, ihre eigenen mobilen Anwendungen zu entwickeln. Allerdings schrecken viele Entwickler durch Probleme wie das Erlernen mehrerer Programmiersprachen, die Anpassung an verschiedene Mobiltelefonsysteme und Bildschirme unterschiedlicher Größe ab. Es entstand das plattformübergreifende Entwicklungsframework uniapp, das einem Schweizer Taschenmesser ähnelt. Dabei handelt es sich um ein Entwicklungsframework, das auf mehreren Plattformen ausgeführt werden kann und es Entwicklern ermöglicht, plattformübergreifende Anwendungen zu entwickeln, die auf mehreren Plattformen unter einem Code anwendbar sind.

uniapp basiert auf dem Vue-Framework und kompiliert seinen Quellcode in native Anwendungen für verschiedene Plattformen. Zu den unterstützten Plattformen gehören: iOS, Android, H5, Miniprogramme, Schnell-Apps, Apps usw. Dieser Artikel führt Anfänger in die Verwendung von uniapp ein.

Uniapp installieren

Vor der Installation von Uniapp müssen Sie zunächst die Node.js-Umgebung installieren und sicherstellen, dass die Version über 8.0 ist.

Nach der Installation der Node.js-Umgebung können wir die Befehlszeile von npm (Node.js-Paketverwaltungstool) verwenden, um das Uniapp-Gerüsttool zu installieren.

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

Auf diese Weise können Sie uniapp erfolgreich installieren und ein erstes Projekt, mein Projekt, erstellen.

Verzeichnisstruktur von uniapp

Nachdem wir das Projekt erstellt haben, werfen wir einen Blick auf die Verzeichnisstruktur des Projekts. Zu den Hauptordnern des Projekts gehören:

• components: Komponentenordner, endend mit dem Suffix .vue.
• Seiten: Speicherseitenordner, endend mit dem Suffix .vue.
• statisch: Speichern Sie statische Dateien wie Bilder und Schriftarten usw.
• unpackage: Der Ordner, der nach dem Packen des Projekts generiert wird.
• App.vue: Die Hauptseite der gesamten Anwendung.
• main.js: Die Eintragsdatei der gesamten Anwendung.

Uniapp-Anwendung schreiben

Wir haben Uniapp erfolgreich installiert und ein erstes Projekt erstellt, also schreiben wir als Nächstes einfachen Code.

Erstellen Sie eine Seite

Erstellen Sie eine neue Vue-Datei im Seitenordner des Projekts, z. B. home.vue. Schreiben Sie den folgenden Code in die Datei:

<template>
  <view class="content">
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: 'Hello uniapp!'
      }
    }
  }
</script>

Auf diese Weise haben wir eine neue Seite erstellt.

Navigieren Sie zu einer anderen Seite.

Nehmen wir als Nächstes an, wir möchten auf Seite 1 auf eine Schaltfläche klicken und zu Seite 2 springen. Wir können den folgenden Code zu Seite 1 hinzufügen:

<button @click="goToPage2">Go to page 2</button>

Wenn auf die Schaltfläche geklickt wird, müssen wir den folgenden Code zum Skript-Tag von Seite 1 hinzufügen:

methods: {
  goToPage2() {
    uni.navigateTo({
      url: '/pages/page2.vue'
    })
  }
}

Auf diese Weise können wir auf Seite 1 zu Seite 2 springen .

Einführung von Bildern

Angenommen, wir müssen ein Bild in die Seite einfügen. Sie müssen das Bild zuerst im statischen Ordner speichern und dann einen relativen Pfad verwenden, um es in der .vue-Datei zu referenzieren.

<template>
  <view>
    <image :src="`/static/${image}`" mode="aspectFit"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: 'image.jpg'
      }
    }
  }
</script>

Initiieren Sie eine Netzwerkanfrage.

Get-Anfrage:

uni.request({
  url: 'https://www.xxx.com/api/list',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

Post-Anfrage:

uni.request({
  url: 'https://www.xxx.com/api/list',
  method: 'POST',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

Run uniapp

Nach Abschluss des obigen Codeschreibens müssen wir den folgenden Befehl in der Befehlszeile ausführen:

npm run dev:%PLATFORM%

%PLATFORM% stellt die dar Erforderliche Plattform. Hier können Sie iOS, Android usw. eingeben. Nachdem Sie den obigen Befehl ausgeführt haben, können Sie eine Vorschau des Projekteffekts auf dem Simulator oder der realen Maschine anzeigen.

Zusammenfassung

uniapp bietet Entwicklern plattformübergreifende Entwicklungslösungen, wodurch die Entwicklungskosten erheblich gesenkt und die Entwicklungseffizienz verbessert werden. Damit müssen Entwickler nur eine Programmiersprache beherrschen, um plattformübergreifende Anwendungen auf mehreren Plattformen zu entwickeln, was Entwicklern hilft, Entwicklungsvorgänge effizienter durchzuführen.

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Anfänger uniapp nutzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!