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

Posted 2022-07-29 FungLeo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态生成 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: '登录'
    
  ]