uniapp springt und übergibt Parameter, um den Titel zu ändern

Mit dem Aufkommen mobiler Anwendungen und der steigenden Benutzerzahl entscheiden sich immer mehr Entwickler für die Verwendung von Uniapp als plattformübergreifendes Entwicklungsframework. Im eigentlichen Entwicklungsprozess müssen wir häufig zu Seiten springen und Parameter übergeben. Gleichzeitig müssen wir auch den Titel entsprechend dem Inhalt verschiedener Seiten ändern. In diesem Artikel wird daher erläutert, wie die Funktionen zum Springen von Parametern und Ändern von Titeln in Uniapp implementiert werden.

1. Routensprung in Uniapp

uniapp ist ein Framework, das auf Vue.js basiert, und sein Routensprung ist im Grunde derselbe wie Vue.js. In uniapp können wir die Methode uni.navigateTo() verwenden, um zur Seite zu springen, und wir können auch die Methode uni.navigateBack() verwenden, um zur vorherigen Seite zurückzukehren. Es ist zu beachten, dass bei Verwendung des Uni-App-Simulators auf der H5-Seite (Webseite) die Methode uni.navigateBack() nicht verwendet werden kann.

Das Folgende ist ein Beispielcode, um zur Zielseite zu springen:

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

2. Parameter übergeben

In der tatsächlichen Entwicklung müssen wir häufig Daten zwischen Seiten übergeben. Nach der Anmeldung müssen wir beispielsweise den Benutzernamen und den Avatar des Benutzers auf der Seite des persönlichen Zentrums anzeigen. In uniapp ist die Übergabe von Parametern sehr einfach. Wir müssen nur Parameter im Sprunglink hinzufügen.

Das Folgende ist ein Beispielcode für die Übergabe von Parametern:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

Auf der Zielseite (d. h. targetPage) können wir die Methode uni.getStorageSync() verwenden, um die übergebenen Parameter abzurufen. Das Folgende ist ein Beispielcode zum Abrufen von Parametern:

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

Es ist zu beachten, dass beim Übergeben von Parametern empfohlen wird, die Methode encodeURIComponent() zum Codieren zu verwenden, um verstümmelte Zeichen zu vermeiden. Auf der Zielseite können wir zum Dekodieren die Methode decodeURIComponent() verwenden.

3. Ändern Sie den Titel

In uniapp können wir den Seiteninhalt besser anzeigen, indem wir den Seitentitel festlegen, sodass Benutzer den auf der aktuellen Seite angezeigten Inhalt leichter verstehen können. Sie können die Eigenschaft „navigationBarTitleText“ in der Datei page.json festlegen oder die Methode uni.setNavigationBarTitle() verwenden.

Das Folgende ist ein Beispielcode zum Festlegen des Seitentitels:

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

Beachten Sie Folgendes:

1. Wenn Sie den Titel der Navigationsleiste in der Datei page.json festlegen, wird er in der js-Datei überschrieben über die uni.setNavigationBarTitle()-Methode Titel festlegen.
2. Es wird nur auf der aktuellen Seite wirksam. Sie müssen den Titel jedes Mal zurücksetzen, wenn Sie eine neue Seite aufrufen.

4. Sprungparameter implementieren und den Titel ändern

Für die Notwendigkeit, beim Springen zur Seite Parameter zu übergeben und den Titel zu ändern, können wir dies auf folgende Weise erreichen:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

Es ist zu beachten, dass der Sprung erfolgen sollte erfolgreich sein Legen Sie den Titel der Zielseite in der Rückruffunktion fest, andernfalls kann der Titel möglicherweise nicht erfolgreich geändert werden.

5. Zusammenfassung

In diesem Artikel wird erläutert, wie die grundlegenden Vorgänge wie Seitensprung, Parameterübergabe und Titeländerung in Uniapp implementiert werden. Entwickler können den Code je nach Bedarf in tatsächlichen Projekten weiter anpassen. Unabhängig von den Anforderungen können Sie während der Entwicklung eine Möglichkeit finden, diese in Uniapp zu implementieren.

Das obige ist der detaillierte Inhalt vonuniapp springt und übergibt Parameter, um den Titel zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!