Adakah uniapp menyokong pembungkusan berbilang halaman?

UniApp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan Vue.js, yang boleh membina aplikasi berbilang terminal dengan cepat dan membungkusnya untuk dikeluarkan pada masa yang sama. Walau bagaimanapun, adakah uniapp menyokong pembungkusan berbilang halaman? Artikel ini akan menjawabnya untuk anda.

Salah satu ciri rangka kerja UniApp ialah ia boleh menjana aplikasi pada hujung yang berbeza melalui set kod yang sama. Ia menggunakan satu set konfigurasi penghalaan mudah untuk menguruskan lompatan antara halaman yang berbeza. Semasa proses lompat halaman, UniApp juga menyokong parameter lulus dan konfigurasi penghalaan dinamik Ciri-ciri ini meningkatkan kecekapan dan fleksibiliti pembangunan.

Untuk aplikasi berbilang halaman, UniApp juga menyokong pelbagai kaedah pelaksanaan Kami boleh bertukar antara berbilang halaman dengan mengkonfigurasi penghalaan dan komponen. Semasa mengkonfigurasi penghalaan, kami boleh menentukan nama, laluan, ikon dan atribut lain bagi setiap halaman Kami juga boleh mengkonfigurasi komponen halaman yang berbeza dan fungsi kitaran hayat untuk platform yang berbeza.

Walau bagaimanapun, dalam pembangunan sebenar, kami selalunya perlu membungkus berbilang halaman ke dalam satu aplikasi, atau membungkus berbilang aplikasi pada satu platform Pada masa ini, kami perlu menggunakan konfigurasi pembungkusan dan alat pemadanan UniApp untuk melengkapkan .

Berikut memperkenalkan beberapa cara untuk melaksanakan pembungkusan berbilang halaman:

1. Konfigurasi melalui pages.json

Apabila membungkus UniApp, anda boleh mengkonfigurasinya melalui pages.json Fail konfigurasi untuk menentukan halaman yang perlu dibungkus. Fail pages.json ialah fail konfigurasi global yang menentukan semua halaman dalam aplikasi. Kami boleh memperuntukkan halaman yang berbeza kepada folder yang berbeza mengikut keperluan, dan kemudian mengkonfigurasi maklumat laluan yang sepadan dalam pages.json.

Contohnya:

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

di mana setiap item tatasusunan halaman mewakili halaman. Laluan mewakili laluan halaman, yang boleh menjadi laluan relatif atau laluan mutlak.

2. Dicapai dengan menetapkan Halaman secara dinamik

Selain menggunakan fail konfigurasi untuk pembungkusan berbilang halaman, UniApp juga menyokong penjanaan berbilang halaman secara dinamik dengan menetapkan Halaman secara dinamik. Kami boleh menetapkan Halaman secara dinamik melalui API apabila aplikasi bermula, dan melompat apabila kami perlu membuka halaman ini.

Contohnya:

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

Tambah Halaman secara dinamik dengan memanggil kaedah uni.addPage, dan kemudian lompat ke tempat yang anda perlukan untuk menggunakan halaman dinamik.

3. Dicapai melalui pemalam dan kod asli

Dalam senario di mana pembungkusan berbilang halaman perlu disokong, kita boleh mencapai ini dengan menulis pemalam dan kod asli . Pemalam boleh bekerjasama dengan kod asli untuk mencapai sokongan berbilang halaman yang lengkap, dan juga boleh digunakan untuk mengendalikan fungsi yang tidak disokong oleh rangka kerja itu sendiri.

Contohnya:

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

Dalam kod di atas, kami mengkonfigurasi fail uniapp.config.js untuk menambah pemalam, yang terutamanya merangkumi dua langkah: tentukan ExtraPagesPlugin dan tambahkannya pada pemalam, dan tambah Direktori sumber pemalam ditambahkan pada laluan carian kod. Kemudian proses halaman dalam extra-pages.js, jana halaman secara dinamik yang memerlukan pembungkusan tambahan dan tambahkan halaman Asli pada tindanan halaman dengan memanggil kaedah app.addNativePage dalam extra-pages/dynamic-page.vue.

Ringkasnya, rangka kerja UniApp menyokong pelbagai cara untuk melaksanakan pembungkusan berbilang halaman, dan pembangun boleh memilih kaedah yang sesuai dengan mereka mengikut keperluan mereka sendiri. Pada masa yang sama, dalam pembangunan sebenar, ia juga perlu untuk mengkonfigurasi dan menyesuaikan secara fleksibel mengikut senario yang berbeza supaya apabila masalah dihadapi, ia boleh dibaiki dan dioptimumkan dengan cepat.

Atas ialah kandungan terperinci Adakah uniapp menyokong pembungkusan berbilang halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!