動態生成 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 and License

Copyright by FungLeo([email protected])

License: MIT