小程序之页面跳转方式总结

一 、基本跳转

1.使用组件<navigator>标签来实现。

特点：点击有按下的效果

<navigator url="../job_detail/job_detail?isShowCompanyDetail=true&iscollect={{item.iscollect}}"> 跳转 </navigator> 

2.给页面布局加监听时间bindtap事件。然后在方法里面。通过wx.navigatorTo来实现跳转。

特点：点击无按下的效果。

gotoPage: function () { 
     wx.navigateTo({ 
         url: '../list/list', 
         success: function (res) { 
                 // success 
         }, 
         fail: function () { 
               // fail 
         }, 
         complete: function () { 
             // complete 
         } 
   }) 
}, 

3.通过wx.redirectTo实现跳转。

特点：关闭当前页面，跳转到应用内某个页面

toList: function (event) { 
     var provinceName = event.currentTarget.id; 
     wx.redirectTo({ 
     url: '../city/city?province='+provinceName, 
     success: function (res) { 
         // success 
     }, 
     fail: function () { 
         // fail 
      }, 
      complete: function () { 
         // complete 
       } 
   }) 
 } 

4.wx.navigateBack方法

关闭当前页面。返回上一页面或多级页面

wx.navigateBack({ 
    delta: 1, // 回退前 delta(默认为1) 页面 
    success: function (res) { 
        // success 
    }, 
    fail: function () { 
      // fail 
    }, 
    complete: function () { 
        // complete 
      } 
 }) 

给上一个页面赋值

var pages = getCurrentPages(); 
var prevPage = pages[pages.length - 2];//上一个页面。 
prevPage.setData({ 
     bank_cn: bank_cn, 
     bank: bank 
}) 

重点：
tabBar里一般就是四个主页面，这些主页面之间的跳转就像tab切换，这几个页面需要在tabBar里另外配置，普通页面向这四个主页面跳转的时候，不能使用navigator，需用switchTab。

实例：从首页跳到tabBar页,并且要带上参数.首先我是这样做的:

在index.js中:

toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    wx.switchTab({
      url: '../category/category?cate_id='+cate_id,
    });
  }, 

按照上面写的在category.js里得不到数据;

onLoad:function(options){

console.log(options);

}

然后查看了下官方文档.

wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

OBJECT 参数说明：

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

可以看到url路径后不能带参数.这下就尴尬了.因为我必须要带一个参数过去才能满足业务的需求;走了一个捷径.思路:跳转的时候在全局变量里设置一个变量cate_id,调到category.js中后.调取全局变量里的cate_id,用完后,再把扎个变量清除掉.具体实施如下:

首页index.js中:

toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    app.globalData.cate_id=cate_id;//设置全局变量(app已经定义 var app=getApp())
    wx.switchTab({
      url: '../category/category'
    });
  }, 

分类页category.js中:

onLoad:function(options){
    var that = this
    var cate_id=app.globalData.cate_id
    wx.request({
      url: app.globalData.httpsurl +'public/index.php?s=product/index',
      data:{
        cate_id:cate_id,
      },
      success:function(res){
        //清除全局变量cate_id
        app.globalData.cate_id=""
        that.setData({
          alldata:res.data,
        })
      }
    })
  }, 

上面的转化就可以完成业务逻辑的需要了.