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


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与webservice的通信实现代码
Dec 25 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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指定函数参数默认值示例代码
2013/12/04 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python实现大文件排序的方法
2015/07/10 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
信息管理员岗位职责
2013/12/01 职场文书
初中体育教学反思
2014/01/14 职场文书
大学生村官演讲稿
2014/04/25 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
碧霞祠导游词
2015/02/09 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL