[移动开发]小程序 导航跳转/路由跳转

• 声明式导航：<navigator>标签

1. url：必须 "/" 开头（ 跳转的路径）
2. open-type：必须为 navigator (跳转的方式)。跳转到非tabBar页面可以不写此属性
3. 后退 / 返回上一级：
   1. open-type="navigateBack"
   2. delta："1"，返回上N级（返回的层级为通过navigator标签跳转的层级）。不写默认返回上一级

   // 要进行跳转的页面
   <navigator url="/pages/myfood/myfood">navigator页面跳转页面后，返回上一级(此页面)</navigator>
   // 被跳转到的页面（执行返回上一级
   <navigator open-type="navigateBack" delta="1">返回上N级</navigator>
   

• 编程式导航：（ 调用小程序api 跳转 ）

1. wx.switchTab()： 跳转到 tabBar页面
2. wx.navigateTo()：?跳转到 非tabBar页面
3. wx.navigateTo：返回到上N级

//页面
<button bindtap="goTabBarPage"  size="mini">跳转到tabBar页面</button>
<button bindtap="goPage"  size="mini">跳转到非tabBar页面</button>
//js： 跳转到非tabBar页面 
goTabBarPage(){
    wx.switchTab({
        url: '/pages/logs/logs', //必填
        success: () => {}, //接口调用成功后的回调
        fail: () => {}, //接口调用失败后的回调
        complete: () => {}, //接口调用结束后的的回调（成功、失败都会执行）
    })
}

//js： 跳转到tabBar页面 
goPage(){
    wx.navigateTo({
        url: '/pages/logs/logs', //必填
        success: () => {}, //接口调用成功后的回调
        fail: () => {}, //接口调用失败后的回调
        complete: () => {}, //接口调用结束后的的回调（成功、失败都会执行）
    })
}
// js：返回到上N级
goBack() {
    wx.navigateBack({
        delta: 1, //返回到上一级（返回的层级数）
    })
    //wx.navigateBack()//不写 默认返回上一级
},

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读