小程序跳转

小程序常用的两种跳转方式

(一)

<!-- 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 -->
    wx.navigateTo
    <!-- url:'../Atiao2/index' -->
    wx.navigateTo({
      url:'/pages/Atiao2/index'
    })

<!-- 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 -->
    wx.redirectTo
    wx.redirectTo({
      url: '/pages/Atiao2/index'
    })

<!-- 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 -->
    wx.switchTab
    wx.switchTab({
      url: '/pages/Atiao2/index'
    })

<!-- 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。-->
    wx.navigateBack
    wx.navigateBack({
      delta: 2
    })

第一种方式 官方跳转文档

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

(二)

<!-- open-type=""  引号中的值与第一种方式中的一样儿   去掉(wx.) -->
 <navigator open-type="navigate" url="/pages/Atiao2/index">
     <button >另一种</button>
 </navigator>

第二种方式 官方跳转文档

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

注:

 <!-- hover-class="none"  去掉点击的时候的默认样式。  也可以自己写样式(用自己的class名代替none,然后在wxss中书写样式即可) -->

跳转小示例

<!-- wxml -->
    <button bindtap="tiao">点击跳转</button>

    <navigator open-type="navigate" url="/pages/Atiao2/index">
        <button >另一种</button>
    </navigator>
    <!-- js -->
      tiao:function(){
        console.log("这里是跳转")
        wx.navigateTo({
          // url:'../Atiao2/index'
          url:'/pages/Atiao2/index'
        })
      },

 

posted @ 2020-07-08 10:30  野鹤亦闲云  阅读(177)  评论(0编辑  收藏  举报