Inicio rápido para el desarrollo en la nube del programa WeChat Mini (3/4)

prefacio

Al compartir "WeChat Mini Program Cloud Development Quick Start (2/4)" , ya hemos realizado todas las consultas y la paginación de la lista. Se puede decir que es muy fácil de usar para la nota. En este momento , el chico del código está en mi mente. Ya he comenzado a fantasear que he llegado a la cima de la vida.

A continuación, analicemos los pasos específicos de los requisitos:
requisitos de reemplazo de imagen

Seleccionar imagen
cargar imagen
subir de nuevo
Seleccionar imagen
borrar imagen

Aquí debe administrar los datos de la imagen y, al mismo tiempo, debe cargarla en el almacenamiento en la nube.

manipulación de imágenes locales

Inicio de diseño

Ha pasado mucho tiempo desde que escribí un estilo de diseño, ¿no está un poco oxidado? Tengo ganas de repasar, repasar el pasado y aprender lo nuevo. Cuando queremos depurar el estilo de una página, primero debemos bloquear el modo de compilación actual:

Primero, coloque un ícono de foto en el área del componente de imagen de la cabeza, y cuando el usuario haga clic en el ícono, seleccionaremos la imagen.

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

Luego configúrelo con un estilo y coloque la posición aproximadamente en la taza de té, utilizando el posicionamiento de posición.

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

efecto final

Luego vincule un evento de clic a través de bindtap para seleccionar la imagen.

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

Seleccionar imagen

En este método chooseImg, puede elegir una imagen del álbum local o tomar una foto con la cámara a través de wx.chooseImage().

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

Elegir explicación del parámetro de imagen:

recuento: el número de fotos que se pueden seleccionar, el valor predeterminado es 9
sourceType: seleccione la fuente de la imagen, que puede ser compatible con teléfonos móviles y cámaras de forma predeterminada.
sizeType: el tamaño de la imagen seleccionada, el valor predeterminado es que se admiten tanto la imagen original como la imagen comprimida.
éxito (res)

reemplazar imagen

Después de completar la selección, el siguiente paso es mostrar la imagen.Primero, defina una variable en los datos para almacenar la ruta de la imagen seleccionada.

data: {
    topImgUrl:''
  }

Luego almacena el valor obtenido en esta variable.

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

Anteriormente, la imagen de fondo se configuraba mediante la propiedad background-image en 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%;
}

Los applets no pueden pasar parámetros a css sino solo en wxml, por lo que debemos escribirlos como estilos en línea.

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

Luego reemplace topImgUrl con la ruta de la imagen

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

Luego ejecútalo para ver el efecto:

En este momento, encontraremos que el usuario no tiene una imagen al principio, por lo que debemos establecer un valor predeterminado para topImgUrl.

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

Luego elegimos una foto para intentar ver el efecto, encontraremos que todavía no hay efecto, porque las imágenes locales no son compatibles. Luego, en este momento, necesitamos cargarlo en el almacenamiento en la nube.

Carga de imágenes almacenamiento en la nube

Almacenamiento de archivos en la nube, aceleración de CDN incorporada, admite carga/descarga directa en el front-end y se puede administrar visualmente en la consola de desarrollo en la nube.

Visualización de almacenamiento en la nube

Esta imagen predeterminada es en realidad la que cargamos manualmente en el almacenamiento en la nube antes. Abra el panel de control de desarrollo en la nube y seleccione "Almacenamiento" para ver la imagen de fondo y la imagen de burbuja cargadas anteriormente.

Además de administrar archivos directamente, también admite la configuración de permisos como una base de datos en la nube.

Y también admite la configuración de caché y admite múltiples estrategias de configuración.

subir al almacenamiento en la nube

No hay mucho que decir, a continuación, cargue las imágenes seleccionadas en el almacenamiento en la nube a través del applet. Aquí, use wx.cloud.uploadFile para cargar los recursos locales en el espacio de almacenamiento en la nube.

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

explicación del parámetro uploadFile:

cloudPath: nombre de la ruta
filePath: ruta del archivo
valor de retorno res

Subiendo el código combinado con el código de la imagen seleccionada justo ahora

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)
          }
        })
      }
    })
  }

Cargar con éxito res

Gestión de almacenamiento, se genera automáticamente una carpeta y las imágenes se cargan aquí

eliminar archivos en línea

Por supuesto, si lo subes, debes eliminarlo, porque siempre habrá imágenes que no te gusten y que deban eliminarse. Requiere wx.cloud.deleteFile para eliminar archivos del almacenamiento en la nube.

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

Explicación del parámetro deleteFile:

fileList: matriz de ID de archivo
valor de retorno res

A continuación, usaré el ID de archivo ahora mismo para ver el resultado devuelto

obtener enlace en línea

Cuando se obtiene el ID de archivo, aún no se puede mostrar. En este momento, es necesario obtener la ruta de la imagen a través del ID de archivo y usar wx.cloud.getTempFileURL para intercambiar el ID del archivo en la nube por un enlace real.

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

explicación del parámetro getTempFileURL:

fileList: matriz de ID de archivo
valor de retorno res

A continuación, usaré el ID de archivo ahora mismo para ver el resultado devuelto

A continuación, debemos casarnos con la ruta, el código 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
                })
              }
            })
          }
        })
      }
    })
  }

Finalmente subió a la imagen después de varios giros y vueltas y la mostró

Creo que cuando vea esto, definitivamente se quejará de por qué es tan problemático. ¿Puede ser más simple?
Por supuesto, podemos omitir un paso, que es obtener el enlace, porque el atributo src del componente de imagen admite la ID del archivo, por lo que necesita obtener el enlace.

Además, puede ver que si es una burbuja de imagen de encabezado personalizada, no tiene sentido que exista, porque bloqueará el contenido de la imagen en sí, por lo que haremos un ajuste, si hay una imagen personalizada, una imagen se mostrará, si no Simplemente siga el diseño original.

Modificar el diseño y abstraer el estilo.

/* 头部大小 */
.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 estructura de diseño específica cambia, y la visualización y la ocultación están controladas por el parámetro 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>

Subir imagen código completo

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
            })
          }
        })
      }
    })
  },

Aunque se ha logrado el efecto, todavía existe el problema de que la imagen predeterminada aún se mostrará la próxima vez que ingrese y los datos no se guardarán, por lo que en este momento necesitamos usar las operaciones de base de datos que hemos aprendido. ¿Cómo administrar los datos de fondo en la base de datos en la nube?

Gestión de imágenes de fondo

No subestimes esta función Aunque hemos implementado el negocio del programa pequeño antes de esta función, todavía hay algunas cosas que deben considerarse de manera integral en el procesamiento de lógica de datos.

De acuerdo con la práctica habitual, primero analice las ideas de implementación específicas:

Crear una nueva colección de antecedentes para almacenar información de antecedentes
Es necesario agregar un registro al guardar el fondo
Al reemplazar el fondo, debe eliminar y agregar
Al eliminar el fondo, debe eliminar la imagen al mismo tiempo
El usuario ingresa a la pantalla de datos de fondo de la consulta

Los anteriores utilizados son solo el contenido aprendido en el contenido compartido anterior. Esta vez, usar el mismo conocimiento para realizar diferentes negocios es equivalente a un proceso de consolidación y revisión de su conocimiento previo y el fortalecimiento de su comprensión de estos puntos de impresión.

Crear un nuevo conjunto de datos

Se utiliza para almacenar información de la imagen de fondo

Cree uno nuevo llamado background para almacenar y administrar datos de fondo, y luego veamos los permisos:

Debido a que en los requisitos comerciales reales, este fondo solo puede ser visto por el usuario actual, por lo que los permisos predeterminados son adecuados para nuestro negocio actual y no es necesario ajustarlos.

Definir la interfaz de operación

El subprograma necesita operar la base de datos en segundo plano, por lo que creamos un background.js en la carpeta api para escribir métodos de operación de base de datos relacionados.

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

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

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

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

De acuerdo con las necesidades reales, la definición de decibelios se usa para obtener el fondo, agregar el fondo, eliminar el fondo y luego hacer una declaración de exportación al final para permitir que se importen y usen otros js.

guardar cargar fondo

Primero implemente el método de agregar datos

// 添加背景
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})
}

Aquí hice una pequeña comida para todos, usando serverDate para obtener la hora del servidor, que se puede usar para consultar condiciones, actualizar valores de campo o valores de campo al agregar registros.

descripción del parámetro serverDate:

desplazamiento: en milímetros, puede establecer el desplazamiento de tiempo

Luego vaya a la página de la lista para usarlo, primero introduzca el método del archivo:
agregue al encabezado de list.js

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

Después de seleccionar la imagen y cargarla, use el método de agregar:

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)
          }
        })
      }
    })
  },

Después de la operación de agregar, los datos se agregan a la base de datos:

Podemos editar el campo createTime:

Puede ver que este es un parámetro de campo de tipo de tiempo.
Una vez completada la adición, hay dos cosas más que hacer:

Verifique los antecedentes al ingresar
Al reemplazar el fondo, elimínelo primero y luego agréguelo

Consulta antecedentes

Primero implemente el método de consulta de datos:

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

Introduzca el método de consulta en list.js:

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

Realice una llamada de consulta en onLoad:

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

Cuando el usuario ingrese a la página de la lista, se mostrará el fondo cargado.

Reemplazar la información de fondo

Aquí es necesario eliminar primero y luego agregar, por supuesto, también se puede implementar de forma modificada. Cabe señalar aquí que no importa qué método se utilice, los archivos de fondo anteriores deben eliminarse y las imágenes inútiles deben limpiarse a tiempo; de lo contrario, los recursos del servidor se ocuparán en vano y será necesario cargar los recursos de almacenamiento. . Si bien los costos de almacenamiento no son caros, es necesario mantener un buen hábito de ahorro.

Primero implemente el método de eliminación:

// 删除背景数据同时删除背景图片
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()
}

Introduzca el método de eliminación en lis.js:

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

Aquí, debido a que la eliminación requiere una identificación, la identificación debe guardarse al obtener el fondo

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

Luego, juzgue si hay una identificación en la lógica de seleccionar la imagen y, de ser así, demuestre que la imagen se ha subido antes y elimínela.

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)
            }
          }
        })
      }
    })
  }

Después de escribir el código de procesamiento lógico JS, accidentalmente descubrí que faltaba el ICONO para tomar fotografías después de cargar la imagen. Más tarde, verifiqué el código de diseño y descubrí que el ICONO para tomar fotografías estaba en el diseño del estado de imagen no cargada, así que no estaba oculto Necesitamos mover el diseño eliminar.

<!-- 头部 -->
  <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" />

¡Ya terminaste! Ma Zai estaba secretamente feliz, por lo que secretamente puso una foto de él y Ma Niu. Mazai lo pensó antes y después, "¡Esta función sigue siendo muy necesaria!".

Resumir

Aprendió la operación de imagen del applet: wx.chooseImage(), elija la imagen
Gestión de almacenamiento en la nube de imagen de programa pequeño:
1. wx.cloud.uploadFile: cargar archivo
2. wx.cloud.deleteFile: eliminar un archivo
3. wx.cloud.getTempFileURL: obtener enlace en línea
La base de datos aprendida anteriormente: las operaciones de agregar, consultar y eliminar se combinan para lograr un requisito