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


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
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
Vue声明式渲染详解
May 17 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 建设银行登陆键盘
2008/06/10 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Python实现简单猜数字游戏
2021/02/03 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
销售辞职报告范文
2014/01/12 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
新手入门Mysql--概念
2021/06/18 MySQL