Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the way of transmitting parameters on the page in Mini Program". The content in the article is simple and clear, and it is easy to learn and understand. Now please follow the editor's train of thought slowly and deeply. Let's study and learn "what is the way of passing parameters on the page in Mini Program?"

The way of transmitting parameters on the page in Mini Program

Url parameter transfer

The way is the same as in web.

Index1 page

Page 2

Or

Wx.navigateTo ({url: "/ pages/index2/index2?name= King of Thieves"})

Index2 page

OnLoad: function (options) {console.log (options); / / {name: King of the Thief}}

It is important to note that if index2 is a tabbar page, you cannot get page parameters in onLoad. [recommended for related study: Mini Program Development tutorial]

Event channel EventChannel

If one page is opened by another page through wx.navigateTo, a data channel is established between the two pages:

The opened page can get an EventChannel object through the this.getOpenerEventChannel () method

An EventChannel object is also included in wx.navigateTo 's success callback.

Emit and on methods can be used between these two EventChannel objects to send and listen for events to each other.

Index1.wxml

Data from page 2: {{msg}}

Index1.js

Page ({data: {msg: "}, onLoad: function () {/ / 1 Jump to page 2 wx.navigateTo ({url:" / pages/index2/index2 ", / / 2 get the event channel object success: ({eventChannel}) in the successful callback function) = > {/ / 3 listen for custom event eventChannel.on (" data ") (e) = > {/ / 4 get the data settings passed by page 2 to data this.setData ({msg: e.name}) },)

Index2.js

Page ({onLoad: function () {/ / the page opened by wx.navigatorTo gets an event channel object const EventChannel = this.getOpenerEventChannel (); / / triggers the event and passes parameters to EventChannel.emit in page 1 ("data", {name: 'King of the Thief'});}})

Local Stora

The use of local storage in Mini Program is similar to that in web, which enables you to obtain and store data throughout the application.

Index1.js

Wx.setStorageSync ('data', {name:' Sea Thief King'}); / / you can store any type of data directly.

Index2.js

Wx.getStorageSync ('data'); / / get

Apply global variables

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

App.js

Public data can be defined here

App ({myData: {name: Wukong}})

Index1.js

You can get it from the page through getApp

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

Of course, you can also modify it directly.

Let app = getApp (); app.myData.name= "eight precepts"

Common variable

Define a separate js file and store the data in it.

Common.js

Const data = {name: "King of the Sea Thief"}; module.exports = data

Index1.js

Const data = require (".. /.. / common"); Page ({onLoad: function () {console.log (data);},},}) Thank you for your reading, this is the content of "what is the way of passing parameters on the page in Mini Program?" after the study of this article, I believe you have a deeper understanding of the problem of how to pass parameters on the page in Mini Program, and the specific use needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.