So implementieren Sie Seitensprünge und übertragen Werte in Uniapp

Mit der Entwicklung des mobilen Internets hat die APP-Entwicklung an Popularität gewonnen. Bei der APP-Entwicklung gibt es viele technische Schwierigkeiten, darunter Seitensprünge und Parameterübertragung, die beherrscht werden müssen. Als Multi-Terminal-Entwicklungsframework bietet Uniapp eine einfachere und bequemere Implementierung von Seitensprüngen und Wertübertragungen. Dieser Artikel konzentriert sich auf die Methode zum Springen und Übergeben von Werten auf der Uniapp-Seite.

1. Uniapp-Seitensprung

Es gibt zwei Möglichkeiten, zur Uniapp-Seite zu springen. Eine besteht darin, über die Tab-Leiste unten zur Seite zu springen, und die andere darin, über den Code zur Seite zu springen.

1. Seitensprung über die untere Tab-Leiste realisieren

Im Uniapp-Framework kann der Seitensprung über die integrierte untere Tab-Leiste von Uniapp realisiert werden. Konfigurieren Sie die untere Registerkartenleiste in der Datei „pages.json“ und fügen Sie den zu überspringenden Seitenpfad in der Registerkartenleiste hinzu, um einen Seitensprung zu erreichen.

Das Folgende ist eine einfache Datei „pages.json“ zum Konfigurieren des Codes für die Registerkartenleiste unten:

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

2. Implementieren Sie den Seitensprung durch Code. Um den Seitensprung durch Code zu implementieren, müssen Sie uni.navigateTo und verwenden uni wird vom Uniapp-Framework bereitgestellt. Ersteres behält die aktuelle Seite bei und springt zu einer bestimmten Seite in der Anwendung, während letzteres die aktuelle Seite schließt und zu einer bestimmten Seite in der Anwendung springt.

Das Folgende ist ein Beispielcode zum Implementieren von Seitensprung-durch-Code:

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

2. Uniapp-Seitenwertübertragung

In einigen Szenarien müssen wir Daten von einer Seite an eine andere übergeben. Für die Übertragung von Uniapp-Seitenwerten werden häufig zwei gängige Methoden im Frontend verwendet: URL-Parameterübertragung und Vuex-Statusverwaltung.

1.URL-Parameterübergabe

In Uniapp ist es auch üblich, die URL-Parameterübergabe zu verwenden. Beim Springen zur Zielseite können wir die Daten, die als Parameter übergeben werden müssen, an der URL-Adresse und dann an der URL-Adresse zusammenfügen Zielseite Wird über das $Route-Objekt auf der Seite abgerufen.

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

//Springe zur Zielseite und übergebe die ID als Parameter

uni.navigateTo({

url: '/pages/detail/detail?id=12 '
});

//Parameter auf der Zielseite abrufen

Standardexport {

data () {

return {
  id: ''
}

}, onLoad (Optionen) {

this.id = options.id

}}

2.Vuex状态管理

另一种方式是使用Vuex状态管理。通过Vuex将数据存储在全局store对象中，从而实现多个页面间数据的共享。

下面是一个Vuex状态管理的示例代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'uniapp'
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
});

export default store;

//需要传递数据的页面
import { mapState } from 'vuex';

export default {
  data() {
    return {
      inputName: ''
    };
  },
  methods: {
    setName() {
      this.$store.commit('setName', this.inputName);
    }
  }
};

//需要获取数据的页面
import { mapState } from 'vuex';

export default {
  computed: mapState({
    name: state => state.name
  })
};

Im obigen Code zuerst define Ein globales Speicherobjekt wird erstellt und eine Statusvariable und eine Mutationsmethode werden definiert, um die Daten im Status zu aktualisieren. Wenn die Seite, die Daten übertragen muss, die Daten ändern muss, wird die Mutationsmethode aufgerufen, um die Daten im Status zu aktualisieren. Wenn die Seite, die Daten abrufen muss, Daten abrufen muss, wird die MapState-Methode über das berechnete Attribut aufgerufen, um die Daten im Status abzurufen.

Zusammenfassung:

Die oben genannten Methoden sind die beiden Methoden für Uniapp-Seitensprung und -Wertübertragung, URL-Parameterübertragung und Vuex-Statusverwaltung. Während des Anwendungsentwicklungsprozesses sollte die geeignete Methode für Seitensprung und Datenübertragung entsprechend den Geschäftsanforderungen ausgewählt werden . Um effiziente, stabile und wartbare Anwendungen zu erreichen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Seitensprünge und übertragen Werte in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!