• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

微信小程序页面跳转传递值

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序导航有两种形式：一种是在写在js中进行跳转，另一种是写在wxml页面中进行跳转。

1、js导航

 （1）、wx.navigateTo(OBJECT) ：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。


[javascript] view plain copy
 
  1. wx.navigateTo({  
  2.   url: 'test?id=1'  
  3. })  
获取传递的值：

[javascript] view plain copy
 
  1. //test.js  
  2. Page({  
  3.   onLoad: function(option){  
  4.     console.log(option.id)  
  5.   }  
  6. })  

 （2）、wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。


[javascript] view plain copy
 
  1. wx.redirectTo({  
  2.   url: 'test?id=1'  
  3. })  

 （3）、wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。


2、wxml导航

navigator：页面链接。


注：navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点背景色应为透明色


示例代码：

[css] view plain copy
 
  1. /** wxss **/  
  2. /** 修改默认的navigator点击态 **/  
  3. .navigator-hover {  
  4.     color:blue;  
  5. }  
  6. /** 自定义其他点击态样式类 **/  
  7. .other-navigator-hover {  
  8.     color:red;  
  9. }  
[html] view plain copy
 
  1. <view class="btn-area">  
  2.   <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>  
  3.   <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>  
  4. </view>  


获取页面传递的值：

[javascript] view plain copy
 
  1. // redirect.js navigator.js  
  2. Page({  
  3.   onLoad: function(options) {  
  4.     this.setData({  
  5.       title: options.title  
  6.     })  
  7.   }  
  8. })  

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
微信小程序相关资料整理发布时间：2022-07-18
下一篇：
二人pk答题小程序发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap