详解微信小程序页面跳转传递参数

更新时间：2016年12月08日 15:12:36 作者：dzp_coder

这篇文章主要介绍了详解微信小程序页面跳转传递参数，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

微信小程序的页面跳转,页面之间传递参数笔记，具体如下：
先上demo图:

为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.

目录如下:

三个页面,但是代码很简单.直接上代码.

<!--index.wxml--> 
<view class="btn-area"> 
 <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator> 
 <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator> 
</view>

index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.

navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

<!--navigatort.wxml--> 
<view style="text-align:center"> {{title}} </view>

在navigatort.wxml中通过js代码可以获取到title,代码如下

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

<!--redirect.wxml--> 
<view style="text-align:center"> {{title}} </view>

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

最后上两张跳转后的图.

1.跳转到新页面

2.在原来的页面打开

有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.

这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.

当然返回的结果是不一样的:

1.跳转到新页面,返回是回到之前的页面;

2.在原来页面打开,返回是回到上一级页面.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Javascript异步流程控制之串行执行详解
这篇文章主要给大家介绍了关于Javascript异步流程控制之串行执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
js核心基础之闭包的应用实例分析
这篇文章主要介绍了js核心基础之闭包的应用,结合具体实例形式分析了javascript闭包使用过程中常见问题及相应的解决方法,需要的朋友可以参考下
2019-05-05
javascript 如何生成不重复的随机数
javascript 如何生成不重复的随机数...
2007-11-11
一文详解JavaScript中this指向的问题
JavaScript中this指向的问题是面试中常常会问到的，所以本文就来通过一些简单的示例为大家详细讲讲，文中的示例代码讲解详细，需要的可以参考一下
2023-04-04
bootstrap是什么_动力节点Java学院整理
这篇文章主要介绍了bootstrap是什么，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
老生常谈原生JS执行环境与作用域
下面小编就为大家带来一篇老生常谈原生JS执行环境与作用域。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-11-11
js判断鼠标移入移出方向的方法
这篇文章主要为大家详细介绍了js判断鼠标移入移出方向的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
uniapp web-view组件双向通信的问题记录
本文主要介绍在uniapp中页面与webview组件内页面的双向通信问题,本文通过图文实例代码相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
js加减乘除精确运算方法实例代码
这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
详解Javascript中的Object对象
这篇文章主要介绍了详解Javascript中的Object对象,需要的朋友可以参考下
2016-02-02