微信小程序 编程式跳转、页面跳转组件navigator、插件跳转组件functional-page-navigator、页面EventChannel通信
·
获取路由器:this.router|this.pageRouter
获取当前页面栈:getCurrentPages()
数组中第一个元素为首页,最后一个元素为当前页面
不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成
1、编程式跳转
小程序中页面栈最多十层。
初始化:小程序打开的第一个页面,触发:onLoad, onShow
(1)跳转到tabBar页面
wx.switchTab({ 此时原来的页面栈会被清空
url:"app.json中tabBar字段定义的页面", 路径后不能带参数
success, 成功回调
fail, 失败回调
complete 调用结束回调(调用成功、失败都会执行)
})
Tab 切换对应的生命周期(以 A、B页面为Tabbar页面,C是从A页面打开的页面,D页面是从C页面打开的页面为例):
当前页面 路由后页面 触发的生命周期(按顺序)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B(再次打开) A.onHide(), B.onShow()
C A C.onUnload(), A.onShow()
C B C.onUnload(), B.onLoad(), B.onShow()
D B D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入) A D.onUnload(), A.onLoad(), A.onShow()
D(从转发进入) B D.onUnload(), B.onLoad(), B.onShow()
(2)关闭所有页面,打开到应用内的某个页面
wx.reLaunch({url:"可携带参数path?key=value&key2=value2",success,fail,complete})
之前页面触发:onUnload
之后页面触发:onLoad,onShow
(3)关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面。
wx.redirectTo({url:"可携带参数",success,fail,complete})
之前页面触发:onUnload
之后页面触发:onLoad,onShow
(4)保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。
wx.navigateTo({
url:"可携带参数",events:{监听页面间通信钩子}
,success,fail,complete
})
之前页面触发:onUnload
之后页面触发:onShow
(5)关闭当前页面,返回上一页面或多级页面。
wx.navigateBack({
delta:"1", 返回的页面索引,默认为1,
可通过getCurrentPages()获取当前页面栈,数组中第一个元素为首页,最后一个元素为当前页面。
不要在App.onLaunch的时候调用getCurrentPages(),此时page还没有生成。
success,fail,complete
})
之前页面触发:onHide
之后页面触发:onLoad,onShow
编程式跳转方式二:使用this.pageRouter|this.router
this.pageRouter|this.router获得的页面路由器对象进行跳转,跳转方式和wx.的方式相同
优点:
this.pageRouter获得的页面路由器对象具有更好的基路径稳定性
区别:
和wx.跳转的区别
Page({
wxNavAction: function () {
wx.navigateTo({
url: './new-page'
})
},
routerNavAction: function () {
this.pageRouter.navigateTo({
url: './new-page'
})
}
})
页面index/index代码如上
如果此时已经跳转到了一个新页面pack/index,然后才调用到上面的wxNavAction方法,跳转的新页面路径将是pack/new-page;
而如果调用的是 routerNavAction 方法,跳转的新页面路径仍然是 index/new-page 。
换而言之,this.pageRouter 获得的路由器对象具有更好的基路径稳定性,通常情况下,使用this.pageRouter.navigateTo代替wx.navigateTo是更优的。
this.pageRouter和this.router的区别
获得同样的页面路由器对象
在自定义组件中调用:
this.pageRouter将相对于自定义组件所在的页面来进行路由跳转
this.router相对于自定义组件自身的路径。
2、获取路径参数
在onLoad生命周期函数中接收
onLoad:function(option形参代表参数)
{
option.query
}
3、插件跳转组件functional-page-navigator
<functional-page-navigator
version 跳转到的小程序版本,线上版本必须设置为release
develop 开发版
trial 体验版
release 正式版
name 要跳转到的功能页
loginAndGetUserInfo 用户信息功能页
requestPayment 支付功能页
chooseAddress 收货地址功能页
chooseInvoice 获取发票功能页
chooseInvoiceTitle 获取发票抬头功能页
args 功能页参数,参数格式与具体功能页相关
bindsuccess 功能页返回,且操作成功时触发,detail格式与具体功能页相关
bindfail 功能页返回,且操作失败时触发,detail格式与具体功能页相关
bindcancel 因用户操作从功能页返回时触发
>
...触发跳转内容
</functional-page-navigator>
4、页面EventChannel通信
只在wx.navigateTo中有效
wx.navigateTo({
url: 'test?id=1',
events: {
fn: function(data) {
console.log(data)
}
},
success: function(res) {
res.eventChannel.emit('fn2', { data: 'test' })
}
})
跳转的页面
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('fn', {data: 'test'});
监听navigateTo触发的事件
eventChannel.on('fn2', function(data) {
console.log(data)
})
}
})
监听一次事件
eventChannel.once("监听名称",fn)
取消监听事件
eventChannel.off("监听名称",fn) 不给fn取消所有监听函数
navigator组件跳转:
<navigator url='跳转路径'>xxx</navigator>
target:默认为"self",在哪个目标上发生跳转,默认当前小程序
"miniProgram" 跳转其他小程序
open-type:跳转方式
navigate:对应wx.navigateTo或wx.navigateToMiniProgram的功能
redirect:对应wx.redirectTo的功能
switchTab:对应wx.switchTab的功能
reLaunch:对应wx.reLaunch的功能
navigateBack:对应wx.navigateBack的功能
exit:退出小程序,target="miniProgram"时生效
跳转小程序:
app-id:target="miniProgram"时有效,要打开的小程序 appId
path:target="miniProgram"时有效,打开的页面路径,如果为空则打开首页
extra-data:target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow()中获取到这份数据。
version:target="miniProgram"时有效,要打开的小程序版本
develop:开发版
trial:体验版
release:正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。
bindsuccess:target="miniProgram"时有效,跳转小程序成功回调函数名称
bindfail:target="miniProgram"时有效,跳转小程序失败回调函数名称
bindcomplete:target="miniProgram"时有效,跳转小程序完成回调函数名称
跳转页面:
url:跳转路径
delta:默认为"1",open-type为'navigateBack'时有效,表示回退的层数
跳转样式:
hover-class:指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagation:是否阻止本节点的祖先节点出现点击态
hover-start-time:默认为50,按住后多久出现点击态,单位毫秒
hover-stay-time:默认为600,手指松开后点击态保留时间,单位毫秒

代码示例:
待跳转页面wxml:
<!--pages/news/news.wxml-->
<import src='./new-temp/new-temp.wxml' />
<block wx:for="{{newsData}}" wx:for-item="item" wx:for-index="index" wx:key="key">
<view bindtap='goNewsDetail' data-newsid='{{item.newsId}}'>
<template is='temp' data='{{...item}}'/>
</view>
</block>
</view>
待跳转页面js:
var useData=require("../data/newsdata")
Page({
data: {
flag:true
},
onLoad: function (options) {
this.setData({
newsData:useData.newsData
})
},
goNewsDetail:function(event)
{
wx.navigateTo({
url: 'news-detail/news-detail?id=' + event.currentTarget.dataset.newsid
})
},
goNews:function(event)
{
console.log("跳转");
wx.navigateTo({
url:'../news/news'
})
}
})
跳转页面js:
// pages/news/news-detail/news-detail.js
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.id);
}
})
更多推荐



所有评论(0)