编程式导航

简介 Introduction

• 除了声明式导航，还可以利用导航组件对应的 API，实现编程式导航
• 采用自定义事件实现
• 需指定url属性
• 不需要指定后缀名
• 同声明式导航一样，在url后面拼接参数传递，并在目标页的onLoad中获取
• 还可以指定跳转结果的回调函数
• - 成功 success
• - 失败 fail
• - 完成 complete：无论是成功还是失败都会执行这个回调函数

switchTab

• 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

gotoCart(){
    wx.switchTab({
        url:'/pages/photo/photo'
        //url:'../photo/photo'
    })
}

navigateTo

• 保留当前页面，跳转到应用内的某个普通页面；不能跳到 tabbar 页面

gotoTest(){
    wx.navigateTo({
        url:'../test/test',
        success:()=>{
            console.log('success');
        },
        fail:()=>{
            console.log('fail');
        },
        complete:()=>{
            console.log('complete');
        }
    })
}

• 携带参数

gotoTest(){
    wx.navigateTo({
        url:'../test/test?name=gl&age=18'
    })
}

navigateBack

• 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
• 需要指定返回的页面数delta；如果 delta 大于现有页面数，则返回到首页

backToHome(){
    wx.navigateBack({
        delta:1
    })
}

• 使用普通组件，绑定单击事件，在事件处理函数中使用API
• 使用自定义数据指定参数
• 个人中心页 wxml - 绑定事件

<view bind:tap="toTeam" data-bgc="#908" data-title="message" class="item">
    <text class="iconfont icon-clipboard icon"></text>
</view>

• 个人中心页 js- 事件处理函数，获取自定义数据并导航

toTeam(e){
    let para=e.currentTarget.dataset
    wx.navigateTo({
        url: '../target/target?title='+para.title+'&bgc='+para.bgc,
    })
}

• 目标页 js - 获取参数，设置标题和背景颜色

onLoad(options){
    wx.setNavigationBarTitle({
        title:options.title
    })
    wx.setNavigationBarColor({            
        frontColor: '#ffffff',//MUST
        backgroundColor:options.bgc
    })
}