Uniapp prend-il en charge les packagings multipages ?

UniApp est un framework de développement d'applications multiplateforme basé sur Vue.js, qui peut rapidement créer des applications multi-terminaux et les empaqueter pour les publier en même temps. Cependant, Uniapp prend-il en charge le packaging multipage ? Cet article y répondra pour vous.

L'une des fonctionnalités du framework UniApp est qu'il peut générer des applications à différentes fins via le même ensemble de code. Il utilise un ensemble simple de configurations de routage pour gérer les sauts entre différentes pages. Pendant le processus de saut de page, UniApp prend également en charge la transmission des paramètres et la configuration du routage dynamique. Ces fonctionnalités améliorent considérablement l'efficacité et la flexibilité du développement.

Pour les applications multipages, UniApp prend également en charge plusieurs méthodes de mise en œuvre. Nous pouvons basculer entre plusieurs pages en configurant le routage et les composants. Lors de la configuration du routage, nous pouvons spécifier le nom, le chemin, l'icône et d'autres attributs de chaque page. Nous pouvons également configurer différents composants de page et fonctions de cycle de vie pour différentes plates-formes.

Cependant, dans le développement réel, nous devons souvent regrouper plusieurs pages dans une seule application, ou regrouper plusieurs applications sur une seule plate-forme. À l'heure actuelle, nous devons utiliser la configuration et les outils de packaging d'UniApp pour le compléter.

Voici plusieurs façons d'implémenter un packaging multipage :

1. Configuration via pages.json

Lors du packaging d'UniApp, vous pouvez spécifier les pages qui doivent être empaquetées via le fichier de configuration pages.json. Le fichier pages.json est un fichier de configuration global qui spécifie toutes les pages de l'application. Nous pouvons attribuer différentes pages à différents dossiers en fonction des besoins, puis configurer les informations de chemin correspondantes dans pages.json.

Par exemple :

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

où chaque élément du tableau de pages représente une page. Path représente le chemin d'une page, qui peut être un chemin relatif ou un chemin absolu.

2. Obtenu en définissant dynamiquement Page

En plus d'utiliser des fichiers de configuration pour le packaging multi-pages, UniApp prend également en charge la génération dynamique de plusieurs pages en définissant dynamiquement Page. Nous pouvons définir dynamiquement la page via l'API lorsque l'application démarre et sauter lorsque nous devons ouvrir cette page.

Par exemple :

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

Ajoutez dynamiquement une page en appelant la méthode uni.addPage, puis sautez là où vous devez utiliser la page dynamique.

3. Réalisé grâce à des plug-ins et du code natif

Dans les scénarios où l'empaquetage multipage doit être pris en charge, nous pouvons y parvenir en écrivant des plug-ins et du code natif. Les plug-ins peuvent coopérer avec le code natif pour obtenir une prise en charge complète de plusieurs pages et peuvent également être utilisés pour gérer des fonctions non prises en charge par le framework lui-même.

Par exemple :

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

Dans le code ci-dessus, nous configurons le fichier uniapp.config.js pour ajouter le plug-in, qui comprend principalement deux étapes : définir un ExtraPagesPlugin et l'ajouter au plugin, et ajouter le plug-in. dans le répertoire des ressources au milieu du chemin de recherche de code. Traitez ensuite la page dans extra-pages.js, générez dynamiquement les pages qui nécessitent un packaging incrémentiel et ajoutez la page native à la pile de pages en appelant la méthode app.addNativePage dans extra-pages/dynamic-page.vue.

Pour résumer, le framework UniApp prend en charge diverses façons d'implémenter un packaging multipage, et les développeurs peuvent choisir la méthode qui leur convient en fonction de leurs propres besoins. Dans le même temps, dans le développement réel, il doit également être configuré et ajusté de manière flexible en fonction de différents scénarios afin de pouvoir être rapidement réparé et optimisé en cas de problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!