微信小程序路由的封装
2019-04-26 19:58 阅读(339)

今天在社区看到一篇有关小程序路由的用法和使用场景的文章，挺到位的，分享给大家，这篇文章不是我写的、不是我写的、不是我写的。

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。

页面的跳转存在哪些问题呢？

  1. 与接口的调用一样面临url的管理问题；

  2. 传递参数的方式不太友好，只能拼装url；

  3. 参数类型单一，只支持string。

alias

第一个问题很好解决，我们做一个集中管理，比如新建一个router/routes.js文件来实现alias：

// routes.js
module.exports = {
  // 主页
  home: '/pages/index/index',
  // 个人中心
  uc: '/pages/user_center/index',
};

然后使用的时候变成这样：

const routes = require('../../router/routes.js');

Page({
  onReady() {
    wx.navigateTo({
      url: routes.uc,
    });
  },
});

query

第二个问题，我们先来看个例子，假如我们跳转pages/user_center/index页面的同时还要传userId过去，正常情况下是这么来操作的：

const routes = require('../../router/routes.js');

Page({
  onReady() {
    const userId = '123456';
    wx.navigateTo({
      url: `${routes.uc}?userId=${userId}`,
    });
  },
});

这样确实不好看，我能不能把参数部分单独拿出来，不用拼接到url上呢？

可以，我们试着实现一个navigateTo函数：

const routes = require('../../router/routes.js');

function navigateTo({ url, query }) {
  const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&');
  wx.navigateTo({
    url: `${url}?${queryStr}`,
  });
}

Page({
  onReady() {
    const userId = '123456';
    navigateTo({
      url: routes.uc,
      query: {
        userId,
      },
    });
  },
});

嗯，这样貌似舒服一点。

参数保真

第三个问题的情况是，当我们传递的参数argument不是string，而是number或者boolean时，也只能在下个页面得到一个string值：

// pages/index/index.js
Page({
  onReady() {
    navigateTo({
      url: routes.uc,
      query: {
        isActive: true,
      },
    });
  },
});

// pages/user_center/index.js
Page({
  onLoad(options) {
    console.log(options.isActive); // => "true"
    console.log(typeof options.isActive); // => "string"
    console.log(options.isActive === true); // => false
  },
});

上面这种情况想必很多人都遇到过，而且感到很抓狂，本来就想传递一个boolean，结果不管传什么都会变成string。

有什么办法可以让数据变成字符串之后，还能还原成原来的类型？

好熟悉，这不就是json吗？我们把要传的数据转成json字符串（JSON.stringify），然后在下个页面把它转回json数据（JSON.parse）不就好了嘛！

我们试着修改原来的navigateTo：

const routes = require('../../router/routes.js');

function navigateTo({ url, data }) {
  const dataStr = JSON.stringify(data);
  wx.navigateTo({
    url: `${url}?jsonStr=${dataStr}`,
  });
}

Page({
  onReady() {
    navigateTo({
      url: routes.uc,
      data: {
        isActive: true,
      },
    });
  },
});

这样我们在页面中接受json字符串并转换它：

// pages/user_center/index.js
Page({
  onLoad(options) {
    const json = JSON.parse(options.jsonStr);
    console.log(json.isActive); // => true
    console.log(typeof json.isActive); // => "boolean"
    console.log(json.isActive === true); // => true
  },
});

这里其实隐藏了一个问题，那就是url的转义，假如json字符串中包含了类似?、&之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下：

function navigateTo({ url, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  wx.navigateTo({
    url: `${url}?encodedData=${dataStr}`,
  });
}

// pages/user_center/index.js
Page({
  onLoad(options) {
    const json = JSON.parse(decodeURIComponent(options.encodedData));
    console.log(json.isActive); // => true
    console.log(typeof json.isActive); // => "boolean"
    console.log(json.isActive === true); // => true
  },
});

这样使用起来不方便，我们封装一下，新建文件router/index.js：

const routes = require('./routes.js');

function navigateTo({ url, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  wx.navigateTo({
    url: `${url}?encodedData=${dataStr}`,
  });
}

function extract(options) {
  return JSON.parse(decodeURIComponent(options.encodedData));
}

module.exports = {
  routes,
  navigateTo,
  extract,
};

页面中我们这样来使用：

const router = require('../../router/index.js');

// page home
Page({
  onLoad(options) {
    router.navigateTo({
      url: router.routes.uc,
      data: {
        isActive: true,
      },
    });
  },
});

// page uc
Page({
  onLoad(options) {
    const json = router.extract(options);
    console.log(json.isActive); // => true
    console.log(typeof json.isActive); // => "boolean"
    console.log(json.isActive === true); // => true
  },
});

route name

这样貌似还不错，但是router.navigateTo不太好记，router.routes.uc有点冗长，我们考虑把navigateTo换成简单的push，至于路由，我们可以使用name的方式来替换原来url参数：

const routes = require('./routes.js');

function push({ name, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  const url = routes[name];
  wx.navigateTo({
    url: `${url}?encodedData=${dataStr}`,
  });
}

function extract(options) {
  return JSON.parse(decodeURIComponent(options.encodedData));
}

module.exports = {
  push,
  extract,
};

在页面中使用：

const router = require('../../router/index.js');

Page({
  onLoad(options) {
    router.push({
      name: 'uc',
      data: {
        isActive: true,
      },
    });
  },
});

navigateTo or switchTab

页面跳转除了navigateTo之外还有switchTab，我们是不是可以把这个差异抹掉？答案是肯定的，如果我们在配置routes的时候就已经指定是普通页面还是tab页面，那么程序完全可以切换到对应的跳转方式。

我们修改一下router/routes.js，假设home是一个tab页面：

module.exports = {
  // 主页
  home: {
    type: 'tab',
    path: '/pages/index/index',
  },
  uc: {
    path: '/pages/a/index',
  },
};

然后修改router/index.js中push的实现：

function push({ name, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  const route = routes[name];
  if (route.type === 'tab') {
    wx.switchTab({
      url: `${route.path}`, // 注意tab页面是不支持传参的
    });
    return;
  }
  wx.navigateTo({
    url: `${route.path}?encodedData=${dataStr}`,
  });
}

搞定，这样我们一个router.push就能自动切换两种跳转方式了，而且之后一旦页面类型有变动，我们也只需要修改route的定义就可以了。

直接寻址

alias用着很不错，但是有一点挺麻烦得就是每新建一个页面都要写一个alias，即使没有别名的需要，我们是不是可以处理一下，如果在alias没命中，那就直接把name转化成url？这也是阔以的。

function push({ name, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  const route = routes[name];
  const url = route ? route.path : name;
  if (route.type === 'tab') {
    wx.switchTab({
      url: `${url}`, // 注意tab页面是不支持传参的
    });
    return;
  }
  wx.navigateTo({
    url: `${url}?encodedData=${dataStr}`,
  });
}

在页面中使用：

Page({
  onLoad(options) {
    router.push({
      name: 'pages/user_center/a/index',
      data: {
        isActive: true,
      },
    });
  },
});
注意，为了方便维护，我们规定了每个页面都必须存放在一个特定的文件夹，一个文件夹的当前路径下只能存在一个index页面，比如pages/index下面会存放pages/index/index.js、pages/index/index.wxml、pages/index/index.wxss、pages/index/index.json，这时候你就不能继续在这个文件夹根路径存放另外一个页面，而必须是新建一个文件夹来存放，比如pages/index/pageB/index.js、pages/index/pageB/index.wxml、pages/index/pageB/index.wxss、pages/index/pageB/index.json。

这样是能实现功能，但是这个name怎么看都跟alias风格差太多，我们试着定义一套转化规则，让直接寻址的name与alias风格统一一些，pages和index其实我们可以省略掉，/我们可以用.来替换，那么原来的name就变成了user_center.a：

Page({
  onLoad(options) {
    router.push({
      name: 'user_center.a',
      data: {
        isActive: true,
      },
    });
  },
});

我们再来改进router/index.js中push的实现：

function push({ name, data }) {
  const dataStr = encodeURIComponent(JSON.stringify(data));
  const route = routes[name];
  const url = route ? route.path : `pages/${name.replace(/\./g, '/')}/index`;
  if (route.type === 'tab') {
    wx.switchTab({
      url: `${url}`, // 注意tab页面是不支持传参的
    });
    return;
  }
  wx.navigateTo({
    url: `${url}?encodedData=${dataStr}`,
  });
}

这样一来，由于支持直接寻址，跳转home和uc还可以写成这样：

router.push({
  name: 'index',  // => /pages/index/index
});

router.push({
  name: 'user_center',  // => /pages/user_center/index
});

这样一来，除了一些tab页面以及特定的路由需要写alias之外，我们也不需要新增一个页面就写一条alias这么麻烦了。

其他

除了上面介绍的navigateTo和switchTab外，其实还有wx.redirectTo、wx.navigateBack以及wx.reLaunch等，我们也可以做一层封装，过程雷同，所以我们就不再一个个介绍，这里贴一下最终简化后的api以及原生api的映射关系：

router.push => wx.navigateTo
router.replace => wx.redirectTo
router.pop => wx.navigateBack
router.relaunch => wx.reLaunch

最终实现已经在发布在github上，感兴趣的朋友可以移步了解：mp-router。



+友情链接

老左的源码市场 老左的博客 意甲賽事分析 yy号码网 注册公司 bitget bitget 80s电影大全 256下载网 进出口代理 云霄香烟价格 先上DJ 广东人才网 真空泵 小知识白条资讯科普分享 aapoker 谷歌浏览器 xshell下载 智慧供热 码支付平台 沈阳贷款公司哪个好 高仿手錶 wepoker aa扑克 wepoker官网 工业品平台 阿里下载站 智慧供热 hhpoker 微扑克官网 清华大学总裁班 新笔趣阁 无畏游戏盒 大道之上 夜无疆 免费舌诊 美股开户优惠 snipaste下载 恒宁影院 企业家学习网 美国林肯大学 年糕游戏网 上海展台设计 虛擬辦公室 pearl jewelry 威而柔哪裡買 7149手游网
联系我们[微信：18518463823] | 京ICP备2023028852号-2