Parlons de la façon dont les débutants utilisent Uniapp

À mesure que le marché des applications mobiles se développe, de plus en plus d'entreprises ou de particuliers commencent à développer leurs propres applications mobiles. Cependant, de nombreux développeurs sont découragés par des problèmes tels que l'apprentissage de plusieurs langages de programmation, l'adaptation à divers systèmes de téléphonie mobile et à des écrans de différentes tailles. Le cadre de développement multiplateforme en forme de couteau suisse uniapp a vu le jour. Il s'agit d'un cadre de développement qui peut fonctionner sur plusieurs plates-formes, permettant aux développeurs de développer des applications complètes applicables à plusieurs plates-formes sous un seul code.

uniapp est basé sur le framework Vue et compile son code source en applications natives pour différentes plateformes. Les plates-formes prises en charge incluent : iOS, Android, H5, mini-programmes, applications rapides, applications, etc. Cet article guidera les débutants sur la manière d'utiliser Uniapp.

Installer uniapp

Tout d'abord, avant d'installer uniapp, vous devez installer l'environnement Node.js et vous assurer que sa version est supérieure à 8.0.

Après avoir installé l'environnement Node.js, nous pouvons utiliser la ligne de commande npm (outil de gestion de packages Node.js) pour installer l'outil d'échafaudage uniapp.

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

De cette façon, vous pouvez installer avec succès uniapp et créer un projet initial mon-projet.

Structure des répertoires d'uniapp

Après avoir créé le projet, jetons un coup d'œil à la structure des répertoires du projet. Les dossiers principaux du projet incluent :

• components : dossier de composants, se terminant par le suffixe .vue.
• pages : dossier de pages de stockage, se terminant par le suffixe .vue.
• statique : stockez des fichiers statiques, tels que des images et des polices, etc.
• unpackage : Le dossier généré après le package du projet.
• App.vue : La page principale de toute l'application.
• main.js : Le fichier d'entrée de l'ensemble de l'application.

Écriture d'une application uniapp

Nous avons installé avec succès uniapp et créé un projet initial, alors écrivons ensuite un code simple.

Créer une page

Créez un nouveau fichier vue dans le dossier pages du projet, tel que home.vue. Écrivez le code suivant dans le fichier :

<template>
  <view class="content">
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: 'Hello uniapp!'
      }
    }
  }
</script>

De cette façon, nous avons créé une nouvelle page.

Accédez à une autre page

Ensuite, disons que nous voulons cliquer sur un bouton de la page 1 et passer à la page 2. Nous pouvons ajouter le code suivant à la page 1 :

<button @click="goToPage2">Go to page 2</button>

Lorsque le bouton est cliqué, nous devons ajouter le code suivant à la balise script de la page 1 :

methods: {
  goToPage2() {
    uni.navigateTo({
      url: '/pages/page2.vue'
    })
  }
}

De cette façon, nous pouvons passer à la page 2 de la page 1 .

Introduction des images

Supposons que nous devions introduire une image dans la page. Vous devez d'abord stocker l'image dans le dossier statique, puis utiliser un chemin relatif pour la référencer dans le fichier .vue.

<template>
  <view>
    <image :src="`/static/${image}`" mode="aspectFit"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: 'image.jpg'
      }
    }
  }
</script>

Initier une requête réseau

get request:

uni.request({
  url: 'https://www.xxx.com/api/list',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

post request:

uni.request({
  url: 'https://www.xxx.com/api/list',
  method: 'POST',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

exécuter uniapp

Après avoir terminé l'écriture du code ci-dessus, nous devons exécuter la commande suivante dans la ligne de commande :

npm run dev:%PLATFORM%

%PLATFORM%représente le plate-forme requise, vous pouvez remplir iOS, Android, etc. ici. Après avoir exécuté la commande ci-dessus, vous pouvez prévisualiser l'effet du projet sur le simulateur ou la machine réelle.

Résumé

uniapp fournit aux développeurs des solutions de développement multiplateformes, ce qui réduit considérablement les coûts de développement et améliore l'efficacité du développement. Grâce à lui, les développeurs n'ont besoin de maîtriser qu'un seul langage de programmation pour développer des applications complètes sur plusieurs plates-formes, aidant ainsi les développeurs à mener leurs opérations de développement plus efficacement.

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!