Heim  >  Artikel  >  WeChat-Applet  >  Lassen Sie uns über verschiedene Methoden zur Übertragung von Seitenparametern in Miniprogrammen sprechen.

Lassen Sie uns über verschiedene Methoden zur Übertragung von Seitenparametern in Miniprogrammen sprechen.

青灯夜游
青灯夜游nach vorne
2021-10-25 10:52:393037Durchsuche

Dieser Artikel stellt Ihnen verschiedene Methoden zur Übergabe von Seitenparametern in Miniprogrammen vor. Ich hoffe, er wird Ihnen hilfreich sein!

Lassen Sie uns über verschiedene Methoden zur Übertragung von Seitenparametern in Miniprogrammen sprechen.

Die Methode zur Übergabe von Seitenparametern im Miniprogramm

URL-Parameterübergabe

ist die gleiche wie die Methode im Web.

index1 Seite

<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>

oder

    wx.navigateTo({
      url: "/pages/index2/index2?name=海贼王"
    })

index2 Seite

  onLoad: function (options) {
    console.log(options);// { name : 海贼王}
  },

Es ist zu beachten, dass die Seitenparameter nicht in onLoad abgerufen werden können, wenn index2 eine Tabbar-Seite ist. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklungindex2 是tabbar页面,那么无法在onLoad中获取页面参数。【相关学习推荐:小程序开发教程

事件通道 EventChannel

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

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

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

index1.wxml

<view>
  来自于页面2 传递的数据: {{msg}}
</view>

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

index2.js

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

本地存储

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

index1.js

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

index2.js

wx.getStorageSync(&#39;data&#39;);// 获取

应用全局变量

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

app.js

在这里可以定义公共数据

App({
  myData: {
    name: "悟空"
  }
})

index1.js

页面中可以通过 getApp]

Event Channel EventChannel Wenn eine Seite von einer anderen Seite über wx.navigateTo

Öffnen, ein Datenkanal wird zwischen den beiden Seiten hergestellt:

  • Die geöffnete Seite kann über this.getOpenerEventChannel() geöffnet werden code>-Methode zum Abrufen eines <code>EventChannel-Objekts;
  • wx.navigateTos success-Rückruf enthält auch einen EventChannel-Objekt.
Die beiden EventChannel-Objekte können die Methoden emit und on verwenden, um sich gegenseitig Ereignisse zu senden und darauf zu warten .

index1.wxml

    let app = getApp();
    console.log(app.myData);
index1.js

    let app = getApp();
    app.myData.name="八戒";
index2.js

🎜
const data = {
  name: "海贼王"
};

module.exports = data;
🎜🎜🎜Lokale Speichernutzung im. Apple Es ähnelt dem im Web und kann in der gesamten Anwendung implementiert werden. Daten abrufen und speichern in 🎜🎜🎜index1.js🎜🎜
const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})
🎜🎜index2.js🎜🎜rrreee🎜🎜🎜Globale Variablen anwenden🎜🎜🎜🎜Verschiedene Seiten befinden sich in einer gemeinsamen Anwendung, diese Anwendung kann sie verstehen Für app.js🎜🎜🎜app.js🎜🎜🎜 können hier öffentliche Daten definiert werden. 🎜rrreee🎜🎜index1.js. Die Seite kann über getApp abgerufen werden rrreee🎜Natürlich können Sie die 🎜rrreee🎜🎜🎜öffentlichen Variablen🎜🎜🎜🎜 auch direkt ändern, eine unabhängige JS-Datei separat definieren und die Daten darin speichern, Sie können 🎜🎜🎜common.js🎜🎜rrreee🎜🎜index1. js🎜🎜 rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über verschiedene Methoden zur Übertragung von Seitenparametern in Miniprogrammen sprechen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen