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


Posted in Javascript onDecember 08, 2016

微信小程序的页面跳转,页面之间传递参数笔记,具体如下:
先上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就是跳转到新页面.都可以携带参数.

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检查日期格式的函数[比较全]
Oct 17 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
js实现缓动动画
Nov 25 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 #Javascript
原生js编写焦点图效果
Dec 08 #Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 #Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 #Javascript
Vue自定义指令介绍(2)
Dec 08 #Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 #Javascript
解析利用javascript如何判断一个数为素数
Dec 08 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
jquery 上下滚动广告
2009/06/17 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
公司承诺书怎么写
2014/05/24 职场文书
社会实践活动总结
2015/02/05 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
windows安装python超详细图文教程
2021/05/21 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
MySQL 字符集 character
2022/05/04 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python