uniapp は複数ページのパッケージ化をサポートしていますか?

UniApp は、Vue.js に基づくクロスプラットフォーム アプリケーション開発フレームワークで、マルチターミナル アプリケーションを迅速に構築し、同時にリリース用にパッケージ化できます。しかし、uniapp は複数ページのパッケージ化をサポートしていますか?この記事ではそれに答えます。

UniApp フレームワークの機能の 1 つは、同じコード セットを通じて異なるエンドでアプリケーションを生成できることです。単純なルーティング設定セットを使用して、異なるページ間のジャンプを管理します。ページ ジャンプ プロセス中、UniApp はパラメータの受け渡しや動的ルーティング設定もサポートしており、これらの機能により開発の効率と柔軟性が大幅に向上します。

マルチページ アプリケーションの場合、UniApp は複数の実装方法もサポートしており、ルーティングとコンポーネントを構成することで複数のページを切り替えることができます。ルーティングを構成する場合、各ページの名前、パス、アイコン、その他の属性を指定でき、また、プラットフォームごとに異なるページ コンポーネントやライフサイクル機能を構成することもできます。

しかし、実際の開発では、複数のページを 1 つのアプリケーションにパッケージ化したり、複数のアプリケーションを 1 つのプラットフォームにパッケージ化したりすることが多く、その際には UniApp のパッケージング設定ツールを使用して完了する必要があります。

次に、複数ページのパッケージ化を実装するいくつかの方法を紹介します。

1. pages.json による構成

UniApp をパッケージ化する場合、ページを使用できます。 json パッケージ化する必要があるページを指定する構成ファイル。 Pages.json ファイルは、アプリケーション内のすべてのページを指定するグローバル構成ファイルです。必要に応じて、さまざまなページをさまざまなフォルダーに割り当て、対応するパス情報をpages.jsonで構成できます。

例:

{
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/list/list",
            "style": {
                "navigationBarTitleText": "列表"
            }
        }
    ]
}

このうち、各ページ配列項目はページを表します。 Path はページのパスを表し、相対パスまたは絶対パスを使用できます。

2. Page を動的に設定することで実現

複数ページのパッケージ化に構成ファイルを使用することに加えて、UniApp は Page を動的に設定することによる複数ページの動的生成もサポートしています。アプリケーションの起動時に API を介してページを動的に設定し、このページを開く必要があるときにジャンプできます。

例:

// index.vue

export default {
    methods: {
        onTap() {
            uni.navigateTo({
                url: 'pages/dynamic-page/dynamic-page'
            });
        }
    }
}

// dynamic-page.vue

export default {
    onLoad(options) {
        console.log(options.title);
    }
}

// app.vue

export default {
    onLaunch() {
        // 动态添加页面
        uni.addPage({
            route: 'pages/dynamic-page/dynamic-page',
            config: {
                "navigationBarTitleText": "动态生成页面"
            }
        });
    }
}

uni.addPage メソッドを呼び出してページを動的に追加し、動的ページを使用する必要がある場所にジャンプします。

3. プラグインとネイティブ コードによって実現

複数ページのパッケージ化をサポートする必要があるシナリオでは、プラグインとネイティブ コードを作成することでこれを実現できます。 。プラグインはネイティブ コードと連携して完全なマルチページ サポートを実現でき、フレームワーク自体でサポートされていない機能を処理するために使用することもできます。

例:

// uniapp.config.js

"use strict";

const path = require("path");

module.exports = {
    chainWebpack(config, env, context) {
        // 注册 native 模块
        config.plugin("define").tap(definitions => [
            Object.assign({}, definitions[0], {
                "process.env.NATIVE_MODULE": JSON.stringify(true)
            })
        ]);
        // 添加插件
        config.plugin("extra-pages").use(require("./plugins/extra-pages"));
        // 将插件资源目录添加到代码搜索路径中
        config.resolve.alias.set("extra-pages", path.resolve(__dirname, "./plugins/extra-pages"));
    }
};

// plugins/extra-pages.js

const webpack = require("webpack");
const path = require("path");

class ExtraPagesPlugin {
    constructor(options) {
        this.options = options;
    }

    apply(compiler) {
        compiler.hooks.watchRun.tapAsync("ExtraPagesPlugin", (watching, callback) => {
            this.run(callback);
        });
    }

    getFiles(src) {
        return new Promise((resolve, reject) => {
            // read directory
            const files = fs.readdirSync(src);
            return resolve(files);
        });
    }

    run(callback) {
        console.log("增量更新多页面...");
        // 处理页面文件
        this.getFiles("./src/pages").then(files => {
            files.forEach(item => {
                const name = item.split(".")[0];
                const content = `
                import Vue from 'vue';
                import App from '../${name}.vue';

                const app = new Vue({
                    ...App
                });

                app.$mount();
                `;
                fs.writeFileSync(`./src/pages/${name}.js`, content);
            });
            console.log(`增量更新多页面成功！`);
            callback();
        });
    }
}

module.exports = ExtraPagesPlugin;

// extra-pages/dynamic-page.vue

<template>
    <view>
        <text>{{ title }}</text>
    </view>
</template>

<script>
    const app = getApp();

    export default {
        data() {
            return {
                title: "动态页面"
            };
        },
        onLoad(options) {
            console.log(options);
            Object.assign(this, options);
            // 添加原生页面
            app.addNativePage({
                route: "dynamic-page",
                title: this.title,
                url: `pages/${this.$route.path}`
            });
        }
    };
</script>

上記のコードでは、プラグインを追加するように uniapp.config.js ファイルを構成します。これには主に 2 つのステップが含まれます: ExtraPagesPlugin を定義し、それをプラグインを追加し、プラグインのリソース ディレクトリがコード検索パスに追加されます。次に、extra-pages.js でページを処理し、増分パッケージ化を必要とするページを動的に生成し、extra-pages/dynamic-page.vue の app.addNativePage メソッドを呼び出してネイティブ ページをページ スタックに追加します。

要約すると、UniApp フレームワークは複数ページのパッケージ化を実装するさまざまな方法をサポートしており、開発者は自分のニーズに応じて適切な方法を選択できます。同時に、実際の開発においては、問題が発生した場合に迅速に修復・最適化できるよう、さまざまなシナリオに応じて柔軟に設定・調整することも必要です。

以上がuniapp は複数ページのパッケージ化をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。