一个C#程序员学习微信小程序路由的笔记

　　路由你们应该都知道，在微信小程序也是有的，毕竟它是单页面应用程序。在WeChat中有五种跳转方式，分别是wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack。今天咱们就说一说 如何使用这几个API来跳转页面，而且咱们还要学习如何进行传参，还要知道页面栈这个知识。 

　　在此以前，必定要学习下页面栈这个东西，要否则你就废了，小程序的页面栈最多能够存放10个页面，当等于10的时候，你就没法再用 navigateTo API的时候，你就没法在进行跳转了，由于它是原页面保留，在原来的页面上面进行添加的。

　　若是你还不懂的话，这么说吧，好比使用navigateTo从A页面跳转了B，又从B跳转到了C，最后从C跳转到了A那这个页面栈就已经到达了3个！我以为已经说的差很少了。

 

　　但若是你使用了 redirectTo就不同了，就在上面的实例中，假如咱们从B跳转到了C使用了redirectTo那么就至关于有两个页面栈，由于使用它将会替换当前页面。

　　说了这么多，就是想讲下各类跳转方式，它的做用不一样，因此不适当的使用就会让客户懵逼。下面是我总结路由API的做用。

navigateTo, redirectTo 只能打开非 tabBar 页面（一个是有回退按钮，后者没有）

。switchTab 只能打开 tabBar 页面。

 　　好比想要跳转，你能够给按钮一个事件，而且在Js中配对方法，就行了，代码实现是这样的。

<button class="btn-ask" bindtap='mytab'><image src='/images/btn_ask.png' /></button>

　　Js的实现也很简单，就是经过wx对象的方法来进行跳转（上面说的跳转，都有！）

mytab:function(){
    wx.showToast({
      title: '加载中', icon: 'loading', duration: 1000 }) wx.navigateTo({ url: '../rediters/redi' }) }

除了经过调用方法的形式，还能够经过  navigator  标签，这个标签就很是舒服了，由于咱们的Js一般是要和后端的数据交互，根本不要这些垃圾代码，show代码！

<navigator url='../rediters/redi' hover-class="changestyle" redirect>hahaha</navigator> //那个hover-class的样式 是点击效果！

带上  redirect 就没有返回按钮，反而就有了。如今咱们说一下在跳转的时候如何带参跳转！

只须要在定义的时候带上参数就能够了

wx.navigateTo({
      url: '../rediters/rediters?queryId=1' })

而后在Page中的Load事件中获取。

　　onLoad: function (options) {
　　　　console.log(options)
　　},

但如今问题来了，如何传递多个参数，或者传递个对象，而且如何接收呢？

wx.navigateTo({
      url: '../rediters/rediters?queryId=1&State=2&name=3' })

在传递的时候，写上多个参数，那么在load事件的 Options中，它就变成了一个对象。

 传递一个对象也可这个差很少。只不过你能够经过Js的方法把它变成Json进行传递。

 wx.navigateTo({
      url: '../rediters/rediters?testData=' + JSON.stringify(this.data.testData) })

以后在load事件中进行 parse就能够了。