pages.json ファイルを分割し、pages.json ファイルを動的に生成し、サブパッケージ構成の pages.json ファイルを動的に生成するためのユニアプリおよびアプレット プロジェクトのソリューション

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.js で構成されたパラメーターに対応し、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 を構成する

主に、npm スクリプト コマンドを実行するときにページ構成ファイルを生成するか、アプレット プロジェクトを起動するときに pages.json ファイルを生成するために、package.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 ファイルの読み取りと書き込みの順序を変更する

改善策は非常に単純で、異なるモジュールで構成されたjsファイルの読み取りと書き込みのシーケンスを制御する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 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 ファイルを動的に生成する

理由

WeChat アプレットでは、メイン パッケージのサイズが 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文件更新成功!')
            }
        )
    }
})

テストを実行する

次の npm スクリプト コマンドで pages.json ファイルが存在することを確認します。

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

コマンドを実行してnpm run build:router以下の構成を生成すると同時に、プロジェクトのテストはすべて正常です。