0.0.5 • Published 2 years ago

@mini-dev/router v0.0.5

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

miniapp-router (a simple miniapp router.)

一个简单的小程序路由封装。

目的

由于个人开发小程序的过程中,在管理路由的时候,有几点不方便的地方:

  1. 页面跳转需要使用硬编码的路径,在移动页面的时候,需要修改所有的相关 url。比如 wx.navigateTo({url:'pages/foo/index''})
  2. 页面之间传递参数需要手工编码成 query 字段。

所以,对小程序的路由进行了一个简单的封装,主要功能:

通过页面映射(name -> path)的方式,实现通过 name 来进行页面跳转。

比如对于一个页面:/pages/pa/pb/pb.wxml,可以将此页面注册为:

router.use({
    name:'b',
    path:'/pages/pa/pb/pb.wxml'
})

这样的话,就可以在 router 上进行更简单的调用:

router.navigateTo({name:'b'})

提供约定的配置。

如果我们的页面命名比较统一,则可以跳过页面映射这一步,直接通过页面的文件夹名字进行跳转。 比如在router的同级目录下有两个页面:

page1/index.wxml
page2/index.wxml

则以下调用会进行相应的页面跳转:

router.navigateTo({name:'page1'}) // 默认会映射到 page1/index.wxml
router.navigateTo({name:'page2'}) // 默认会映射到 page2/index.wxml

提供模块间的路由组合。

如果小程序由多个模块组成,则可以为每个模块单独定义一个 模块路由,然后将模块路由注册到全局路由中。 一个示例工程:

-moduleA
    --pageA
        --index
    --pageB
        --index
    router.js
-moduleB
    --pageA
        --index
    --pageB
        --index
    router.js
app.router.js

注册到全局路由:

const Router = require('@mini-dev/router');
import moduleARouter from "./moduleA/router";
import moduleBRouter from "./moduleB/router";

const appRouter = new Router({name: 'AppRouter', basePath: '/'})
    .use('module-a', moduleARouter.basePath('/moduleA/'))
    .use('module-b', moduleBRouter.basePath('/moduleA/'));

模块间跳转:

import appRouter from "../app.router";
appRouter.navigateTo({
    name:['module-a', 'pageA']
})

使用方式

1, add dependency

    npm i @mini-dev/router

2, define router

    const mainRouter = new Router({
            name: 'mainRouter',
            basePath: '/pages/main/',
            routes: [
                'index',
                {
                    name: 'foo',
                    path: 'foo/foo'
                }
            ]
        }
    )
  1. open page
    moduleRouter.navigateTo({
        name: 'index',
        params: {
            a: 100,
            b: 200
        }
    });
0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago