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


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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
详解javascript中的Error对象
Apr 25 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue-父子组件和ref实例详解
Nov 10 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
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
限制文本字节数js代码
2007/03/06 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python七夕浪漫表白源码
2019/04/05 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
高中学生干部学习的自我评价
2014/02/21 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
网络营销计划书
2015/01/17 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers