Que dois-je faire si uniapp ferme la page lors de la sélection d'images ?

Lors du développement d'applications mobiles à l'aide d'uniapp, nous devons souvent laisser les utilisateurs sélectionner des images et les télécharger sur le serveur. Cependant, lors de la mise en œuvre de cette fonction, de nombreux développeurs rencontreront un problème : une fois que l'utilisateur aura sélectionné l'image, la page sera fermée, ce qui empêchera l'utilisateur de continuer l'opération.

Alors, pourquoi cela arrive-t-il ? Comment résoudre ce problème ? Cet article présentera en détail les raisons et les solutions pour lesquelles la sélection d'une image dans uniapp fermera la page.

1. Analyse des causes

Lorsque les utilisateurs choisissent des images dans uniapp, ils utilisent généralement l'API uni.chooseImage() officiellement fournie par uniapp. L'API appellera l'album photo local ou la fonction photo pour permettre à l'utilisateur de sélectionner ou de prendre une ou plusieurs photos.

Cependant, après avoir sélectionné ou pris une photo, l'application uniapp ne reviendra pas à la page d'origine par défaut, mais fermera directement l'album ou la page photo, ce qui conduit au problème de "la sélection d'une image fermera la page".

En effet, l'API uni.chooseImage() est une API asynchrone, qui crée une nouvelle page lorsque l'utilisateur sélectionne ou prend une photo. Une fois que l'utilisateur a terminé la sélection ou l'action de prise de vue, la page sera fermée directement et la boucle d'événements d'uniapp se terminera à ce moment, ce qui rendra impossible la poursuite d'autres opérations.

2. Solution

Afin de résoudre le problème selon lequel la sélection d'une image ferme la page, nous pouvons utiliser une autre API fournie par uniapp : uni.getImageInfo(). Cette API peut obtenir des informations sur l'image, telles que la largeur, la hauteur, le type, etc. Après avoir sélectionné l'image, nous pouvons obtenir les informations sur l'image via cette API et les afficher sur la page actuelle, évitant ainsi la fermeture de la page.

Ce qui suit est un exemple spécifique qui montre comment implémenter la fonction de sélection d'images et de leur affichage sur la page actuelle via l'API uni.getImageInfo().

<template>
  <view>
    <image :src="imgUrl" mode="aspectFit" />
    <button @tap="chooseImage">选择图片</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: ''  // 用于保存选择的图片地址
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths[0]
          // 调用getImageInfo()获取图片信息
          uni.getImageInfo({
            src: tempFilePaths,
            success: (res) => {
              this.imgUrl = tempFilePaths
            }
          })
        }
      })
    }
  }
}
</script>

Dans cet exemple, après avoir sélectionné l'image, nous appelons l'API uni.getImageInfo() pour obtenir les informations sur l'image et les attribuer à la variable imgUrl dans data. Ensuite, nous lions la variable à l'attribut src de l'élément img dans la page via l'instruction v-bind, réalisant ainsi la fonction d'affichage de l'image sélectionnée sur la page actuelle.

Il est à noter que même si cette méthode peut empêcher la fermeture de la page, la page créée en sélectionnant ou en prenant des photos peut quand même occuper certaines ressources système et provoquer des problèmes tels que des fuites de mémoire. Par conséquent, nous vous recommandons, après avoir utilisé la fonction de sélection ou de prise de photos, soit de fermer la page directement, soit d'utiliser la méthode de nettoyage de la mémoire pour libérer des ressources afin d'assurer la stabilité et la robustesse du programme.

Cet article présente les raisons et les solutions pour lesquelles la sélection d'images dans uniapp fermera la page. En utilisant l'API uni.getImageInfo() pour obtenir des informations sur l'image et les afficher sur la page actuelle, nous pouvons éviter la fermeture de la page et mieux améliorer l'expérience utilisateur et la stabilité du programme.

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!