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


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 相关文章推荐
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue实现简单学生信息管理
May 30 Javascript
js编写简易的计算器
Jul 29 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
python九九乘法表的实例
2017/09/26 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
什么是python类属性
2020/06/10 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB