微信小程序路由使用

前言
一、wx.switchTab(Object object)
- 示例代码
二、wx.reLaunch(Object object)
- 示例代码
三、wx.redirectTo(Object object)
- 示例代码
四、wx.redirectTo(Object object)
- 示例代码
五、wx.navigateBack(Object object)
六、EventChannel
总结

前言

在小程序中所有页面的路由全部由框架进行管理。

一、wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，在小程序插件中使用时，只能在当前插件的页面中调用

重要：这种方式url路径后不能带参数

示例代码

{"tabBar": {"list": [{"pagePath": "index","text": "首页"},{"pagePath": "other","text": "其他"}]}
}

<view><button bindtap="onSwitch">switch路由</button>
</view>

onSwitch(){wx.switchTab({url: '../other/other',success(event){console.log(event)console.log("成功回调")},fail(event){console.log(event)console.log("失败回调")},complete(event){console.log(event)console.log("调用成功、失败都会执行")}})},

二、wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面，在小程序插件中使用时，只能在当前插件的页面中调用

URL：需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’

重要：这种方式url路径后可以带参数

示例代码

<view><button bindtap="onReLaunch">reLaunch路由</button>
</view>

onReLaunch(){wx.reLaunch({url: '../other/other?id=1',//省略})},

 onLoad: function (options) {console.log("目标页面初始化")console.log(options.id)},

三、wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。在小程序插件中使用时，只能在当前插件的页面中调用

重要：这种方式url路径后可以带参数，但是不允许跳转到 tabbar（导航）页面

示例代码

<view><button bindtap="onRedirectTo">redirectTo路由</button>
</view>

  onRedirectTo(){wx.redirectTo({url: '../demo3/demo3?id=1'})},

onLoad: function (options) {console.log("非tabbar页面")console.log(options.id)},

四、wx.redirectTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。在小程序插件中使用时，只能在当前插件的页面中调用

重要：这种方式url路径后可以带参数，但是不允许跳转到 tabbar（导航）页面

示例代码

<view><button bindtap="onNavigateTo">navigateTo路由</button>
</view>

onNavigateTo(){wx.navigateTo({url: '../demo3/demo3?id=1',events: {// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据acceptDataFromOpenedPage: function(data) {console.log(data)},someEvent: function(data) {console.log(data)}},success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })}})},

onLoad: function (options) {console.log("非tabbar页面")console.log(options.id)const eventChannel = this.getOpenerEventChannel()eventChannel.emit('acceptDataFromOpenedPage', {data: 'test1'});eventChannel.emit('someEvent', {data: 'test2'});// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('acceptDataFromOpenerPage', function(data) {console.log(data)})},

五、wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
在小程序插件中使用时，只能在当前插件的页面中调用

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({url: 'B?id=1'
})// 此处是B页面
wx.navigateTo({url: 'C?id=1'
})// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({delta: 2
})

六、EventChannel

页面间事件通信通道

上面这些方法刚刚我们就已经使用过了，如：

总结

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

WX微信小程序路由API使用相关推荐

微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
【微信小程序控制硬件第12篇-项目篇】微信小程序蓝牙控制硬件应如何开始动手？为您全面解析微信小程序蓝牙API的使用；（附带demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序常用api总结
内容待写... ≧◔◡◔≦ 滑到底啦~ // 1.0 小程序接收传递过来的参数onLoad: function (options) {var str= options.str; //接收到的参数 st ...
uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
微信小程序之 ----API接口
1. wx.request 接口可在文件 wxs中操作,连接服务器处理数据参数 ① url ② data ③ header ④ method ⑤ dataType 回调 success, fail ...
微信小程序封装api请求步骤
小程序发起网络请求需用到 wx.request() 废话不多说直接开始封装 1.首先创建一个request文件夹里边创建一个api.js和request.js 2.封装的请求在request.js ...
微信小程序获取API实现功能
微信小程序渐渐覆盖生活的方方面面,工具类小程序也由于它实用与方便结合的优势受到大众追捧,小程序通过开放的API完善自身功能,类似获取地图API可以通过小程序获取定位,通过百度翻译API小程序可以制作翻 ...
微信小程序路由跳转详情
1.路由跳转微信小程序的路由跳转是通过两个栈堆实现的,这就导致了栈堆里最多储存十个页面,如果超过十个,会直接报错,所以要在必要的时候清空栈堆. wx.navigateTo:最常用的跳转,跳转到另一 ...

WX微信小程序路由API使用

微信小程序路由使用

前言

一、wx.switchTab(Object object)

示例代码

二、wx.reLaunch(Object object)

示例代码

三、wx.redirectTo(Object object)

示例代码

四、wx.redirectTo(Object object)

示例代码

五、wx.navigateBack(Object object)

六、EventChannel

总结

WX微信小程序路由API使用相关推荐

最新文章

热门文章