微信小程序之界面跳转总结

最近代码君又开始写小程序，有一些基础的东西，怕忘记，都给记录下来，后续方便查看，也方便初学者去学习，今天总结一下小程序的界面跳转以及参数传递

需求: index.wxml 页面,跳转到 logs.wxml 页面

用到的小程序控件 navigator

属性名	类型	说明
url	String	跳转链接，可以传递参数
open-type	String	跳转方式，参数可为navigateBack、redirect、switchTab
delta	Number	当 open-type 为 'navigateBack' 时有效，表示回退的层数

一、wxml 页面实现跳转

下面是根据不同的open-type 进行界面跳转

1.<navigator url = "/pages/logs/logs?title=我是代码君">跳转到新页面</navigator>

2.<navigator url = "/pages/logs/logs?title=我是代码君" open-type = "redirect">跳转到新页面</navigator>

3.<navigator url = "/pages/logs/logs?title=我是代码君" open-type = "switchTab">跳转到新页面</navigator>

二、js页面的实现跳转

bindViewTab:function(){

   wx.navigateTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url:"/pages/logs/logs?title=我是代码君"
   })

  wx.redirectTo({      //关闭当前页面，跳转到应用内的某个页面（这个跳转有个坑，就是跳转页面后页面会闪烁一下，完全影响了我自己的操作体验，太缺德了。）
         url:"/pages/logs/logs?title=我是代码君"
    })

 wx.reLaunch({     //跳转至指定页面并关闭其他打开的所有页面（这个最好用在返回至首页的的时候）
   url:'/pages/index/index'
 })

   wx.switchTab({    //跳转到tabBar页面，并关闭其他所有tabBar页面
          url:"/pages/logs/logs?title=我是代码君"
    })

   wx.navigateBack({     //返回上一页面或多级页面
         delta:1
   })
}

三、如何接收跳转传递的参数

上面我们写了如何跳转，并且为了方便讲解，我对每个跳转都加入了参数传递，如果要学习如何传递产生，请看上面的代码，其实原理很简单，就是在url 地址后面加入 ？title=”xxxxx“，title就是参数，下面的代码就教你如何接收参数，接收界面logs.js 在onLoad里面加载其他界面传递过来的参数title，然后再把title赋值给logs.wxml界面

logs.js

Page({   
  data:{
    title: "", 
  }, 
  onLoad: function(options) {    
    this.setData({    
      title: options.title    
    })    
  }    
})

logs.wxml

<view class="container log-list">{{title}}</view>