


Let's talk about several page parameter transfer methods in mini programs.
Oct 25, 2021 am 10:52 AMThis 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 anEventChannel
object; wx.navigateTo
’ssuccess
callback also contains aEventChannel
Object.
These two EventChannel
objects can use the emit
and on
methods to send and listen to events.
index1.wxml
<view> 來自于頁面2 傳遞的數(shù)據(jù): {{msg}} </view>
index1.js
Page({ data: { msg: "" }, onLoad: function () { // 1 跳轉(zhuǎn)到頁面2 wx.navigateTo({ url: "/pages/index2/index2", // 2 在成功的回調(diào)函數(shù)中獲取事件通道對象 success: ({ eventChannel }) => { // 3 監(jiān)聽自定義事件 eventChannel.on("data", (e) => { // 4 獲取頁面2傳遞過來的數(shù)據(jù) 設(shè)置到 data中 this.setData({ msg: e.name }) }) } }); }, })
index2.js
Page({ onLoad: function () { // 被使用 wx.navigatorTo打開的頁面獲取獲取到一個(gè)事件通道對象 const EventChannel = this.getOpenerEventChannel(); // 觸發(fā)事件和傳遞參數(shù)到 頁面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:'海賊王'});// 可以直接存任意類型的數(shù)據(jù)
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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

This article brings you some related issues about WeChat mini programs. It mainly introduces how to use official account template messages in mini programs. Let’s take a look at them together. I hope it will be helpful to everyone.

Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only

Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation
