微信小程序系列3——页面跳转详解
前言
首先,微信页面跳转的是一个页面栈进栈出栈的过程,也可以简单的理解对页面跳转的操作就是一个栈的操作。
微信小程序主要一下两类样式的跳转(JS、WXML控件):
JS控制的跳转:
- navigation 栈的形式(导航栏)
- tabBar 标签栏
- 其他
WXML模板内控件控制的跳转方法
- navigator
一、navigation页面跳转
1.wx.navigateTo({ url: ‘pageA’ })
navigateTo方式 跳转的应用内非 tabBar 的页面的路径,页面之间不能像IOS或者Android对页面进行赋值进行传递对象,只能像Web的URL地址一样,在路径后可以带参数。
1)参数和路径之间使用?分隔,参数键与参数值用=相连。
wx.navigateTo({url: 'pageA?id=1'
})
2)不同参数用&分隔
wx.navigateTo({url: 'pageA?id=1&token=222'
})
navigateTo的导航栏默认有返回按钮,返回到上一个页面。
2.wx.navigateBack({})
navigateBack和navigateTo是一对,navigateTo是页面进栈操作,navigateBack是页面出栈操作。navigateBack默认返回到上一级页面(内部参数:delta:1)。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
delta | Number | 1 | 返回的页面数;如果delta大于现在页面,则页面栈的第一个页面 |
// 此处是A页面
wx.navigateTo({url: 'B'
})// 此处是B页面
wx.navigateTo({url: 'C'
})// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({delta: 2// delta > 2 都会返回A页面 A页面之前没有navigate的页面
})
二、tabBar页面跳转
tabBar中的页面需要在app.json中配置,tabBar页面最少2页面,最多5个页面。tabBar之间的跳转采用wx.switchTab({ url: ‘’ })的方式,默认情况下tabBar之间的页面跳转,只需要点击tabBar上对应的控件就可以相互跳转。(注:tabBar之间的跳转,路径后不能带参数)
wx.switchTab({url: 'switchA',})
tabBar上的页面的跳转只能采用switchTab的方式。其他页面跳转到tabBar上也必须采用switchTab的方式跳转。
三、其他页面跳转
1.wx.redirectTo({url: ‘’})(跳转的下一个页面,存在默认返回按钮)
redirectTo跳转非tabBar页面的路径,路径后可以带参数。(带参数可以参考:navigateTo)
wx.redirectTo({url: 'redirectA?id=1'
})
跳转下一个页面默认有返回按钮,返回到上一个页面的再上一层。
2.wx.reLaunch({url: ‘’})(跳转的下一个页面,有一个返回首页的按钮)
redirectTo跳转非tabBar页面的路径,路径后可以带参数。(带参数可以参考:navigateTo)
wx.reLaunch({url: 'reLaunchA?id=1'
})
跳转下一个页面默认有返回首页,返回到首页。(页面栈的第一个页面)
四、navigator组件—页面跳转(WXML内组件,其他的都是JS中操作)
navigator作为一个跳转的WXML模板中的控件,其他几种的操作都是在JS中的操作。下边详细介绍navigator控件的属性和使用说明
属性 | 类型 | 默认值 | 描述说明 |
---|---|---|---|
target | String | 当前小程序 | 在哪个目标程序上发生跳转,默认当前小程序 |
url | String | 当前小程序内的跳转链接 (后面可以携带参数,除switchTab之外) | |
open-type | String | navigate | 跳转方式 |
delta | Number | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 | |
app-id | String | 当target="miniProgram"时有效,要打开的小程序 appId | |
path | String | 当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 | |
extra-data | Object | 当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。 | |
version | version | release | 当target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class="none"时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 |
bindsuccess | String | 当target="miniProgram"时有效,跳转小程序成功 | |
binderror | String | 当target="miniProgram"时有效,跳转小程序失败 | |
bindcomplete | String | 当target="miniProgram"时有效,跳转小程序完成 |
target 的合法值
target值 | 描述说明 |
---|---|
self | 当前小程序 |
miniProgram | 其它小程序 |
open-type 的合法值:
open-type值 | 描述说明 |
---|---|
navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
redirect | 对应 wx.redirectTo 的功能 |
switchTab | 对应 wx.switchTab 的功能 |
reLaunch | 对应 wx.reLaunch 的功能 |
navigateBack | 对应 wx.navigateBack 的功能 |
exit | 退出小程序,target="miniProgram"时生效 |
version 的合法值
值 | 说明 |
---|---|
develop | 开发版 |
trial | 体验版 |
release | 正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 |
下面是navigator的例子:
<!-- sample.wxml -->
<view class="btn-area"><navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator><navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator><navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator><navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>
微信小程序页面跳转的功能基本就这些内容,微信小程序页面跳转方式和Android、iOS的方式非常相似之处,可以相互结合理解。
本文章的内容参考自《微信官方文档》
持续更新中……
微信小程序系列3——页面跳转详解相关推荐
- 微信小程序两个页面跳转,传值
微信小程序两个页面跳转,传值 在小程序界面,需要点击后跳转界面并且传递一个值. 具体实现如下:首先在wxml界面需要绑定事件,绑定需要传的值 a.wxml `<view bindtap=&quo ...
- 微信小程序开发【六】-- wxss详解
系列文章目录 微信小程序开发[一]-- 初识小程序 传送门 微信小程序开发[二]-- 小程序入门 传送门 微信小程序开发[三]-- 项目结构概述 传送门 微信小程序开发[四]-- 配置详解 传送门 微 ...
- 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解
微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...
- 《微信小程序:开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一 书中的第3章,第3.4节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
- 微信小程序和百度的语音识别接口详解
介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 ...
- 微信小程序自定义组件子传父详解(多图)
微信小程序自定义组件子传父详解 前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
- 微信小程序php后台支付,微信小程序 支付功能实现PHP实例详解
微信小程序 支付功能实现PHP实例详解 前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
- 腾讯小程序 java编写_微信小程序 使用腾讯地图SDK详解及实现步骤
微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
- 微信小程序 使用腾讯地图SDK详解及实现步骤
信小程序 使用腾讯地图SDK详解及实现步骤 微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1.申请 ...
最新文章
- SpringBoot学习系列之一
- 定位低效率执行SQL
- 视频领域的Instagram:Viddy用户突破2600万
- 我写了一个开源项目AlphabetPy
- div+css中常见的问题
- java8的stream流操作的数据结构
- Office365下部署SharePoint站点集
- HDU 5971 2016ICPC大连 A: Wrestling Match(二分图判断)
- 前端动画大全:css的transition、css3的animation、Jquery的animate、js的setInterval
- Ubnutu20.04安装Tensorflow
- 读博天赋更重要还是努力更重要?
- Java程序设计(面向对象)- 基本概念
- 三维数据入库发布流程之3dMAX数据
- 关于程序设计大赛环境部署的WBS图
- Flutter 实现一款简单的音乐播放器
- item_half - 淘宝每日半价接口
- 行业分析-全球与中国无线键盘和蓝牙耳机市场现状及未来发展趋势
- FZU11685 之 跑跑卡丁车
- 性能测试之jmeter(下载安装)
- UEStudio/UltraEdit 的语法高亮文件 (*.uew)
热门文章
- hive只复制表结构不复制表数据
- 广东省第四届“强网杯”网络安全大赛(“泄露的秘密WP”)
- sqlserver数据库如何快速查看表结构sql
- 西南政法大学计算机课程要求,新高考西南政法大学需要选哪些课程?附西南政法大学选科要求...
- python 建筑业_建筑行业主流CFD软件大比拼
- LWIP轻量级TCPIP协议栈的移植
- 记一次亲身经历的高速三车追尾及处理全流程
- Chino 操作系统开发日志 (1) - 为 IoT 而生
- 解决eclipse中没有js代码提示的问题
- 【git】git忽略文件 取消忽略文件