Home > WeChat Applet > Mini Program Development > Detailed explanation of several methods of transferring values ​​​​in WeChat applet page jumps

Detailed explanation of several methods of transferring values ​​​​in WeChat applet page jumps

高洛峰
Release: 2017-02-18 11:33:50
Original
2010 people have browsed it

This article mainly introduces relevant information on several methods of jumping and passing values ​​on the WeChat mini program page. Friends in need can refer to

WeChat mini program page jump and passing value

There are two forms of WeChat applet navigation: one is written in js to jump, and the other is written in wxml page to jump.

1. js navigation

(1), wx.navigateTo(OBJECT): Keep the current page, jump to a page in the application, use wx.navigateBack to return to the original page .

微信小程序 页面跳转传递值几种方法详解


##

wx.navigateTo({ 
 url: 'test?id=1' 
})
Copy after login

Get the passed value:

//test.js 
Page({ 
 onLoad: function(option){ 
  console.log(option.id) 
 } 
})
Copy after login

(2), wx.redirectTo(OBJECT): Close the current page and jump to a page within the application.

微信小程序 页面跳转传递值几种方法详解


wx.redirectTo({ 
 url: 'test?id=1' 
})
Copy after login

(3), wx.navigateBack(OBJECT) : Close the current page and return to the previous page or multi-level page. You can get the current page stack through getCurrentPages()) and decide how many levels to return.

2. wxml navigation

navigator: page link.


微信小程序 页面跳转传递值几种方法详解

Note: navigator-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, The background color of the child nodes of should be transparent

Sample code:

/** wxss **/ 
/** 修改默认的navigator点击态 **/ 
.navigator-hover { 
  color:blue; 
} 
/** 自定义其他点击态样式类 **/ 
.other-navigator-hover { 
  color:red; 
}
Copy after login

##
<view class="btn-area"> 
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> 
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator> 
</view>
Copy after login

Get the value passed by the page:

// redirect.js navigator.js 
Page({ 
 onLoad: function(options) { 
  this.setData({ 
   title: options.title 
  }) 
 } 
})
Copy after login

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more detailed explanations on several methods of page jump and value transfer in WeChat mini programs, please pay attention to the PHP Chinese website for related articles!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template