uni-app、小程序项目对pages.json文件拆分、动态生成pages.json文件、动态生成分包配置pages.json文件的解决方案

CodeDevMaster
1,025 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

动态生成pages.json文件

小程序项目对pages.json文件拆分、动态生成pages.json文件，最终得到如下目录结构： 在这里插入图片描述

common/router/modules/*: 依据模块划分不同页面配置js文件

common/router/index.js: 对应pages.js中除了页面pages配置的参数外，其他在pages.js文件中配置的参数都放这里面

common/router/build.js：核心文件，主要是读取modules/目录下的文件以及router/index.js文件然后动态生成pages.json文件

依据模块划分不同页面配置js文件

这里创建user.js、process.js文件为例说明

user.js

baseUrl：页面文件存放的实际位置目录

children：相当于是在pages.json文件中对pages参数项进行相关页面配置

module.exports = {
    baseUrl: 'pages/user/',
    children: [
        {
            path: 'me',
            text: '个人中心',
        },
        {
            path: 'Logout',
            text: '退出',
        }
    ]
}

process.js

module.exports = {
    baseUrl: 'pages/process/',
    children: [
        {
            path: 'core/ProcessList',
            name: 'ProcessList',
            text: '流程列表',
        }
    ]
}

index.js(配置pages.json)

index.js文件对应pages.js中除了页面pages配置的参数外，其他在pages.js文件中配置的参数都放这里面

module.exports = {
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/index/todo",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "待办"
            },
            {
                "pagePath": "pages/index/message",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "消息"
            },
            {
                "pagePath": "pages/user/me",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png",
                "text": "个人中心"
            }
        ]
    }
}

build.js(动态编译、读取、写入生成pages.json文件)

build.js用于编译、动态读取、写入生成pages.json文件

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


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

/**
 * 将子路由模块配置文件转化为pages.json配置文件格式
 * @param route
 * @returns {*[]}
 */
const buildRouter = route => {
    const res = []
    const {baseUrl, children} = route
    children.forEach(item => {
        let obj = {};
        item.path ? obj.path = baseUrl + item.path : null;
        item.name ? obj.name = item.name : null;
        obj = {
            ...obj,
            style: {
                navigationBarTitleText: item.text
            }
        }
        item.style ? obj.style = item.name : null;
        res.push(obj)
    })
    return res
}

/**
 * 构建 pages 并写入 pages.json 文件
 * 用两个空格缩进pages.json，如果喜欢制表符，第三个参数更换你为\t即可
 * @type {*[]}
 */
router.pages = getRouter()

fs.rename('src/pages.json', 'src/pages.json.back', err => {
    if (err) {
        console.log(err)
    } else {
        console.log("pages.json文件备份成功！")
        fs.writeFile('src/pages.json',
            JSON.stringify(router, null, '  '),
            err => {
                err ? console.error(err) : console.log('pages.json文件更新成功!')
            }
        )
    }
})

配置package.json

配置package.json文件，主要是在执行npm脚本命令时，先生成页面配置文件、或在启动小程序项目时生成pages.json文件

  "scripts": {
    "build:router": "node ./src/common/router/build.js",
    "serve": "(node ./src/common/router/build.js) & (npm run dev:mp-weixin --minimize)"
    }

执行测试

在命令行中运行node router/build.js命令，则会在项目根目录中生成pages.json文件

npm run build:router

> xxx-app@0.1.0 build:router
> node ./src/common/router/build.js

pages.json文件备份成功！
pages.json文件更新成功!

在这里插入图片描述

动态生成pages.json文件改进

改进原因

由于router/modules目录下的不同模块的不同页面配置文件的顺序关系，将按顺序读取文件并写入pages.json文件。

若按以下文件顺序读取、写入，则在pages.json文件中的pages参数配置项会最先配置error.js中配置的页面配置，通常pages参数中第一项作为小程序的初始访问页面，此处这样动态生成，则需要每次修改第一项页面配置，如改为/index/login

在这里插入图片描述

修改build.js文件的读写顺序

改进方案很简单，只需要基于动态生成pages.json文件的过程，改进、控制build.js对不同模块配置的js文件进行读写顺序控制即可得到想要的pages.json文件。

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

const home = require('./modules/home.js')
const error = require('./modules/error.js')
const process = require('./modules/process.js')
const user = require('./modules/user.js')

const allPageSetting = [
    home,
    error,
    process,
    user
]

/**
 * 加载'./modules'目录子路由配置文件
 * @returns {*[]}
 */
const getRouter = () => {
    let router = []
    allPageSetting.forEach(item => {
        router = [...router, ...buildRouter(item)]
    })
    return router
}

/**
 * 将子路由模块配置文件转化为pages.json配置文件格式
 * @param route
 * @returns {*[]}
 */
const buildRouter = route => {
    const res = []
    const {baseUrl, children} = route
    children.forEach(item => {
        let obj = {};
        item.path ? obj.path = baseUrl + item.path : null;
        item.name ? obj.name = item.name : null;
        obj = {
            ...obj,
            style: {
                navigationBarTitleText: item.text
            }
        }
        item.style ? obj.style = item.name : null;
        res.push(obj)
    })
    return res
}

/**
 * 构建 pages 并写入 pages.json 文件
 * 用两个空格缩进pages.json，如果喜欢制表符，第三个参数更换你为\t即可
 * @type {*[]}
 */
router.pages = getRouter()

fs.rename('src/pages.json', 'src/pages.json.back', err => {
    if (err) {
        console.log(err)
    } else {
        console.log("pages.json文件备份成功！")
        fs.writeFile('src/pages.json',
            JSON.stringify(router, null, '  '),
            err => {
                err ? console.error(err) : console.log('pages.json文件更新成功!')
            }
        )
    }
})

执行测试

使用改进后的build.js动态生成pages.json文件，得到如下正确、需要的页面配置顺序。 在这里插入图片描述

动态生成配置分包pages.json文件

原因

微信小程序规定主包大小不能超过2M，随着5G时代的到来，2M是真的小，通常一个小程序项目轻轻松松达到2M的限制，于是乎必须进行分包配置。

由于都已经是动态生成pages.json文件了，分包配置当然也应该动态生成，于是乎有了动态生成配置分包pages.json文件的解决方案。

修改build.js文件

要想动态生成配置分包pages.json文件，同样只需要按开发文档要求如何配置pages.json文件的结构去构造生成即可。

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

const home = require('./modules/home.js')
const error = require('./modules/error.js')
const process = require('./modules/process.js')
const user = require('./modules/user.js')

const mainPackagesPages = [
    home,
    error,
    user
]

/**
 * 加载'./modules'目录子路由配置文件
 * @returns {*[]}
 */
const getRouter = () => {
    let router = []
    mainPackagesPages.forEach(item => {
        router = [...router, ...mainPackagesPagesBuildRouter(item)]
    })
    return router
}

const subPackagesPages = [
    process,
]

/**
 * 加载需要分包的路由配置文件
 */
const getSubPackagesRouter=()=>{
    let router = []
    subPackagesPages.forEach(item => {
        router = [...router, subPackagesBuildRouter(item)]
    })
    return router
}

/**
 * 将子路由模块配置文件转化为pages.json配置文件格式
 * @param route
 * @returns {*[]}
 */
const mainPackagesPagesBuildRouter = route => {
    const res = []
    const {baseUrl, children} = route
    children.forEach(item => {
        let obj = {};
        item.path ? obj.path = baseUrl + item.path : null;
        item.name ? obj.name = item.name : null;
        obj = {
            ...obj,
            style: {
                navigationBarTitleText: item.text
            }
        }
        item.style ? obj.style = item.name : null;
        res.push(obj)
    })
    return res
}

/**
 * 构建分包页面路由
 */
const subPackagesBuildRouter=(route)=>{
    const {baseUrl, children} = route
    const jo={
        root:baseUrl,
        pages:[]
    }
    children.forEach(item => {
        let obj = {};
        item.path ? obj.path = item.path : null;
        item.name ? obj.name = item.name : null;
        obj = {
            ...obj,
            style: {
                navigationBarTitleText: item.text
            }
        }
        item.style ? obj.style = item.name : null;
        jo.pages.push(obj)
    })

    return jo
}

/**
 * 构建 pages 并写入 pages.json 文件
 * 用两个空格缩进pages.json,或使用制表符:`\t`
 * @type {*[]}
 */
router.pages = getRouter()
router.subPackages = getSubPackagesRouter()

fs.rename('src/pages.json', 'src/pages.json.back', err => {
    if (err) {
        console.log(err)
    } else {
        console.log("pages.json文件备份成功！")
        fs.writeFile('src/pages.json',
            JSON.stringify(router, null, '\t'),
            err => {
                err ? console.error(err) : console.log('pages.json文件更新成功!')
            }
        )
    }
})

执行测试

确保pages.json文件存在如下npm脚本命令

"scripts": {
 "build:router": "node ./src/common/router/build.js"
 }

执行npm run build:router命令生成如下配置，同时进行项目测试全部正常。

在这里插入图片描述

avatar
文章
阅读
粉丝
相关推荐
uni-app 开发配置（Vue3/Vite版）
466阅读
 · 
0点赞
uni-app学习笔记
33阅读
 · 
0点赞
uni-app 获取地理位置，并打开第三方地图
339阅读
 · 
0点赞
前端学习之 - 搭建UniApp前端框架以及简单使用
724阅读
 · 
7点赞
使用cli 创建使用vue2 uniapp的项目（防止再次踩坑）
375阅读
 · 
2点赞
uniapp路由动态传参
630阅读
 · 
0点赞
vscode开发uniapp
65阅读
 · 
0点赞
uniapp 微信小程序登录
362阅读
 · 
0点赞
UniApp 小程序开发技巧
1.5k阅读
 · 
6点赞

友情链接：