微信小程序 页面传参实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 页面传参

  微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正。

  先上demo图:

  微信小程序 页面传参实例详解

为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.

目录如下:

微信小程序 页面传参实例详解

三个页面,但是代码很简单.直接上代码.

<span style="font-size:24px;"><!--index.wxml-->  
<view class="btn-area">  
 <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>  
 <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>  
</view></span>

index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.

navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

<span style="font-size:24px;"><!--navigatort.wxml-->

 <view style="text-align:center"> {{title}} </view></span>

在navigatort.wxml中通过js代码可以获取到title,代码如下

//navigatort.js

Page({  
 onLoad: function(options) {  
  this.setData({  
   title: options.title  
  })  
 }  
})
<span style="font-size:24px;"><!--redirect.wxml-->  
<view style="text-align:center"> {{title}} </view></span>
<span style="font-size:24px;">//redirect.js  
Page({  
 onLoad: function(options) {  
  this.setData({  
   title: options.title  
  })  
 }  
})</span>

最后上两张跳转后的图.

1.跳转到新页面

微信小程序 页面传参实例详解

2.在原来的页面打开

微信小程序 页面传参实例详解

有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.

这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.

当然返回的结果是不一样的:

1.跳转到新页面,返回是回到之前的页面;

2.在原来页面打开,返回是回到上一级页面.

微信开发文档

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
window.location.hash 使用说明
Nov 08 Javascript
JS定时关闭窗口的实例
May 22 Javascript
精通JavaScript的this关键字
May 28 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 #Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
微信小程序 获取相册照片实例详解
Nov 16 #Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python检测远程端口是否打开的方法
2015/03/14 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python 获取项目根路径的代码
2019/09/27 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python对Excel的读取的示例代码
2020/02/14 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
创业计划书撰写原则
2014/01/25 职场文书
施工安全协议书范本
2014/09/26 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
五年级学生期末评语
2014/12/26 职场文书
委托书格式要求
2015/01/28 职场文书
未婚证明范本
2015/06/15 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
安全生产标语口号
2015/12/26 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
python热力图实现的完整实例
2022/06/25 Python