Comment configurer la page de destination dans Uniapp

Avec le développement en profondeur de l'Internet mobile, de plus en plus d'entreprises choisissent de créer leur propre application pour améliorer l'expérience utilisateur et l'image de marque. Afin de réduire les coûts de développement et d'améliorer l'efficacité du développement, de nombreuses entreprises choisissent d'utiliser des frameworks de développement multiplateformes pour créer des applications, et Uniapp est un excellent framework open source parmi eux.

Lors de la création d'une application Uniapp, nous devons définir la page d'entrée, qui est la première page chargée après le lancement de l'application, généralement appelée page de destination ou page d'accueil. Dans cet article, nous détaillerons comment créer et mettre en place une landing page pour votre application Uniapp.

Première étape : créer un projet Uniapp

Téléchargez la dernière version d'Uniapp depuis le site officiel d'Uniapp et installez-la dans votre environnement local :

$ npm install --global @vue/cli@3.0.0-beta.10
$ vue create -p dcloudio/uni-preset-vue my-project

Entrez la commande ci-dessus sur la ligne de commande pour créer un projet uni-app.

Étape 2 : Créer une page de destination

Dans le répertoire src, nous pouvons créer notre propre page de vue de page d'accueil. Vous pouvez choisir votre éditeur préféré pour écrire. Ici, nous utilisons l'éditeur HbuilderX pour créer un fichier index.vue :

<template>
  <view class="container">
    <text class="text">这是我的Uniapp应用程序的落地页</text>
  </view>
</template>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 24px;
  }
</style>

En termes simples, nous avons créé une balise conteneur et une balise texte, et le conteneur est utilisé. pour centrer le contenu chinois et le centrer. À des fins de démonstration ici, le contenu textuel que nous définissons est simplement « Ceci est la page de destination de mon application Uniapp ».

Étape 3 : Configurer la page de destination

Après avoir créé la page de destination, nous devons indiquer à l'application Uniapp qu'il s'agit de notre page d'entrée et qu'elle doit être configurée dans le fichier pages.json. Ouvrez le fichier pages.json et ajoutez le code suivant :

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  }
}

Dans ce fichier pages.json, nous définissons toutes les pages de l'application, voici uniquement la page "index" que nous venons de créer. La propriété "navigationBarTitleText" est utilisée pour définir le texte du titre de la barre de navigation. De plus, nous devons également définir le style global de la barre de navigation.

Étape 4 : Définir la page de démarrage de l'application

Nous avons configuré la page de destination, mais nous devons également indiquer à Uniapp quelle est la page de démarrage de l'application. Ajoutez le contenu suivant au fichier pages.json :

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  },
  "launchPage": {
    "path": "pages/index/index"
  }
}

Ici, nous utilisons les attributs tabBar et launchPage. tabBar est utilisé pour définir la barre de navigation inférieure de l'application et launchPage est utilisé pour définir la page de lancement de l'application. Nous définissons la page de démarrage sur la page "index" que nous venons de créer.

Ici, nous devons également définir plusieurs propriétés pour la barre de navigation inférieure de l'application. Une seule "page d'accueil" est définie ici. D'autres pages peuvent être définies selon les besoins, et les propriétés iconPath et selectedIconPath sont utilisées pour définir les icônes. correspondant à la barre de navigation et à l’icône d’état d’activation.

Étape 5 : Lancez l'application

Maintenant que nous avons configuré la page de destination et la page de démarrage, nous pouvons lancer l'application pour voir l'effet. Entrez la commande suivante dans la console de commande pour démarrer l'application :

$ npm run dev:%PLATFORM%

Le %PLATFORM% représente ici la plate-forme que vous utiliserez plus tard, qui peut être h5, app-plus, mp-weixin et d'autres plates-formes.

Maintenant, nous avons créé et mis en place avec succès la page de destination de l'application Uniapp. Que vous créiez une application Web ou une application mobile multiplateforme, Uniapp est un puissant framework de développement qui vous permet de créer des applications impressionnantes.

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!