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


Posted in Javascript onJanuary 12, 2017

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

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

1、js导航

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

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

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

获取传递的值:

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

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

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

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

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

2、wxml导航

navigator:页面链接。

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

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

示例代码:

/** 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>

获取页面传递的值:

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 #Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 #Javascript
js实现微博发布小功能
Jan 12 #Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python深入学习之上下文管理器
2014/08/31 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python request使用方法及问题总结
2020/04/26 Python
python开根号实例讲解
2020/08/30 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
财务经理岗位职责
2013/11/09 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
干部考核工作总结
2015/08/12 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL