open-type跳转方式对应点击事件功能区别
navigator（默认）wx.navigateTo

跳转到应用内的某个页面

可返回原页面

但不可跳转到Tab页

返回上一页

wx.navigateBack({
  delta: 2
})
redirectwx.redirectTo关闭当前页面，跳转到应用内的某个页面，不能返回原页
switchTabwx.switchTab可跳转到tab菜单页
reLaunch 
wx.reLaunch({
  url: '/pages/index/index',

}）
关闭所有页面，打开到应用内的某个页面
navigateBack 
wx.navigateBack({
  delta: 2
})
返回上一页
exittarget="miniProgram"时生效退出小程序

一、navigator（静态跳转，相当于html中的<a>）

​ 

注意：这种方式，不能跳转到tabbar页面（底部菜单导航）

<view>
    【默认】：不能跳转到tabbar页面（底部菜单导航）
</view>
<view style="height: 30px;"></view>
<view>
    <navigator url="/pages/my/my" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
        不能跳转到“我的”>
    </navigator>
</view>
<view style="height: 30px;"></view>


<view>
    【switchTab】：可跳转tabbar页面(底部菜单导航)
</view>
<view style="height: 30px;"></view>

<view>
    <navigator url="/pages/my/my" open-type="switchTab" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
        可跳转到“我的”>
    </navigator>
</view>
<view style="height: 30px;"></view>


<view>
    用【点击事件】实现跳转
</view>
<view style="height: 30px;"></view>

<view>
    <button type="primary" bindtap="urlClick">
        点击事件跳转到【我的】
    </button>
</view>

二、index.json代码

    urlClick() {

        // ========= 不可跳转到tabbar页面（底部菜单导航）
        wx.navigateTo({
            url:"/pages/my/my"
        })

        // ========= 可跳转到tabbar页面（底部菜单导航）
        wx.switchTab({
            url:"/pages/my/my"
        })

        // ========= 可传参数：可跳转到tabbar页面（底部菜单导航）
        wx.reLaunch({
            url:"/pages/my/my?id=888"
        })

    },

# 微信小程序 # 小程序
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟