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


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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
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
介绍几个array库的新函数 php
2006/12/29 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php限制ip地址范围的方法
2015/03/31 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
matplotlib绘图实例演示标记路径
2018/01/23 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python3实现磁盘空间监控
2018/06/21 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
零基础小白多久能学会python
2020/06/22 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
八一慰问活动方案
2014/02/07 职场文书
黄河象教学反思
2014/02/10 职场文书
求职信怎么写范文
2014/05/26 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
环境建议书
2015/02/04 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL