用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序 封装路由 mini-router

Rolan 2019-4-22 00:38

1.介绍mini-router 是一个在微信小程序中使用的路由模块,主要用于在小程序中的路由模块化和解耦,解决小程序中的路由地址的硬编码。Github:https://github.com/hellolad/mini-router原生路由:// 用法:1wx.navigat ...

1.介绍

mini-router 是一个在微信小程序中使用的路由模块,主要用于在小程序中的路由模块化和解耦,解决小程序中的路由地址的硬编码。 
Github: https://github.com/hellolad/mini-router

原生路由:

  1. // 用法:1
  2. wx.navigateTo({
  3. url: "/pages/logs/logs"
  4. })
  5. // 用法:2
  6. wx.navigateTo({
  7. url: "/pages/logs/logs",
  8. success(res) {
  9. console.log("success", res)
  10. },
  11. fail(err) {
  12. console.log("fail", err)
  13. },
  14. complete() {
  15. console.log("complete")
  16. }
  17. })
  18. // 用法:3(传参)
  19. wx.navigateTo({
  20. url: "/pages/logs/logs?key=value",
  21. })

mini-router

  1. // 用法:1
  2. app.$router.push("logs")
  3. // 用法:2
  4. app.$router.push("mine")
  5. .success(res => {
  6. console.log("success: ", res)
  7. })
  8. .fail(err => {
  9. console.log("fail: ", res)
  10. })
  11. .complete(_ => {
  12. console.log("complete")
  13. })
  14. // 用法:3 (传参)
  15. app.$router.push("logs", { key: value })

2.使用方法

  1. // 第一步:导入router模块,并且在app.js里 给app设置一个属性$router
  2. // app.js
  3. import MiniRouter from './route/router'
  4. onLaunch: function () {
  5. this.$router = new MiniRouter()
  6. },
  7. // 第二步:配置route文件夹中的pages模块 (url 直接复制app.json里的pages)
  8. export default [
  9. {
  10. url: 'pages/index/index',
  11. name: 'index'
  12. },
  13. {
  14. url: 'pages/article/article',
  15. name: 'article'
  16. },
  17. {
  18. url: 'pages/mine/mine',
  19. name: 'mine'
  20. },
  21. {
  22. url: 'pages/logs/logs',
  23. name: 'logs'
  24. },
  25. {
  26. url: 'pages/login/login',
  27. name: 'login'
  28. },
  29. {
  30. url: 'pages/next/next',
  31. name: 'next'
  32. }
  33. ]
  34. // 第三步:在需要的文件里 使用
  35. app.$router.push("logs")

3.支持的方法

目前mini-router支持微信小程序里的路由的所有方法,函数名对比:

4.函数介绍

push(name, params = null) 
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

reLaunch(name, params = null) 
关闭所有页面,打开到应用内的某个页面 可传递参数 可跳转到Tabbar页面

redirect(name, params = null) 
关闭所有页面,打开到应用内的某个页面 可传递参数 不可重定向到Tabbar页面

switchTab(name) 
跳转到指定的Tab

back(delta = 1, params = null) 
关闭当前页面,返回上一页面或多级页面。 没有参数 代表返回上一页

backHome(params = null) 
关闭所有页面返回到首页

5.错误处理

当你输入一个在pages模块中找不到的路由时(log),mini-router会抛出错误,例如:

  1. app.$router.push("log", { log: "这是一个Log" })
  2. // 打印
  3. /*
  4. !! Not found page ->:[log] !!; [Component] Event Handler Error @ pages/index/index#bound handlePushLogs
  5. */

6.获取传递的参数

mini-router内置了一个属性params,它会根据你跳转的页面,动态的更换当前属性的值。

  1. // 当我传递了一个参数 { log: "这是一个Log" }
  2. app.$router.push("logs", { log: "这是一个Log" })
  3. // 然后我在下一个界面的onShow/onLoad里接收
  4. const params = app.$router.params
  5. params.log // 这是一个Log

参数存储在storage里,你可以通过小程序调试工具看到:

mini-router params

获取参数时,你不必知道它存储在storage里的key是什么,你只要拿app.$router.params就可以了

7.反向传值

mini-router 通过back或者backHome函数实现反向传值(反向携带参数)

  1. app.$router.back(1, { isLogin: false })
  2. // 中间页传值给最后一页,最后一页携带值给首页
  3. const { data } = app.$router.params
  4. app.$router.backHome({ data })

当你选择不携带参数返回时,在首页你将拿不到app.$router.params,因为mini-router会把params软删除,如果你需要的话,你还是可以从storage里拿到它。

8.状态处理

mini-router同小程序一样,提供三种状态success, fail, complete 
不同于小程序,mini-router使用链式调用来处理这三种状态,

  1. app.$router.push("mine")
  2. .success(res => {
  3. console.log("success: ", res)
  4. })
  5. .fail(err => {
  6. console.log("fail: ", res)
  7. })
  8. .complete(_ => {
  9. console.log("complete")
  10. })

9.query方式传参

上面的都是通过params传参,传的参数缓存在了storage里,新增加的query类型传参,将参数拼接到了url后面:

  1. /**
  2. * Query 方式传递参数
  3. */
  4. handlePushLogsQuery() {
  5. app.$router.push("logs", { log: "这是一个Log", name: "hellolad"}, 'query')
  6. },
  7. handlePushLoginQuery() {
  8. app.$router
  9. .push("login", { phoneNumber: "1561900000000" }, 'query')
  10. .success(res => {
  11. console.log("success: ", res)
  12. })
  13. },
  14. handleReLaunchArticleQuery() {
  15. app.$router.reLaunch("article", { articleId: '10002' }, 'query')
  16. .success(res => {
  17. console.log("success: ", res)
  18. })
  19. },
  20. handleRedirectLoginQuery() {
  21. app.$router.redirect("login", { phoneNumber: '1561900000000' }, 'query')
  22. .success(res => {
  23. console.log("success: ", res)
  24. })
  25. },
  26. // 获取参数和普通的params传参获取参数一样:
  27. const { phoneNumber } = app.$router.params
  28. // 也可以在onLoad(options)里获取
  29. console.log("login options", options)
  30. // 生成的url类似:
  31. /pages/login/login?phoneNumber=1561900000000

寄语:对于前端来说,可以说初窥门径,想要更深入一步,还是要坚持不断的学习和看源码。mini-router可以实现小程序里路由的跳转,也将成为我下一个小程序使用的路由模块,如果有不足的地方欢迎题issuse,如果有好的想法,欢迎pull request。

Github: https://github.com/hellolad/mini-router


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Hellolad 来自: 简书