页面导航

Navigator

概述: 跳转到普通页面; 跳转到标签页; 跳转到外部小程序; 还可以指定返回的层级; 可以使用文字；也可以使用图片等其他元素

声明式导航

使用导航组件 <navigator> 导航，类似HTML的 <a>

导航组件的使用都有对应的API

导航组件
属性	说明
target	打开位置 self：当前小程序；默认 miniProgram：外部小程序
url	跳转链接\|地址；相对地址或绝对地址
open-type	跳转类型 navigate：默认，也可以是外部小程序 switchTab：到标签页
delta	数字，后退的层级；默认是1，可以省略
app-id	外部小程序的AppID；在更多资料中获取
path	外部小程序的页面
extra-data	传递给外部小程序的数据

无参导航

跳转到普通页面 - 仅指定 url

<navigator url="../test/test">To Page Test</navigator>

跳转到外部小程序 - 指定app-id和target

<navigator app-id="wx91d27dbf599dff74" target="miniProgram">To JD</navigator>

跳转到标签页 - 指定open-type

<navigator url="../photo/photo" open-type="switchTab">To Tab Photo </navigator>

后退1页 - 省略delta

<navigator open-type="navigate">Back</navigator>

带参导航

拼接参数 - 在路径 url 后面以值对 key-value 的形式拼接参数

参数和url之间使用 ? 连接

多个参数以 & 分隔

静态数据 - url?name=value&...

<navigator url="../test/test?name=gl">To Page Test</navigator>

动态数据 - 使用数据绑定

<navigator url="../test/test?name={{uname}}">To Page Test</navigator>

目标页获取参数 - 传递的参数在目标页的生命周期函数 onLoad 中通过形参 option 获取

onLoad(option) {
    console.log(option);
}

请尽量使用调试器的"预览"体验完整功能

模拟器底部状态栏，默认显示"页面路径"，也可以切换到"页面参数"观察页面之间的参数传递情况

编程式导航

使用小程序的API导航

采用自定义事件实现

需指定url属性

不需要指定后缀名

还可以指定跳转结果的回调函数

- 成功 success

- 失败 fail

- 完成 complete：无论是成功还是失败都会执行这个回调函数

wx.switchTab(Object object)

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

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

wx.navigateTo(Object object)

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

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

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

需要指定返回的页面数delta；如果 delta 大于现有页面数，则返回到首页

返回上一页

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

带参导航

同声明式导航一样，在url后面拼接参数传递，并在目标页的onLoad中获取

拼接参数

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

目标页获取参数

onLoad(option: any) {
    console.log(option);
}

综合案例：分别使用声明式导航和编程式导航，完成个人中心页到各个子模块/子页面的导航；相关API，请访问 setNavigationBarTitle()、wx.setNavigationBarColor()

实现1：声明式导航

使用<navigator>，修改个人中心静态页面，采用列表渲染定制导航；根据不同的导航项，动态设置目标页的导航标题

该案例也适合客户、产品详情页，如：使用一个页面展示不同的商品内容

个人中心页 wxml - 导航节点示例，其它略

<navigator url="../target/target?title=favorite&bgc=#889900" class="item">
    <text class="iconfont icon-like icon"></text>
</navigator>

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

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

实现2：编程式导航

使用普通组件，绑定单击事件，在事件处理函数中使用导航API

个人中心页 wxml - 绑定事件

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

个人中心页 js- 事件处理函数

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

目标页 js- 同上

...