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


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 28 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
angular简介和其特点介绍
Jan 29 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jQuery实现大图轮播
Feb 13 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php的一个简单加密解密代码
2014/01/14 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
党支部书记先进事迹
2014/01/17 职场文书
大学毕业感言50字
2014/02/07 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
紧急迫降观后感
2015/06/15 职场文书
单位车辆管理制度
2015/08/05 职场文书
采购部年度工作总结
2015/08/13 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB