快捷導(dǎo)航

uni-app路由配置文件pages.json平臺(tái)化拆分

更新時(shí)間：2023年01月17日 09:36:32 作者：漸行漸遠(yuǎn)

這篇文章主要為大家介紹了uni-app路由配置文件pages.json平臺(tái)化拆分示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

對(duì)uni-app路由配置文件pages.json進(jìn)行平臺(tái)化拆分

背景：公司打造小程序矩陣化，以u(píng)ni-app作為技術(shù)棧生成不同平臺(tái)的小程序代碼。小程序項(xiàng)目包含5個(gè)平臺(tái)的代碼，雖然是一份代碼運(yùn)行5個(gè)平臺(tái)，但是各個(gè)平臺(tái)又有差異，在代碼里面需要做很多條件編譯進(jìn)行兼容處理。隨著項(xiàng)目的壯大與頁(yè)面的增多，控制路由的pages.json已經(jīng)異常龐大且代碼可讀性差（想找一個(gè)頁(yè)面需要找到上下文切換，浪費(fèi)時(shí)間并且可能誤刪不同平臺(tái)的頁(yè)面），亟需優(yōu)化。

例子:

"globalStyle": {
    // #ifndef MP-TOUTIAO
    "navigationStyle": "custom",
    // #endif
    // #ifdef MP-TOUTIAO
    "navigationStyle": "default",
    // #endif
    // #ifdef MP-WEIXIN
    "backgroundColor": "#F3F5F8",
    // #endif
    // #ifdef MP-TOUTIAO || MP-BAIDU
    "backgroundColor": "#fff",
    // #endif
    "enablePullDownRefresh": false,
    "navigationBarTextStyle": "black",
    // #ifndef MP-ALIPAY
    "navigationBarTitleText": "XXXX",
    // #endif
    // #ifdef MP-ALIPAY
    "navigationBarTitleText": "XXXXXX",
    // #endif
    "navigationBarBackgroundColor": "#fff",
    // #ifdef MP-WEIXIN
    // 華為P40Pro 設(shè)備 key
    "qbDebugKey": ["59fc8a158775abbe1fd9809abc887b31"],
    // #endif
    "backgroundTextStyle": "light"
  },

優(yōu)化思路：

將pages.json拆分，共同配置放到pages.json，差異配置新建不同平臺(tái)文件維護(hù)，構(gòu)建時(shí)再進(jìn)行合并。

過(guò)程：

翻閱資料與查看uni打包構(gòu)建源碼，在@dcloudio/webpack-uni-pages-loader/lib/index.js與@dcloudio/uni-cli-shared/lib/pages.js中發(fā)現(xiàn)，在處理pages.json的過(guò)程中會(huì)執(zhí)行./src/pages.js，該js需返回全局配置對(duì)象（結(jié)構(gòu)與pages.json一致），pages.js要求CommonJS規(guī)范，直接通過(guò)module.exports輸出一個(gè)鉤子函數(shù)，鉤子函數(shù)返回配置對(duì)象。所以，我們只需要新建pages.js，然后根據(jù)process.env.UNI_PLATFORM返回不同平臺(tái)的路由配置即可

// pages.js關(guān)鍵代碼
const pagesJsonJsFileName = 'pages.js'
function processPagesJson (pagesJson, loader = {
  addDependency: function () {}
}) {
  const pagesJsonJsPath = path.resolve(process.env.UNI_INPUT_DIR, pagesJsonJsFileName)
  if (fs.existsSync(pagesJsonJsPath)) {
    delete require.cache[pagesJsonJsPath]
    const pagesJsonJsFn = require(pagesJsonJsPath)
    if (typeof pagesJsonJsFn === 'function') {
      pagesJson = pagesJsonJsFn(pagesJson, loader)
      if (!pagesJson) {
        console.error(`${pagesJsonJsFileName}  ${uniI18n.__('cliShared.requireReturnJsonObject')}`)
      }
    } else {
      console.error(`${pagesJsonJsFileName} ${uniI18n.__('cliShared.requireExportFunction')}`)
    }
  }
  return pagesJson
}

新建src/router文件夾文件夾下新建5個(gè)平臺(tái)的路由文件。如下例子（src/router/weixin.js）：

  module.exports = {
    pages: [
      {
          path: 'pages/index/index',
          style: {
              enablePullDownRefresh: false,
          }
      },
      // ...
    ],
    subPackages: [
      {
          root: 'servicePackage',
          pages: [
            {
              path: 'xxx/xxxx/xxxx'
            }
          ]
      }
      // ...
    ]
  }

新建src/pages.js，根據(jù)process.env.UNI_PLATFORM加載不同配置文件

 /**
 * 此文件為@dcloudio/webpack-uni-pages-loader的一個(gè)鉤子入口，遵循CommonJs規(guī)范
 * 源碼路徑：node_modules\@dcloudio\uni-cli-shared\lib\pages.js
 */
 const platform = process.env.UNI_PLATFORM.substring(3) // 獲取platform mp-weixin
 const path = require('path')
 const routerFilePath = path.join(__dirname, `router/${platform}.js`)
 const platformPageConfig = require(routerFilePath)
 // pagesJson參數(shù)是pages.json值
 module.exports = (pagesJson, loader) => {
     return {
         ...platformPageConfig,
         ...pagesJson
     }
 }

由于不是webpack的標(biāo)準(zhǔn)運(yùn)行依賴(lài)，所以需要手動(dòng)添加依賴(lài)項(xiàng)(使用addDependency)，并且需要每次清除模塊的緩存，修改一下src/pages.js代碼

/**
 * 此文件為@dcloudio/webpack-uni-pages-loader的一個(gè)鉤子入口，遵循CommonJs規(guī)范
 * 可以直接使用require引入其他依賴(lài)，但是不會(huì)有熱重載的效果，需要加上addDependency
 */
 const platform = process.env.UNI_PLATFORM.substring(3) // 獲取platform mp-weixin
 const path = require('path')
 const routerFilePath = path.join(__dirname, `router/${platform}.js`)
 const platformPageConfig = require(routerFilePath)
 // pagesJson參數(shù)是pages.json值
 module.exports = (pagesJson, loader) => {
     // 開(kāi)發(fā)模式下才需要熱重載
     if (['test', 'development'].includes(process.env.NODE_ENV)) {
         console.warn(`-----${process.env.NODE_ENV}----\n`)
         // 動(dòng)態(tài)添加依賴(lài)，告訴webpack改文件需要熱重載
         loader.addDependency(require.resolve(routerFilePath))
         // 手動(dòng)清除緩存
         delete require.cache[require.resolve(routerFilePath)]
     }
     return {
         ...platformPageConfig,
         ...pagesJson
     }
 }

大功告成，項(xiàng)目的路由配置一下清晰了許多，由于路由配置文件為js，可以加入代碼進(jìn)行條件化判斷生成的路由。如果只需要生成一個(gè)平臺(tái)的代碼，也可以在此基礎(chǔ)上對(duì)路由進(jìn)行模塊化。

參考文章 http://www.dbjr.com.cn/article/272944.htm

以上就是uni-app路由配置文件pages.json平臺(tái)化拆分的詳細(xì)內(nèi)容，更多關(guān)于uni-app路由配置pages.json的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: