So richten Sie eine Landingpage in Uniapp ein

Mit der tiefgreifenden Entwicklung des mobilen Internets entscheiden sich immer mehr Unternehmen für die Entwicklung einer eigenen APP, um das Benutzererlebnis und das Markenimage zu verbessern. Um die Entwicklungskosten zu senken und die Entwicklungseffizienz zu verbessern, entscheiden sich viele Unternehmen für die Verwendung plattformübergreifender Entwicklungsframeworks zum Erstellen von APPs. Uniapp ist unter ihnen ein hervorragendes Open-Source-Framework.

Beim Erstellen einer Uniapp-Anwendung müssen wir die Einstiegsseite definieren. Dabei handelt es sich um die erste Seite, die nach dem Start der Anwendung geladen wird. Normalerweise wird sie als Zielseite oder Startseite bezeichnet. In diesem Artikel erfahren Sie, wie Sie eine Landingpage für Ihre Uniapp-Anwendung erstellen und einrichten.

Schritt eins: Erstellen Sie ein Uniapp-Projekt

Laden Sie die neueste Version von Uniapp von der offiziellen Uniapp-Website herunter und installieren Sie sie in Ihrer lokalen Umgebung:

$ npm install --global @vue/cli@3.0.0-beta.10
$ vue create -p dcloudio/uni-preset-vue my-project

Geben Sie den obigen Befehl in der Befehlszeile ein, um ein Uni-App-Projekt zu erstellen.

Schritt 2: Erstellen Sie eine Landingpage

Im src-Verzeichnis können wir unsere eigene Homepage-Vue-Seite erstellen. Sie können Ihren bevorzugten Editor zum Schreiben auswählen. Hier verwenden wir den HbuilderX-Editor, um eine index.vue-Datei zu erstellen. Der Code lautet wie folgt:

<template>
  <view class="container">
    <text class="text">这是我的Uniapp应用程序的落地页</text>
  </view>
</template>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 24px;
  }
</style>

Einfach ausgedrückt, wir haben ein Container-Tag und ein Text-Tag erstellt und den Container verwendet um den chinesischen Inhalt zu zentrieren und zu zentrieren. Zu Demonstrationszwecken haben wir hier nur den Textinhalt „Dies ist die Zielseite meiner Uniapp-Anwendung“ festgelegt.

Schritt 3: Einrichten der Zielseite

Nachdem wir die Zielseite erstellt haben, müssen wir der Uniapp-Anwendung mitteilen, dass dies unsere Einstiegsseite ist und in der Datei „pages.json“ konfiguriert werden muss. Öffnen Sie die Datei „pages.json“ und fügen Sie den folgenden Code hinzu:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  }
}

In dieser Datei „pages.json“ definieren wir alle Seiten der Anwendung. Hier ist nur die „Index“-Seite, die wir gerade erstellt haben. Die Eigenschaft „navigationBarTitleText“ wird verwendet, um den Titeltext der Navigationsleiste festzulegen. Darüber hinaus sollten wir auch den globalen Stil der Navigationsleiste festlegen.

Schritt 4: Legen Sie die Startseite der Anwendung fest

Wir haben die Zielseite festgelegt, müssen Uniapp aber auch mitteilen, was die Startseite der Anwendung ist. Fügen Sie der Datei „pages.json“ den folgenden Inhalt hinzu:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  },
  "launchPage": {
    "path": "pages/index/index"
  }
}

Hier verwenden wir die Attribute tabBar und launchPage. tabBar wird verwendet, um die untere Navigationsleiste der Anwendung zu definieren, und launchPage wird verwendet, um die Anwendungsstartseite festzulegen. Wir stellen die Startseite auf die „Index“-Seite ein, die wir gerade erstellt haben.

Hier müssen wir auch mehrere Eigenschaften für die untere Navigationsleiste der Anwendung definieren. Hier wird nur eine „Homepage“ definiert. Je nach Bedarf können andere Seiten definiert werden, und die Eigenschaften iconPath und selectedIconPath werden zum Definieren der Symbole verwendet entsprechend der Navigationsleiste und dem Aktivierungsstatussymbol.

Schritt 5: Starten Sie die Anwendung

Nachdem wir nun die Zielseite und die Startseite eingerichtet haben, können wir die Anwendung starten, um den Effekt zu sehen. Geben Sie den folgenden Befehl in die Befehlskonsole ein, um die Anwendung zu starten:

$ npm run dev:%PLATFORM%

Die %PLATFORM% hier stellt die Plattform dar, die Sie später verwenden. Dies können h5, app-plus, mp-weixin und andere Plattformen sein.

Jetzt haben wir die Landingpage der Uniapp-Anwendung erfolgreich erstellt und eingerichtet. Unabhängig davon, ob Sie eine Webanwendung oder eine plattformübergreifende mobile Anwendung erstellen, ist Uniapp ein leistungsstarkes Entwicklungsframework, mit dem Sie beeindruckende Anwendungen erstellen können.

Das obige ist der detaillierte Inhalt vonSo richten Sie eine Landingpage in Uniapp ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!