Does uniapp support multi-page packaging?

UniApp is a cross-platform application development framework based on Vue.js, which can quickly build multi-terminal applications and package them for release at the same time. However, does uniapp support multi-page packaging? This article will answer it for you.

One of the features of the UniApp framework is that it can generate applications on different ends through the same set of code. It uses a simple set of routing configurations to manage jumps between different pages. During the page jump process, UniApp also supports passing parameters and dynamic routing configuration. These features greatly improve the efficiency and flexibility of development.

For multi-page applications, UniApp also supports multiple implementation methods. We can switch between multiple pages by configuring routing and components. When configuring routing, we can specify the name, path, icon and other attributes of each page. We can also configure different page components and life cycle functions for different platforms.

However, in actual development, we often need to package multiple pages into one application, or package multiple applications onto one platform. At this time, we need to use UniApp's packaging configuration tool to complete .

The following introduces several ways to implement multi-page packaging:

1. Configuration through pages.json

When packaging UniApp, you can use pages.json Configuration file to specify the pages that need to be packaged. The pages.json file is a global configuration file that specifies all pages in the application. We can allocate different pages to different folders according to needs, and then configure the corresponding path information in pages.json.

For example:

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

Among them, each pages array item represents a page. Path represents the path of a page, which can be a relative path or an absolute path.

2. Achieved by dynamically setting Page

In addition to using configuration files for multi-page packaging, UniApp also supports dynamically generating multiple pages by dynamically setting Page. We can dynamically set the Page through the API when the application starts, and jump when we need to open this page.

For example:

// 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": "动态生成页面"
            }
        });
    }
}

Dynamicly add a Page by calling the uni.addPage method, and then jump where you need to use the dynamic page.

3. Achieved through plug-ins and native code

In scenarios where multi-page packaging needs to be supported, we can achieve this by writing plug-ins and native code. Plug-ins can cooperate with native code to achieve complete multi-page support, and can also be used to handle functions not supported by the framework itself.

For example:

// 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>

In the above code, we configure the uniapp.config.js file to add the plug-in, which mainly includes two steps: define an ExtraPagesPlugin and add it to the plugin, and add The plugin resource directory is added to the code search path. Then process the page in extra-pages.js, dynamically generate pages that require incremental packaging, and add the Native page to the page stack by calling the app.addNativePage method in extra-pages/dynamic-page.vue.

To sum up, the UniApp framework supports a variety of ways to implement multi-page packaging, and developers can choose the method that suits them according to their own needs. At the same time, in actual development, it is also necessary to flexibly configure and adjust according to different scenarios so that when problems are encountered, they can be quickly repaired and optimized.

The above is the detailed content of Does uniapp support multi-page packaging?. For more information, please follow other related articles on the PHP Chinese website!