微信小程序 --- 页面跳转


第一种:wx.navigateTo({}); 跳转

注意:这种跳转回触发当前页面的 onHide 方法,将当前页面隐藏,然后显示跳转页面。所以可以返回,返回的时候触发 onShow方法进行显示:

(项目的底部导航使用的就是 wx.navigateTo 方法,将页面进行隐藏)

<view bindtap="clicktap">
    文章列表
</view>

page.js

//获取应用实例
const app = getApp()
Page({
  data: {  
  }, 
  clicktap:function(){
      wx.navigateTo({
          url:'../details/details'
      })
  }
})

参数传递:

clicktap:function(){
    wx.navigateTo({
        url:'../details/details?id=1'
    })
}

多个参数使用 "&"  :

wx.navigateTo({
    url:'../details/details?id=2&title=你好'
})

跳转页面接受参数:使用 onLoad 方法里面的 option :

onLoad:function(options){
    console.log(options);
    console.log(options.id);
}

效果:

这个id 还可以渲染到页面上。

使用标签进行跳转

<navigateTo url="../details/details?id=2">
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

同样使用跳转页的 onLoad 方法里面 options 来接受。

在标签里使用 redirectTo:

<navigateTo url="../details/details?id=2" redirect>
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

 

第二种:wx.redirectTo 跳转:

注意:这种跳转,不会触发当前页面的 onHide 方法,也就是把当前页面直接给卸载掉了,然后替换为新页面。所以不存在返回这种情况。

 

第三种:wx.swithTab跳转

在微信的页面跳转过程中,如果需要跳转到tab的页面,使用 wx.navigateTo 或者 wx.redirectTo 都是无法完成跳转的,此时就必须使用 wx.switchTab方法来进行跳转。

文档说明:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxrelaunchobject

代码:

wx.switchTab({
  url: '../index/index'
})

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM