Maison > Applet WeChat > Développement de mini-programmes > Parlons de plusieurs méthodes de transfert de paramètres de page dans les mini-programmes.

Parlons de plusieurs méthodes de transfert de paramètres de page dans les mini-programmes.

青灯夜游
Libérer: 2021-10-27 09:41:49
avant
3082 Les gens l'ont consulté

Cet article vous présentera plusieurs méthodes de passage de paramètres de page dans des mini-programmes. J'espère qu'il vous sera utile !

Parlons de plusieurs méthodes de transfert de paramètres de page dans les mini-programmes.

La méthode de transmission des paramètres de page dans le mini programme

passage des paramètres d'url

est la même que la méthode sur le Web.

page index1

<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>
Copier après la connexion

ou

    wx.navigateTo({
      url: "/pages/index2/index2?name=海贼王"
    })
Copier après la connexion

page index2

  onLoad: function (options) {
    console.log(options);// { name : 海贼王}
  },
Copier après la connexion

Il est à noter que si index2 est une page à onglets, alors les paramètres de la page ne peuvent pas être obtenus dans onLoad. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmesindex2 是tabbar页面,那么无法在onLoad中获取页面参数。【相关学习推荐:小程序开发教程

事件通道 EventChannel

如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:

  • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;
  • wx.navigateTosuccess 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emiton 方法相互发送、监听事件。

index1.wxml

<view>
  来自于页面2 传递的数据: {{msg}}
</view>
Copier après la connexion

index1.js

Page({
  data: {
    msg: ""
  },
  onLoad: function () {
    // 1 跳转到页面2
    wx.navigateTo({
      url: "/pages/index2/index2",
      // 2 在成功的回调函数中获取事件通道对象
      success: ({ eventChannel }) => {
        // 3 监听自定义事件
        eventChannel.on("data", (e) => {
          // 4 获取页面2传递过来的数据 设置到 data中
          this.setData({
            msg: e.name
          })
        })
      }
    });
  },
})
Copier après la connexion

index2.js

Page({
  onLoad: function () {
    // 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象
    const EventChannel = this.getOpenerEventChannel();
    // 触发事件和传递参数到 页面1中
    EventChannel.emit("data", { name: &#39;海贼王&#39; });
  }
})
Copier après la connexion

本地存储

小程序中的本地存储用法类似web中,可以实现在整个应用中获取数据和存储数据

index1.js

wx.setStorageSync(&#39;data&#39;, {name:&#39;海贼王&#39;});// 可以直接存任意类型的数据
Copier après la connexion

index2.js

wx.getStorageSync(&#39;data&#39;);// 获取
Copier après la connexion

应用全局变量

不同的页面都是处于一个共同的应用当中的,这个应用可以理解为 app.js

app.js

在这里可以定义公共数据

App({
  myData: {
    name: "悟空"
  }
})
Copier après la connexion

index1.js

页面中可以通过 getApp]

Event Channel EventChannel Si une page est accessible par une autre page via wx.navigateTo

Ouvert, un canal de données sera établi entre les deux pages :

  • La page ouverte peut être ouverte via this.getOpenerEventChannel() </ code> pour obtenir un objet <code>EventChannel ;
  • wx.navigateTo le rappel success contient également un < objet code> EventChannel.

Les deux objets EventChannel peuvent utiliser les méthodes emit et on pour s'envoyer et écouter des événements entre eux. . L'utilisation du stockage local dans l'applet est similaire à cela sur le Web, et peut être implémenté dans toute l'application Obtenez et stockez des données dans

index1.js

    let app = getApp();
    console.log(app.myData);
Copier après la connexion
index2.js

    let app = getApp();
    app.myData.name="八戒";
Copier après la connexion

Appliquer des variables globales🎜🎜🎜🎜Différentes pages sont dans une application commune, cette application peut comprendre Pour app.js🎜🎜🎜app.js🎜🎜🎜 les données publiques peuvent être définies ici🎜
const data = {
  name: "海贼王"
};

module.exports = data;
Copier après la connexion
🎜🎜index1.js🎜🎜🎜 la page peut être obtenue via getApp 🎜
const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})
Copier après la connexion
🎜Bien sûr, vous pouvez également modifier directement les 🎜rrreee🎜🎜🎜variables publiques🎜🎜🎜🎜définir un fichier js indépendant séparément et y stocker les données, vous pouvez 🎜🎜🎜common.js🎜🎜rrreee🎜🎜index1. js🎜🎜 rrreee🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal