Démarrage rapide pour le développement cloud du programme WeChat Mini (3/4)

avant-propos

Dans le partage de "WeChat Mini Program Cloud Development Quick Start (2/4)" , nous avons déjà fait toute la requête et la pagination de la liste. On peut dire qu'elle est très facile à utiliser pour le mémo. En ce moment , le garçon de code est dans mon esprit J'ai déjà commencé à fantasmer que j'ai atteint le sommet de la vie.

Ensuite, analysons les étapes spécifiques des exigences :
exigences de remplacement d'image

Sélectionner une image
télécharger une image
télécharger à nouveau
Sélectionner une image
supprimer l'image

Ici, vous devez gérer les données de l'image et également la télécharger sur le stockage en nuage.

manipulation d'image locale

Début de la mise en page

Cela fait longtemps que je n'ai pas écrit de style de mise en page, n'est-ce pas un peu rouillé ? J'ai envie de revoir, de revoir le passé et d'apprendre le nouveau. Lorsque l'on veut déboguer le style d'une page, il faut d'abord verrouiller le mode de compilation en cours :

Tout d'abord, placez une icône de photo dans la zone de composant d'image de la tête, et lorsque l'utilisateur clique sur l'icône, nous sélectionnerons l'image.

 <!-- 头部 -->
  <view class="head-bg">
  <!-- 省略无关布局 -->
    <image class="img-add" src="../../images/img_add.png"></image>
  </view>

Ensuite, configurez-le avec un style et placez la position grossièrement sur la tasse de thé, en utilisant le positionnement de position.

.img-add{
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 65rpx;
  top: 450rpx;
}

effet final

Ensuite, liez un événement de clic via bindtap pour sélectionner l'image.

<image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />

Sélectionner une image

Dans cette méthode chooseImg, vous pouvez choisir une image de l'album local ou prendre une photo avec l'appareil photo via wx.chooseImage().

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'],
      success (res) {
        // 由于是数组然后只取一张图片，所以默认取下标为0的图片
        console.log(res.tempFilePaths[0])
      }
    })

explication du paramètre chooseImage :

count : le nombre de photos pouvant être sélectionnées, la valeur par défaut est 9
sourceType : sélectionnez la source de l'image, qui peut être prise en charge par les téléphones portables et les appareils photo par défaut.
sizeType : La taille de l'image sélectionnée, la valeur par défaut est que l'image d'origine et l'image compressée sont prises en charge.
succès (résolution)

remplacer l'image

Une fois la sélection terminée, l'étape suivante consiste à afficher l'image. Tout d'abord, définissez une variable dans data pour stocker le chemin de l'image sélectionnée.

data: {
    topImgUrl:''
  }

Stockez ensuite la valeur obtenue dans cette variable

chooseImg(){
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        that.data.topImgUrl = res.tempFilePaths[0]
      }
    })
  }

Auparavant, l'image d'arrière-plan était définie à l'aide de la propriété background-image dans css.

.head-bg {
  width: 750rpx;
  height: 540rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

Les applets ne peuvent pas passer de paramètres à css mais uniquement en wxml, nous devons donc les écrire sous forme de styles en ligne.

 <!-- 头部 -->
  <view class="head-bg" style="background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');" >
   <!-- 省略无关布局 -->
  </view>

Remplacez ensuite topImgUrl par le chemin de l'image

<!-- 头部 -->
   <view class="head-bg" style="background-image: url('{
   
   {topImgUrl}}');" >
    <!-- 省略无关布局 -->
  </view>

Ensuite, lancez-le pour voir l'effet :

À ce stade, nous constaterons que l'utilisateur n'a pas d'image au début, nous devons donc définir une valeur par défaut pour topImgUrl.

 data: {
    topImgUrl:'https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png'
  }

Ensuite, nous choisissons une photo pour essayer de voir l'effet, nous constaterons qu'il n'y a toujours pas d'effet, car les images locales ne sont pas prises en charge. Ensuite, à ce moment, nous devons télécharger sur le stockage en nuage.

Stockage en nuage de téléchargement d'images

Stockage de fichiers dans le cloud, accélération CDN intégrée, prend en charge le chargement/téléchargement direct sur le front-end et peut être géré visuellement sur la console de développement cloud.

Visualisation du stockage en nuage

Cette image par défaut est en fait celle que nous avons téléchargée manuellement sur le stockage cloud auparavant. Ouvrez le panneau de configuration du développement cloud et sélectionnez "Stockage" pour voir l'image d'arrière-plan et l'image de la bulle précédemment téléchargées.

En plus de gérer directement les fichiers, il prend également en charge la définition des autorisations comme une base de données cloud.

Et il prend également en charge la configuration du cache et prend en charge plusieurs stratégies de configuration.

télécharger sur le stockage en nuage

Pas grand chose à dire, ensuite, téléchargez les images sélectionnées sur le stockage en nuage via l'applet. Ici, utilisez wx.cloud.uploadFile pour télécharger les ressources locales sur l'espace de stockage en nuage.

wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
}).then(res => {
  // get resource ID
  console.log(res.fileID)
})

Explication du paramètre uploadFile :

cloudPath : nom du chemin
filePath : chemin du fichier
valeur de retour res

En téléchargeant le code combiné avec le code d'image sélectionné à l'instant

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1, // 只选择一张图片
      sizeType: ['compressed'], // 使用压缩图
      sourceType: ['album', 'camera'], // 支持照相，相册
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上传第一张图片
        // 生成规则：文件夹路径 + 时间戳 + 随机数 + 文件后缀
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('上传成功后获得的res：', res)
            that.setData({
              topImgUrl:res.fileID
            })
          },
          fail:err=>{
            console.log(err)
          }
        })
      }
    })
  }

Télécharger avec succès res

Gestion du stockage, un dossier est généré automatiquement et les images sont téléchargées ici

supprimer des fichiers en ligne

Bien sûr, si vous le téléchargez, vous devez le supprimer, car il y aura toujours des photos que vous n'aimez pas et qui doivent être supprimées. Nécessite wx.cloud.deleteFile pour supprimer des fichiers du stockage cloud.

wx.cloud.deleteFile({
  fileList: ['cloud://demo-3gf9i3wu06a03ab1.6465-demo-3gf9i3wu06a03ab1-1306451997/top-img/1627462991919-39954.png']
}).then(res => {
  console.log(res.fileList)
})

Explication du paramètre deleteFile :

fileList : tableau d'ID de fichier
valeur de retour res

Ensuite, je vais utiliser l'ID de fichier tout à l'heure pour voir le résultat renvoyé

obtenir un lien en ligne

Lorsque le FileID est obtenu, il ne peut toujours pas être affiché. À ce stade, il est nécessaire d'obtenir le chemin de l'image via le FileID et d'utiliser wx.cloud.getTempFileURL pour échanger l'ID de fichier cloud contre un lien réel.

wx.cloud.getTempFileURL({
  fileList: ['cloud://xxx', 'cloud://yyy'],
  success: res => {
    // get temp file URL
    console.log(res.fileList)
  },
  fail: err => {
    // handle error
  }
})

Explication du paramètre getTempFileURL :

fileList : tableau d'ID de fichier
valeur de retour res

Ensuite, je vais utiliser l'ID de fichier tout à l'heure pour voir le résultat renvoyé

Ensuite, nous devons épouser le chemin, le code final

chooseImg: function () {
    const that = this
    // 1. 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上传第一张图片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        // 2. 上传图片
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            // 3. 获取链接
            wx.cloud.getTempFileURL({
              fileList: [res.fileID],
              success: res => {
                that.setData({
                  topImgUrl: res.fileList[0].tempFileURL
                })
              }
            })
          }
        })
      }
    })
  }

Enfin téléchargé sur l'image après plusieurs rebondissements et affiché

Je crois que lorsque vous verrez cela, vous vous plaindrez certainement de la raison pour laquelle c'est si gênant ? Peut-il être plus simple?
Bien sûr, nous pouvons omettre une étape, qui consiste à obtenir le lien, car l'attribut src du composant image prend en charge l'ID de fichier, vous devez donc obtenir le lien.

De plus, vous pouvez voir que s'il s'agit d'une bulle d'image d'en-tête personnalisée, l'existence n'a aucun sens, car elle bloquera le contenu de l'image elle-même, nous ferons donc un ajustement, s'il y a une image personnalisée, une image sera affiché, sinon, suivez simplement le design original.

Modifier la mise en page et résumer le style

/* 头部大小 */
.head {
  width: 750rpx;
  height: 540rpx;
}
/* 头部背景 */
.head-bg {
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

La structure de mise en page spécifique change, et l'affichage et le masquage sont contrôlés par le paramètre topImgUrl

<!-- 头部 -->
  <image wx:if="{
   
   {fileID}}" src="{
   
   {fileID}}" class="head"></image>
  <view wx:if="{
   
   {! fileID}}" class="head head-bg" >
    <view bindtap="randomMsg" class="head-bubble">
      <!-- 头像 -->
      <view class="user-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <!-- 问候语 -->
      <text>，{
   
   {message}}</text>
    </view>
    <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />
  </view>

Télécharger le code complet de l'image

chooseImg: function () {
    const that = this
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上传第一张图片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        // 上传图片
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
          // 设置文件ID
            that.setData({
              fileID: res.fileID
            })
          }
        })
      }
    })
  },

Bien que l'effet ait été obtenu, il y a toujours un problème que l'image par défaut sera toujours affichée la prochaine fois que vous entrerez, et les données ne seront pas enregistrées, donc pour le moment, nous devons utiliser les opérations de base de données que nous avons apprises. Comment gérer les données de fond dans la base de données cloud ?

Gestion des images de fond

Ne sous-estimez pas cette fonction. Bien que nous ayons implémenté l'activité du petit programme avant cette fonction, il y a encore certaines choses qui doivent être prises en compte de manière globale dans le traitement de la logique des données.

Selon la pratique habituelle, analysez d'abord les idées de mise en œuvre spécifiques :

Créer une nouvelle collection d'arrière-plan pour stocker les informations d'arrière-plan
Un enregistrement doit être ajouté lors de l'enregistrement de l'arrière-plan
Lors du remplacement de l'arrière-plan, vous devez supprimer et ajouter
Lors de la suppression de l'arrière-plan, vous devez supprimer l'image en même temps
L'utilisateur saisit l'affichage des données d'arrière-plan de la requête

Ce qui précède utilisé n'est que le contenu appris dans le contenu partagé précédent.Cette fois, utiliser les mêmes connaissances pour réaliser différentes entreprises équivaut à un processus de consolidation et de révision de vos connaissances antérieures et de renforcement de votre compréhension de ces points de connaissance.

Créer un nouvel ensemble de données

Utilisé pour stocker des informations sur l'image d'arrière-plan

Créez-en un nouveau appelé background pour stocker et gérer les données d'arrière-plan, puis examinons les autorisations :

Parce que dans les besoins réels de l'entreprise, cet arrière-plan ne peut être vu que par l'utilisateur actuel, de sorte que les autorisations par défaut conviennent à notre activité actuelle et n'ont pas besoin d'être ajustées.

Définir l'interface de fonctionnement

L'applet doit exploiter la base de données d'arrière-plan. Nous créons donc un background.js dans le dossier api pour écrire les méthodes d'exploitation de la base de données associées.

// 获取背景
function getBackground() {
}

// 添加背景
function addBackground(data)
}

// 删除背景
function delBackground(id) {
}

// 导出声明
export {
  getBackground,
  addBackground,
  delBackground
}

Selon les besoins réels, la définition de décibel est utilisée pour obtenir le fond, ajouter le fond, supprimer le fond, puis faire une déclaration d'exportation à la fin afin de permettre l'importation et l'utilisation d'autres js.

enregistrer l'arrière-plan du téléchargement

Mettez d'abord en œuvre la méthode d'ajout de données

// 添加背景
function addBackground(data) {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 找到集合获取数据
  const background = db.collection('background')
  // 3. 添加创建时间
  data.createTime = db.serverDate()
  // 4. 集合添加数据
  return background.add({data})
}

Ici, j'ai préparé un petit repas pour tout le monde, en utilisant serverDate pour obtenir l'heure du serveur, qui peut être utilisée pour les conditions de requête, la mise à jour des valeurs de champ ou des valeurs de champ lors de l'ajout d'enregistrements.

Description du paramètre serverDate :

décalage : en millimètres, vous pouvez définir le décalage horaire

Rendez-vous ensuite sur la page de la liste pour l'utiliser, introduisez d'abord la méthode file :
add to the head of list.js

import {
  addBackground
} from '../../api/background.js'

Après avoir sélectionné l'image et l'avoir téléchargée, utilisez la méthode add :

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上传第一张图片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            let data = {
              fileID: res.fileID
            }
            that.setData(data)
            addBackground(data)
          }
        })
      }
    })
  },

Après l'opération d'ajout, les données sont ajoutées à la base de données :

Nous pouvons modifier le champ createTime :

Vous pouvez voir qu'il s'agit d'un paramètre de champ de type heure.
Une fois l'ajout terminé, il reste deux choses à faire :

Vérifiez les informations de base lors de la saisie
Lorsque vous remplacez l'arrière-plan, supprimez-le d'abord, puis ajoutez-le

Interroger des informations générales

Implémentez d'abord la méthode de requête de données :

// 获取背景
function getBackground() {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 找到集合获取数据
  const background = db.collection('background')
  // 3. 查询集合数据
  return background.get()
}

Introduisez la méthode de requête dans list.js :

import {
  addBackground,
  getBackground
} from '../../api/background.js'在 onLoad 进行查询调用：

Effectuez un appel de requête dans onLoad :

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取背景图
    this.getBackground()
    // 获取问候语
    this.randomMsg()
  },
  // 获取背景图
  getBackground(){
    getBackground().then(res => {
      // 判断是否有数据
      if (res.data.length) {
        this.setData({
          fileID:res.data[0].fileID // 获取第一条数据
        })
      }
    })
  }

Lorsque l'utilisateur accède à la page de liste, l'arrière-plan téléchargé s'affiche.

Remplacer les informations d'arrière-plan

Ici, il faut d'abord supprimer puis ajouter, bien sûr, cela peut également être mis en œuvre de manière modifiée. Il convient de noter ici que quelle que soit la méthode utilisée, les fichiers d'arrière-plan précédents doivent être supprimés et les images inutiles doivent être nettoyées à temps, sinon les ressources du serveur seront occupées en vain et les ressources de stockage devront être facturées. . Bien que les coûts de stockage ne soient pas chers, il est nécessaire de conserver une bonne habitude d'épargne.

Implémentez d'abord la méthode delete :

// 删除背景数据同时删除背景图片
function delBackground(id,fileID) {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 获取集合对象
  const background = db.collection('background')
  // 3. 删除背景图片
  wx.cloud.deleteFile({
    fileList: [fileID]
  })
  // 4. 删除当条背景数据
  return background.doc(id).remove()
}

Introduisez la méthode delete dans lis.js :

import {
  addBackground,
  getBackground,
  delBackground
} from '../../api/background.js'

Ici, parce que la suppression nécessite un identifiant, l'identifiant doit être enregistré lors de l'obtention de l'arrière-plan

getBackground(){
    getBackground().then(res => {
      if (res.data.length) {
        const background = res.data[0]
        this.data.background = background
        this.setData({
          fileID:background.fileID
        })
      }
    })
  }

Ensuite, jugez s'il y a un identifiant dans la logique de sélection de l'image, et si c'est le cas, prouvez que l'image a déjà été téléchargée et supprimez-la

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上传第一张图片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            let data = {
              fileID: res.fileID
            }
            that.setData(data)
            addBackground(data)
            // 判断是否之前上传过图片
            if(that.data.background){
              let id = that.data.background._id
              let fileID = that.data.background.fileID
              delBackground(id,fileID)
            }
          }
        })
      }
    })
  }

Après avoir écrit le code de traitement logique JS, j'ai accidentellement découvert que l'ICÔNE pour prendre des photos manquait après le téléchargement de l'image. Plus tard, j'ai vérifié le code de mise en page et j'ai découvert que l'ICÔNE pour prendre des photos était dans la disposition de l'état de l'image non téléchargée, donc il n'était pas masqué. Nous devons déplacer la mise en page et la supprimer.

<!-- 头部 -->
  <image wx:if="{
   
   {fileID}}" src="{
   
   {fileID}}" class="head"></image>
  <view wx:if="{
   
   {!fileID}}" class="head head-bg" >
    <view bindtap="randomMsg" class="head-bubble">
      <!-- 头像 -->
      <view class="user-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <!-- 问候语 -->
      <text>，{
   
   {message}}</text>
    </view>
    <!-- 原来的位置 -->
    <!-- <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" /> -->
  </view>
  <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />

Vous avez terminé! Ma Zai était secrètement heureux, alors il a secrètement mis une photo de lui et de Ma Niu. Mazai y a pensé avant et après, "Cette fonction est toujours très nécessaire!".

Résumer

Apprentissage de l'opération d'image de l'applet : wx.chooseImage(), choisissez l'image
Gestion du stockage en nuage d'images de petit programme :
1. wx.cloud.uploadFile : télécharger le fichier
2. wx.cloud.deleteFile : supprimer un fichier
3. wx.cloud.getTempFileURL : obtenir le lien en ligne
La base de données précédemment apprise : les opérations d'ajout, d'interrogation et de suppression sont combinées pour répondre à une exigence