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

页面2

or

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

index2 Page

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

Need to pay attention to Yes, ifindex2is 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 throughwx.navigateTo, and a data channel will be established between the two pages:

• The opened page can be opened throughthis.getOpenerEventChannel()method to obtain anEventChannelobject;
• wx.navigateTo’ssuccesscallback also contains aEventChannelObject.

These twoEventChannelobjects can use theemitandonmethods to send and listen to events.

index1.wxml

 来自于页面2 传递的数据: {{msg}} 

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 asapp.js

app.js

Public data can be defined here

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

index1.js

The page can be obtained throughgetApp

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!