专栏首页地方网络工作室的专栏动态生成 uniapp 配置文件 pages.json 的解决方案

动态生成 uniapp 配置文件 pages.json 的解决方案

动态生成 uniapp 配置文件 pages.json 的解决方案

最近接手了一个基于 uniapp 的开发项目,我个人对于它能够使用同一套代码就能够开发 h5\app\小程序 的强大功能表示非常钦佩。但是其配置文件 pages.json 也让我十分郁闷,原因无他,只因其是写死 JSON 文件,在管理的时候是十分不便的。

在搜索了一些资料,期望可以用 pages.js 文件来替代 pages.json 配置文件(JS的动态能力,可以很方便的拆分路由配置),但是没有找到很好的解决方案。倒是有一个,但是搞得过于繁琐,想想还是算球了。

于是,我自己用 Nodejs 手写了一个方案,虽然原始了一些,但是依赖十分轻,使用也比较便捷,个人感觉还是颇有用处的,所以特地撰文分享给大家。

构建文件构架

首先,我们在项目根目录中新建 router 文件夹,然后根据如下的格式构建文件结构。

router              # 动态路由文件夹
├── build.js        # 编译路由配置主文件
├── index.js        # 主配置文件
└── modules         # 动态路由模块文件
    └── small.js    # 拆分出来的模块路由文件

编写 build.js 文件

代码如下:

const fs = require('fs')
const path = require('path')
const router = require('./index.js')

// 将子路由模块配置文件转化为 uniapp 配置文件格式
const buildRouter = route => {
  const res = []
  const { baseUrl, children } = route
  children.forEach(i => {
    const obj = {
      path: baseUrl + i.path,
      style: {
        navigationBarTitleText: i.name
      }
    }
    Object.keys(i).forEach(ii => {
      !['path', 'name'].includes(ii) && (obj.style[ii] = i[ii])
    })
    res.push(obj)
  })
  return res
}

// 自动加载 './modules' 目录子路由配置文件
const getRouter = () => {
  const srcPath = path.resolve(__dirname, './modules')
  const result = fs.readdirSync(srcPath)
  let router = []
  result.forEach(r => {
    const route = require('./modules/' + r)
    router = [...router, ...buildRouter(route)]
  })
  return router
}

// 构建 pages 并写入 pages.json 文件
router.pages = getRouter()
fs.writeFile(
  __dirname + '/../pages.json',
  // 我这边是用两个空格来缩进 pages.json,如果喜欢制表符,第三个参数更换你为 \t 即可
  JSON.stringify(router, null, '  '),
  e => e ? console.error(e) : console.log('pages.json 配置文件更新成功')
)

build.js 文件为主文件,是用于编译 pages.json 的。如果你有 nodejs 编程基础的话,这是一个巨简单的问题。如果没有的话,就不用管了,直接复制走即可。

编写 index.js 文件

这个文件没啥说的,就是除了 pages.json 这个文件中的 pages 字段外的其他内容,导出即可。我这边示例文件如下:

module.exports = {
  globalStyle: {
    navigationBarTextStyle: 'white',
    navigationBarTitleText: '司机配送',
    navigationBarBackgroundColor: '#4a9ff8',
    backgroundColor: '#4a9ff8'
  },
  tabBar: {
    color: '#666',
    selectedColor: '#4a9ff8',
    backgroundColor: '#f7f7f7',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/index/index',
        iconPath: 'static/images/icon-homeed.png',
        selectedIconPath: 'static/images/icon-home.png',
        text: '首页'
      },
      {
        pagePath: 'pages/task/task',
        iconPath: 'static/images/icon-tasked.png',
        selectedIconPath: 'static/images/icon-task.png',
        text: '任务'
      },
      {
        pagePath: 'pages/my/my',
        iconPath: 'static/images/icon-myed.png',
        selectedIconPath: 'static/images/icon-my.png',
        text: '我的'
      }
    ]
  }
}

这里面都是根据官方的配置去写即可了。因为这部分内容不多,因此没有必要拆分。区别就是,这里是JS,所以不用写双引号~呵呵。。。

编写 modules 下子路由文件

上代码:

module.exports = {
  baseUrl: 'pages/small/',
  children: [
    {
      path: 'register',
      name: '注册'
    }, {
      path: 'login',
      name: '登录'
    }
  ]
}

导出一个对象,其中 baseUrl 是指你这些文件存放的位置目录。拆分出来的原因是不想在每个页面的路径里都要写这些重复的代码。

children 中就是该子路由涵盖的各个页面的路径以及标题了。

这里和 uniapp 默认的 pages.json 中的格式略有区别,我在 build.js 文件里面的 buildRouter() 函数就是做这个数据格式转化的。目的是为了让我们的子路由配置代码更加简洁。

这里需要注意的是,如果你需要使用到其他的配置项,就直接写就可以了。原来啥格式就是啥格式,比如这样:

module.exports = {
  baseUrl: 'pages/small/',
  children: [
    {
      path: 'register',
      name: '注册',
      'app-plus': {
        titleNView: {
          buttons: [
            {
              text: '消息',
              fontSize: '16px'
            }
          ]
        }
      }
    }, {
      path: 'login',
      name: '登录'
    }
  ]
}

上面的这个 'app-plus' 会自动插入进去的,官方文档要求怎么写,你在这边就怎么写就好了。一般这个用得比较少,所以这个我就不做额外的处理了。

使用

构建好这些代码之后,直接在命令行中运行 node router/build.js 就会在项目根目录中生成 pages.json 文件了。

这里需要说明的是,我这边项目是使用 hbuilder GUI界面生成的项目,所以根目录就是项目根目录。如果是使用的 CLI 工具生成的项目,上文中的根目录就变成了项目的 src 目录。

如果想直接下载代码,可以看我的仓库 https://github.com/fengcms/uniapp-pages-json-cli-build 如果去 github 下载的话,给我点个赞哦!

Copyright by FungLeo(web@fengcms.com)

License: MIT

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS判断数据类型以及数据过滤空值方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    FungLeo
  • Python3 初学实践案例(8)使用 sqlite3 数据库存储生成的密码,prettytable 的使用

    Python3 初学实践案例(8)使用 sqlite3 数据库存储生成的密码,prettytable 的使用 在前面我用 python 脚本实现的 cli 版本...

    FungLeo
  • vue3.0 Composition API 上手初体验 构建 vue 基础代码

    上一讲中,我们通过配置 webpack 构建了一个基础的开发环境。但是并没有涉及到 vue3.0 的内容,这一讲中,我们来构建一些基础代码。

    FungLeo
  • 小程序:下拉刷新的简单方法"enablePullDownRefresh": true

    在小程序里面加上一个下拉刷新的原因是为了优化用户的体验,有时候会遇到这样的一种情况,用户的网络比较慢,那么该出现的内容就出现的很慢,如果有下拉刷新的功能,就会给...

    祈澈菇凉
  • Error in v-on handler: “ReferenceError: assignment to undeclared variable i”

    kirin
  • AMD和Intel主流CPU性价比和能耗比对比

    zeruns
  • [图]最短路径-Floyd算法

    <!--more--> > Floyd算法(Floyd-Warshall algorithm)又称为插点法,是一种利用动态规划的思想寻找给定的加权图中多源点之...

    王荣胜
  • 菜单的使用

    2)弹出式菜单:一般在顶级菜单上都有很多菜单项,单击这些菜单项时会弹出一个下拉式的菜单项,我们点击的这个菜单称为弹出式菜单

    Masimaro
  • Arp欺骗原理及Android环境下的检测方法

    测试环境说明 网关: IP:172.20.150.1 mac:24050FCE53 靶机(手机): IP:172.20.150.20 mac:000822...

    FB客服
  • Material Design整理(五)——NavigationView

    蜻蜓队长

扫码关注云+社区

领取腾讯云代金券