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


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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
JavaScript 事件系统
Jul 22 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
微信小程序日历效果
Dec 29 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
phpfpm的作用和用法
2019/10/10 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
详解vue v-model
2020/08/31 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python中itertools的用法详解
2020/02/07 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
专升本个人自我评价
2013/12/22 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
房产继承公证书
2014/04/09 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers