动态生成pages.JSON文件

• 动态生成pages.json文件
• • 依据模块划分不同页面配置js文件
  • • user.js
    • process.js
  • index.js(配置pages.json)
  • build.js(动态编译、读取、写入生成pages.json文件)
  • 配置package.json
  • 执行测试
• 动态生成pages.json文件改进
• • 改进原因
  • 修改build.js文件的读写顺序
  • 执行测试
• 动态生成配置分包pages.json文件
• • 原因
  • 修改build.js文件
  • 执行测试

动态生成pages.json文件

小程序项目对pages.json文件拆分、动态生成pages.json文件，最终得到如下目录结构：

common/router/modulesconst 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}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}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.jspages.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]const getRouter = () => {    let router = []    allPageSetting.forEach(item => {        router = [...router, ...buildRouter(item)]    })    return router}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}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]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}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}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命令生成如下配置，同时进行项目测试全部正常。

来源地址：https://blog.csdn.net/qq_38628046/article/details/127513349