小程序鸿毛框架（四）路由/跳转

           这一章封装一个路由跳转的类，小程序的跳转如果传参数的话挺麻烦，所以为了节省代码我就也在自己的项目中封装了一个，跳转还是经常会用到的，希望能帮助需要的人哈。代码都是微信小程序的，如果是支付宝的把wx改my基本就可以了

        router.js

/*
路由是基于 wx.navigate 简单的封装
示例：pageA和pageB中查看
*/
const router = {
  // PUSH页面
  // url：page路径
  // params：传的参数
  push: function (url, params) {
    let url_params = this.urlParams(params);
    wx.navigateTo({
      url: url + url_params,
    })
  },
  // 返回 delta：返回的层数 不传默认为 1
  back: function (delta = 1) {
    wx.navigateBack({delta: delta});
  },
  // 重定向
  // url：page路径   
  // params：传的参数
  redirect: function (url, params) {
    let url_params = this.urlParams(params);
    wx.redirectTo({url: url + url_params})
  },
  // 获取当前栈中所有的pages
  pages: function () {
    return wx.getCurrentPages();
  },
  // 把params拼接一起
  urlParams: function (params) {
    if (!params) {
      return '';
    }
    let content = '';
    let index = 0;
    for (var key in params) {
      if (index == 0) {
        content += '?' + key + '=' + params[key];
      } else {
        content += '&' + key + '=' + params[key];
      }
      index++;
    }
    return content;
  }
}

module.exports = router;

  实例：从pageA和pageB的交互

pages/pageA/index.js

// pages/pageA/index.js

const Router = require("./router.js");

Page({
    onLoad: function (options) {
     
    },
    // push页面
    bindPush(){
      Router.push('/pages/pageB/index',{desc:"push from pageA"});
    },
    //重定向
    bindRedirect(){
      Router.redirect('/pages/pageB/index',{desc:"redirect  from pageA"});
    }
})

pages/pageB/index.js

// pages/pageB/index.js

const Router = require("./router.js");

Page({
    onLoad: function (options) {
     console.log(options);
    },
    // 返回页面
    bindBack(){
      Router.back(1);
    },
    //当前栈中的页面对象
    getPages(){
      let pages = Router.pages();
      console.log(pages);
    }
})