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


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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
动态加载jquery库的方法
Feb 12 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
新手vue构建单页面应用实例代码
Sep 18 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
React实现全选功能
Aug 25 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
PHP与SQL注入攻击[二]
2007/04/17 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
xml和web特殊字符
2009/04/28 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
自我鉴定书面格式
2014/01/13 职场文书
搞笑创意广告语
2014/03/17 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
旷工检讨书大全
2015/08/15 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
八年级作文之感恩
2019/11/22 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript