So konfigurieren Sie das Uniapp-Routing

Da mobile Anwendungen immer beliebter und gefragter werden, beginnen immer mehr Entwickler, plattformübergreifende Entwicklungstechnologie zum Erstellen von Anwendungen zu nutzen. UniApp als plattformübergreifendes Entwicklungsframework hat sich nach und nach unter diesem Trend entwickelt und wird von immer mehr Entwicklern begrüßt. Routing ist eine sehr wichtige Komponente bei der Entwicklung von Anwendungen mit UniApp, die Ihnen die Navigation zwischen verschiedenen Seiten ermöglicht.

In UniApp wird Routing verwendet, um Seitensprünge und Navigation der Anwendung zu steuern. Wenn Sie bereits mit dem Routing-Mechanismus von Vue.js vertraut sind, werden Sie sich bei der Verwendung des Routings von UniApp sehr vertraut fühlen. Der Routing-Mechanismus von UniApp ist gut mit dem Routing von Vue.js kompatibel und bietet einige zusätzliche Funktionen und APIs.

Für Anfänger ist die Anwendung des UniApp-Routings möglicherweise zunächst nicht klar. Wo sollten Sie also das UniApp-Routing ausfüllen? Im nächsten Artikel stellen wir die Anwendung des UniApp-Routings im Detail vor und zeigen, wo man sie ausfüllen kann.

1. Routing-Konfigurationsdatei

In UniApp können Sie Routing in der Routing-Konfigurationsdatei konfigurieren. Die Routing-Konfigurationsdatei befindet sich im Allgemeinen in der Datei pages.json im Stammverzeichnis und dient dazu, die Routing-Zuordnungstabelle der Anwendung zu konfigurieren. In der Routing-Konfigurationsdatei müssen Sie den Pfad jeder Seite, den Seitentitel, das Seitensymbol und andere Attribute angeben. Wenn Sie die Seite zur Navigationsleiste hinzufügen müssen, müssen Sie auch den tabBar-Attribut. Das Folgende ist ein einfaches Beispiel für eine Routing-Konfigurationsdatei: <code>pages.json 文件中，其作用是配置应用程序的路由映射表。在路由配置文件中，你需要指定每个页面的路径、页面的标题、页面的icon等属性，如果你需要添加页面到导航栏中，还需要指定tabBar属性。下面是一个简单的路由配置文件示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "tabBar": {
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    }
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#35b4b4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "../../static/images/tabbar/home.png",
        "selectedIconPath": "../../static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    ]
  }
}

上面的代码中，我们定义了两个页面：index和about，并且在about页面中添加了一个tabBar属性，来指定页面在导航栏中的位置和样式。同时，我们也定义了应用程序的导航栏样式。在这个示例中，我们把index页面作为导航栏的首页，因此在tabBar属性中将其设置为了默认页面。

2. 使用UniApp路由API

除了在路由配置文件中进行路由配置之外，UniApp还提供了一整套路由API，可以在业务逻辑中灵活地使用。这些API包括uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab以及uni.navigateBack等。

• uni.navigateTo

从当前页面跳转到应用程序的某个页面。如果目标页面还未打开，该API会新开一个页面；如果目标页面已经打开，该API会将目标页面置于栈顶。

uni.navigateTo({
  url: '/pages/about/about'
});

• uni.redirectTo

关闭当前页面，跳转到应用程序的某个页面。该API关闭当前页面，因此无法通过返回按钮返回到当前页面。

uni.redirectTo({
  url: '/pages/about/about'
});

• uni.reLaunch

关闭所有的页面，打开应用程序的某个页面。

uni.reLaunch({
  url: '/pages/about/about'
});

• uni.switchTab

跳转到应用程序的某个tab页面，该API只能用于跳转到应用程序的tab

uni.switchTab({
  url: '/pages/index/index'
});

Im obigen Code definieren wir zwei Seiten: index und about und fügten a hinzu tabBar-Attribut zur Seite about hinzufügen, um die Position und den Stil der Seite in der Navigationsleiste anzugeben. Gleichzeitig definieren wir auch den Navigationsleistenstil der Anwendung. In diesem Beispiel verwenden wir die Seite index als Startseite der Navigationsleiste, daher legen wir sie im Attribut tabBar als Standardseite fest.

2. UniApp-Routing-API verwenden

Zusätzlich zur Routing-Konfiguration in der Routing-Konfigurationsdatei bietet UniApp auch einen vollständigen Satz von Die Routing-API kann flexibel in der Geschäftslogik verwendet werden. Zu diesen APIs gehören uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab und uni.navigateBacketc.

3. uni.navigateTo

Von der aktuellen Seite zu einer bestimmten Seite in der Anwendung springen. Wenn die Zielseite nicht geöffnet wurde, öffnet die API eine neue Seite. Wenn die Zielseite bereits geöffnet ist, platziert die API die Zielseite oben im Stapel.

uni.navigateBack({
  delta: 1  // 返回的页面数，如果为空，则返回上一个页面
});

#🎜🎜##🎜🎜#uni.redirectTo#🎜🎜##🎜🎜##🎜🎜#Schließen Sie die aktuelle Seite und springen Sie zu einer bestimmten Seite in der Anwendung. Diese API schließt die aktuelle Seite, sodass es keine Möglichkeit gibt, über den Zurück-Button zur aktuellen Seite zurückzukehren. #🎜🎜#rrreee#🎜🎜##🎜🎜#uni.reLaunch#🎜🎜##🎜🎜##🎜🎜#Schließen Sie alle Seiten und öffnen Sie eine bestimmte Seite der Anwendung. #🎜🎜#rrreee#🎜🎜##🎜🎜#uni.switchTab#🎜🎜##🎜🎜##🎜🎜#Zu einer tab-Seite der Anwendung springen. Diese API kann nur verwendet werden, um Springen Sie zur Registerkarte der Anwendung. #🎜🎜#rrreee#🎜🎜##🎜🎜#uni.navigateBack#🎜🎜##🎜🎜##🎜🎜#Schließen Sie die aktuelle Seite und kehren Sie zur vorherigen Seite zurück. #🎜🎜#rrreee#🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜##🎜🎜#In UniApp ist Routing ein wichtiger Teil des Anwendungssprungs und der Navigation. Bei der Entwicklung von Anwendungen können Sie Routing über Routing-Konfigurationsdateien und Routing-APIs konfigurieren und verwenden. Die Routing-Konfigurationsdatei kann die Position und den Stil der Seite gut steuern, während die Routing-API eine flexible Programmiermethode bietet, mit der Sie in der Geschäftslogik flexibel zu Seiten springen und navigieren können. Das Erlernen der Verwendung des UniApp-Routing-Mechanismus kann Ihrer Entwicklung großen Komfort und Effizienz verleihen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie das Uniapp-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!