Let's talk about several page parameter transfer methods in mini programs.

This article will introduce you to several page parameter passing methods in the mini program. I hope it will be helpful to you!

How to pass parameters on the page in the mini program

Passing parameters through url

The method is consistent with the method in the web.

index1 Page

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

or

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

index2 Page

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

Need to pay attention to Yes, if index2 is a tabbar page, the page parameters cannot be obtained in onLoad. [Related learning recommendations: 小program development tutorial]

Event channel EventChannel

If a page is Another page is opened through wx.navigateTo, and a data channel will be established between the two pages:

• The opened page can be opened through this.getOpenerEventChannel() method to obtain an EventChannel object;
• wx.navigateTo’s success callback also contains a EventChannel Object.

These two EventChannel objects can use the emit and on methods to send and listen to events.

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: '海贼王' });
  }
})

Local storage

The local storage usage in the applet is similar to that in the web, and it can obtain and store data throughout the application

index1.js

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

index2.js

wx.getStorageSync('data');// 获取

Apply global variables

Different pages are in a common application. This application can be understood as app.js

app.js

Public data can be defined here

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

index1.js

The page can be obtained through getApp

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

Of course, you can also modify it directly

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

Public variables

define an independent js file separately and store the data in it

common.js

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

module.exports = data;

index1.js

const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})

For more programming related knowledge, please visit: Programming Video ! !

The above is the detailed content of Let's talk about several page parameter transfer methods in mini programs.. For more information, please follow other related articles on the PHP Chinese website!