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

第一种：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'
})