[转] 微信小程序 页面跳转 传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212
微信小程序的页面跳转,页面之间传递参数笔记.
先上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>
<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>
<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
- })
- }
- })
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.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>
<span style="font-size:24px;">//redirect.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})</span>
最后上两张跳转后的图.
1.跳转到新页面
2.在原来的页面打开
有没有发现一个细节,在原来的页面打开是不会出现返回按钮的,而跳转到新页面后会出返回按钮.
这是因为我写了两个页面.如果indexwxml不是一级页面,这里都会出现返回按钮.
当然返回的结果是不一样的:
1.跳转到新页面,返回是回到之前的页面;
2.在原来页面打开,返回是回到上一级页面.
http://blog.csdn.net/qq_31383345
[转] 微信小程序 页面跳转 传递参数的更多相关文章
- 微信小程序 页面跳转传递数据
点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap=" ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 微信小程序-页面跳转与参数传递
QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...
- 微信小程序——页面跳转及传参
小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...
- 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
}) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
- 微信小程序页面跳转的三种方式总结
原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...
- 微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 <navigator url="/page/navigate/navi ...
- 微信小程序页面跳转 的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...
随机推荐
- 「HNOI2013」切糕
题目链接 戳我 \(Solution\) 对于这道题,我们首先来看看没有\(D\)这个约束的该如何做. 我们考虑构造最小割模型. 其实直接贪心就好了,选出每条路径上的最小值就好了(路径就是将每层的同一 ...
- 洛谷P2763 试题库问题(最大流)
传送门 网络流界的一股清流啊……终于没那么变态了…… 考虑一下怎么建图.对于每一个类型,我们从$S$向他连边,容量为它所需的题数,表明它要可以有这么多题,对于每一道题目,我们从它对应的类型向他连边,容 ...
- centos下安装memcached并设置开机自动启动-两种方法
方法一: 安装memcachedyum install memcached 启动服务并初始化service memcached start -p 11211 -l 127.0.0.1 -d 设置mem ...
- VSLAM技术框架详述
最早的SLAM雏形是在军事(核潜艇的海底定位)上的应用,主要传感器是军用雷达.SLAM技术发展到如今已经几十年,目前以激光雷达作为主传感器的SLAM技术比较稳定.可靠,仍然是主流的技术方案.但随着最近 ...
- SLAM技术在国内的发展现状
近年来,由于扫地机的出现使得SLAM技术名声大噪,如今,已在机器人.无人机.AVG等领域相继出现它的身影,今天就来跟大家聊一聊国内SLAM的发展现状. SLAM的多领域应用 SLAM应用领域广泛,按其 ...
- Ubuntu系统安装WeChat
安装: 1.sudo apt install snapd snapd-xdg-open 2.sudo snap install electronic-wechat 运行: electronic-wec ...
- POJ1077 Eight A*
这个题扔到A*可也还行... 定义估价函数h():为每个数或空格的位置 到 最终状态中所在位置 的 曼哈顿距离 的 总和. 把状态压成一个九进制数,便于存储和判重. 然后记录方案可以记录一下此次的操作 ...
- opencv基本操作
src.convertTo(dst, type, scale, shift) 缩放并转换到另外一种数据类型: dst:目的矩阵 type:需要的输出矩阵类型,或者更明确的,是输出矩阵的深度,如果是负值 ...
- HihoCoder - 1172 SG函数应用
原文讲解很nice,我尝试换种观点 设背面朝上为F,否则T, 那么局面FFFFFF肯定为0 局面FTFFFF可以转为上面局面0,设为1 局面FFTFFF可以转到0,1,设为2 子游戏SG(x)=x 对 ...
- 选择IM云服务供应商
选择IM云服务供应商,其实最重要是有三个因素:费用.技术稳定性.以及后续运维服务. 对于不少创业公司来讲,可能需要找到成本和稳定性的最佳平衡点.目前国内不少IM云服务产品都推出了免费服务项目或者一定期 ...