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


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 类、命名空间、代码组织代码
Jul 31 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
React如何创建组件
Jun 27 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和MySQL保存和输出图片
2006/10/09 PHP
PHP小技巧之函数重载
2014/06/02 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
化妆品促销方案
2014/02/24 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
销售总经理岗位职责
2014/03/15 职场文书
语文教育专业求职信
2014/06/28 职场文书
2014年设计师工作总结
2014/11/25 职场文书
大学生学期个人总结
2015/02/12 职场文书