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

高洛峰
高洛峰Original
2017-02-18 11:33:502041browse

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' 
})

Get the passed value:

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

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

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


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

(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 0e1e9be57d3815196e4c83d329f1e05f should be transparent

Sample code:

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

##
<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>

Get the value passed by the page:

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

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!

Statement:
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