Comment implémenter le saut de page et le transfert de valeur dans Uniapp

Avec le développement de l'Internet mobile, le développement d'applications a acquis une certaine popularité. Il existe de nombreuses difficultés techniques dans le développement d'applications, parmi lesquelles le saut de page et le passage de paramètres sont l'une des technologies qui doivent être maîtrisées. En tant que cadre de développement multiterminal, uniapp propose une implémentation plus simple et plus pratique des sauts de page et des transferts de valeur. Cet article se concentrera sur la méthode de saut et de transmission de valeurs sur la page uniapp.

1. Saut de page Uniapp

Il existe deux façons de sauter la page Uniapp, l'une consiste à réaliser le saut de page via la barre d'onglets en bas, et l'autre est pour réaliser le saut de page à travers le code Implémenter les sauts de page.

1. Saut de page via la barre d'onglets inférieure

Dans le framework uniapp, le saut de page peut être réalisé via la barre d'onglets inférieure intégrée d'uniapp. Configurez la barre d'onglets inférieure dans le fichier pages.json et ajoutez le chemin de la page à sauter dans la barre d'onglets pour réaliser un saut de page.

Ce qui suit est un simple fichier pages.json pour configurer le code de la barre d'onglets inférieure :

{
  "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. #Pass Pour implémenter le saut de page dans le code, vous devez utiliser les méthodes uni.navigateTo et uni.redirectTo fournies par le framework uniapp. Le premier conserve la page actuelle et accède à une certaine page de l'application, tandis que le second ferme la page actuelle et accède à une certaine page de l'application.

Ce qui suit est un exemple de code pour implémenter le code de saut de page :

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

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

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

2. transmission de la valeur de la page uniapp

Dans certains scénarios, nous avons besoin pour transmettre des données d'une page à une autre. Pour le transfert de valeur de page Uniapp, deux méthodes courantes sur le front-end sont souvent utilisées : le transfert de paramètres d'URL et la gestion de l'état Vuex.

1. Passage de paramètres d'URL

Dans uniapp, il est également courant d'utiliser le passage de paramètres d'URL Nous pouvons transmettre les paramètres qui doivent être transmis lors du passage à la page cible. . Les données sont intégrées à l'adresse URL en tant que paramètres, puis obtenues via l'objet $Route dans la page cible.

Ce qui suit est un exemple de code simple pour transmettre les paramètres d'URL :

//Allez à la page cible et transmettez l'identifiant en tant que paramètre

uni.navigateTo( {

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

//Obtenir les paramètres dans la page cible

export default {# 🎜🎜# data() {

return {
  id: ''
}

},
onLoad (options) {

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
  })
};

#🎜🎜 #Dans le code ci-dessus, un objet de magasin global est d'abord défini, et une variable d'état et une méthode de mutations sont définies pour mettre à jour les données dans l'état. Lorsque la page qui doit transférer des données doit modifier les données, la méthode mutations est appelée pour mettre à jour les données dans l'état. Lorsque la page qui doit obtenir des données doit obtenir des données, la méthode mapState est appelée via l'attribut calculé pour obtenir les données dans l'état.

Résumé :

Les deux façons ci-dessus d'accéder à la page uniapp et de transmettre des valeurs, la transmission des paramètres d'URL et la gestion de l'état de Vuex, pendant le processus de développement de l'application, doivent être basées sur les besoins de l'entreprise Choisissez la méthode appropriée pour les sauts de page et le transfert de données afin d'obtenir des applications efficaces, stables et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!