require.js+Desarrollo de componentes de carga de imágenes de WeChat Mini Program

Dado que el proyecto se realiza con el framework de backend thinkPHP, siempre se ha utilizado enfoque de rutas de backend de múltiples páginas, y al querer usar el popular webpack, no se sabe por dónde empezar (perdón por ser tan novato, y solo estoy promoviendo Vue...), no hay otra opción que mejorar en la base original. Una de las grandes ventajas de usar webpack es que se pueden escribir componentes Vue en archivos .vue de un solo archivo, por lo que cada componente es un archivo .vue, se puede importar donde se utilice este componente, lo que facilita mucho la mantenimiento. Sin embargo, el proyecto ha utilizado require.js hasta ahora, y también se desea organizar los componentes Vue de esta manera, además de añadir vue-router y vue-resource, ¿cómo hacerlo? Este artículo resume brevemente el uso de require.js en el desarrollo de componentes de subida de imágenes de WeChat como ejemplo.+vue+vue-router+vue-flujo de desarrollo de resource.

Organiza tus componentes con require.js
Tendremos un directorio de components para alojar nuestros componentes, cada componente tiene una carpeta con su propio nombre, por ejemplo, en este ejemplo el componente album, dentro de él se colocan el html, js y css del componente. Cómo cargar html y css con require.js, puedes buscar en Baidu y descargar los complementos relacionados.

Aquí, he resumido un patrón de plantilla para componentes Vue escritos con require.js, añade esta plantilla a WebStorm y cada vez que escribes un componente, con solo escribir unos pocos caracteres, se genera la plantilla automáticamente, ¡es realmente divertido! (El nombre del componente es una variable de la plantilla, simplemente rellena el nombre de tu componente en la plantilla generada)

define(["vue","text!../js/lib/components/$componentName$/index.html","css!../js/lib/components/$componentName$/index.css"],function (Vue,Template) {
 // Aquí está el código del módulo
 var $componentName$ = Vue.extend({
  template : Template,
  props : [],
  data : function() {
   return {
   }
  },
  // Se llama después de la compilación final y la primera inserción de $el en el documento
  ready : function() {
  },
  // Se llama cuando se comienza a destruir la instancia. En este momento, la instancia aún tiene funciones.
  beforeDestroy : function() {
  },
  methods : {
  },
  events : {
  }
 });
 return $componentName$;
});

Vista previa general de este ejemplo
Para demostrar el flujo completo, hice de este ejemplo un pequeño sitio web de una sola página llamado show-album, hay dos páginas:
1. La página principal se llama main-page

2. La página de detalles se llama detail-page

Las funciones en la página de detalles incluyen:

Recibe los parámetros pasados por el componente padre para inicializar el componente de subida de imágenes
Al hacer clic en la cruz en la esquina superior derecha de cada imagen, se puede eliminar la imagen
Al hacer clic en el pequeño icono de cámara en la parte inferior, se llama a la interfaz de "seleccionar imágenes desde la galería de fotos del teléfono" de WeChat, y el usuario puede seleccionar imágenes en su teléfono
Después de seleccionar las imágenes, las imágenes se ajustan proporcionalmente en tamaño y se convierten en miniaturas como se muestra en la imagen
Al hacer clic en la imagen correspondiente, se llama a la interfaz de "vista previa de imágenes" de WeChat para previsualizar la imagen
Cuando las imágenes equivalen al número máximo de imágenes, el pequeño icono de cámara desaparece
Expone dos métodos para que otros componentes los llamen: ① método de subida de imágenes (sube a los servidores de WeChat y ejecuta el callback después de la subida exitosa) uploadImage ② método de obtención de toda la información de imágenes, incluyendo las imágenes inicializadas, eliminadas y nuevas información getAllImgInfo

¡OK, la introducción está terminada, ahora comenzamos oficialmente!

1. Usar vue-El router realiza las rutas, construyendo show-album.js
Todo el nombre de la función es show-album, por lo que cambiamos el nombre de este js de la función a show-album.js, la estructura de este js es así:

define(["vue","vueResource","vueRouter","vAlbum"],function (Vue,VueResource,VueRouter,Album) {
  // Instalar el módulo de recursos
  Vue.use(VueResource);
  // Instalar el módulo de rutas
  Vue.use(VueRouter);
  // jQuery establece el contenido al ejecutar solicitudes POST-Type de aplicación/x-www-form-urlencoded
  // Por lo tanto, el servidor puede analizar correctamente y, al usar solicitudes AJAX nativas, si no se configura explícitamente el contenido-Tipo, por lo que el valor predeterminado es texto}}/puro,
  // En este caso, el servidor no sabrá cómo analizar los datos, por lo que solo se puede analizar la solicitud de datos obteniendo el flujo de datos en bruto.
  // Dado que Vue utiliza POST nativo, debe configurar el servidor para que pueda interpretar correctamente los datos POST.
  Vue.http.options.emulateJSON = true;
  //Definir la página mainPage
  var mainPage = Vue.extend({
   plantilla : "#main-page-temp"
  })
  //Definir la página detailPage
  var detailPage = Vue.extend({
   plantilla : "#detail-page-temp",
   componentes : {
    'album' : Album
   }
  })
  // Componente raíz
  var showAlbum = Vue.extend({
   componentes : {
    'principal-página' : mainPage,
    'detalle-página' : detailPage
   }
  })
  // Instanciar router
  var router = new VueRouter();
  // Configurar rutas
  router.map({
   /principal-página' : {
    nombre : 'mainPage',
    componente: mainPage
   },
   //Aquí se utiliza el fragmento dinámico de la ruta
   /detalle-page/:inspection_id/:image_type' : {
    nombre : 'detailPage',
    componente : detailPage
   }
  });
  router.redirect({
   // Redirigir cualquier ruta no coincidente a /inicio
   *':/principal-página'
  });
  // Iniciar aplicación
  // El router creará una instancia y la montará en el elemento que coincida con el selector.
  router.start(showAlbum, '#show-album'); 
});

La parte HTML es muy sencilla:

<template id="main-page-temp">
 <group>
  <cell v-for="list in lists"
     title="[#1#]" value="Haga clic"
     es-link
     v-link="{'name':'detailPage',params: { 'inspection_id': list.inspection_id,'image_type' : list.image_type }}">
  </cell>
 </group>
</template>
<template id="detail-page-temp">
  <album v-ref:album :img-srcs="initImgSrcs" ></album>
  <button style="width: 100%;margin-top: 20px"
  Haga clic en mí para activar el método getAllImgInfo
  </button>
</template>
<div id="show-ablum">
 <!-- enlace externo de rutas -->
 <router-view></router-view>
</div>

Ahora, al hacer clic en un registro en la página principal, puedes saltar a la página de detalles. Al regresar en la página de detalles, volverás a la página principal. De esta manera, se completa la estructura general.

Desarrollo del componente de carga de imágenes de WeChat

El código específico no se enumera, solo seguiremos la lista de funciones del componente superior, y hablemos de cómo se completan cada una de las funciones

1.Recibe los parámetros transmitidos por el componente padre para inicializar el componente de carga de imágenes
Primero, configura props en el componente hijo

props : {
 //Inicializar si hay o no fotos
 imgSrcs : {
  type : Array,
  default : []
 },
 //¿Es editable por defecto? true
 canEdit : {
  type : Boolean,
  default : true
 },
 //Número máximo de carga por defecto9
 maxNum : {
  type : Number,
  default : 9
 },
 //devolución de llamada después de la carga
 afterUpload : {
  type : Function
 }
}

Luego, cuando utilices el componente hijo en el componente padre, transmite los parámetros

<album v-ref:album 
:img-srcs="initImgSrcs" 
:canEdit="true"
:afterUpload="afterUploadFunction"
>
</album>

2.Haga clic en el último icono de la pequeña cámara para invocar la interfaz de selección de imágenes desde la galería de fotos del teléfono, el usuario puede seleccionar imágenes en su teléfono
En el código HTML del icono de la pequeña cámara, vincula el método chooseImage con @click="chooseImage"

<span class="add-img-icon">
  <img src="../Public/Home/source/image/camera.png" @click="chooseImage">
 </span>

Luego, agrega este método en methods, a través de wx.chooseImage para invocar la interfaz de selección de imágenes de WeChat. Utiliza WeChat js-La configuración del sdk debe realizarse antes, por lo que configuramos en el ready del componente.}}

ready : function() {
   //Configuración de JS de WeChat-SDK
   this.getSignPackage();
  },
methods : {
 chooseImage : function () {
  var _this = this;
  wx.chooseImage({
   count: _this.maxNum - _this.albums.length, // Por defecto9
   sizeType: ['original', 'compressed'], // Se puede especificar si es la imagen original o la imagen comprimida, por defecto ambos están disponibles
   sourceType: ['album', 'camera'], // Se puede especificar la fuente como álbum o cámara, por defecto ambos están disponibles
   success: function (res) {
    var _localIds = res.localIds;
    //Registrar información de fotos nuevas
    for (var i = 0, len = _localIds.length; i < len; i ++) {
     _this.newImagesCache.push(_localIds[i]);
    }
    //Generar miniaturas en proporción
    _this.renderImage(_localIds);
   }
  });
 }
}

3Después de seleccionar la imagen, la imagen se ajusta proporcionalmente en tamaño y se convierte en una miniatura como se muestra en la imagen
Aquí se debe utilizar la preprocesamiento de imágenes, es decir, var img = new Image (); para obtener el tamaño de la imagen original a través de la instanciación de una instancia de Image, de modo que podamos calcular la miniatura en proporción correspondiente a partir de este tamaño de imagen original. Es así:

var img = new Image();
var $albumSingle = "";
//La secuencia aquí es primero new Image(), luego ejecutar img.src, y solo después de eso se considera que la imagen se ha cargado completamente
//de esta manera, finalmente se llama al método onload
img.onload = function() {
 albumsData = {
  localId : imgSrcs[i],
  albumSingleStyle : {height : imgWrapWidth + "px"},
  //compressImage es un método de compresión de imágenes, que recibe la instancia de la imagen y el ancho del elemento padre de la imagen para calcular.
  imgElementStyle : _this.compressImage(img, imgWrapWidth)
 };
 _this.albums.push(albumsData);
};
img.src = imgSrcs[i];

Atención especial: ya que cada imagen tiene su propio tamaño y estilo, debemos agregar un conjunto de datos de albums en la opción data del componente, que contiene la ruta y el estilo de cada imagen, de modo que al renderizar cada imagen en el ciclo, cada imagen se corresponda con sus propiedades correspondientes. Además, ya que las mismas imágenes pueden subirse repetidamente, se debe agregar track en el ciclo-by="$index"

//Propiedades propias de cada imagen
albumsData = {
 localId : imgSrcs[i],
 albumSingleStyle : {height : imgWrapWidth + "px"},
 //compressImage es un método de compresión de imágenes, que recibe la instancia de la imagen y el ancho del elemento padre de la imagen para calcular.
 imgElementStyle : _this.compressImage(img, imgWrapWidth)
};
//Colocar las propiedades de cada imagen en el conjunto de datos albums
_this.albums.push(albumsData);

4.Hacer clic en la imagen correspondiente para llamar a la interfaz de previsualización de imágenes de WeChat <img @click="previewImage($index)">

Enlazar eventos de clic en las imágenes, pasar el índice de la imagen, para activar un método:

previewImage : function (index) {
 var _albums = this.albums;
 var urls = this.getLocalIds(_albums);
 wx.previewImage({
  current: urls[index], // Enlace HTTP de la imagen actual
  urls: urls   // Lista de enlaces HTTP de imágenes que necesitan ser previstas
});

5.Hacer clic en la cruz en la esquina superior derecha de cada imagen para eliminar la imagen
Este se bindea al evento de clic en la cruz, y este evento se utiliza para manejar la eliminación de imágenes.

El método deleteImage, debido a que se debe registrar qué imágenes iniciales eliminó el usuario, debe determinar si esta imagen ya estaba inicialmente:

deleteImage : function (index, album) {
 // Comparar si la foto a eliminar está en la foto inicial
 for (var i = 0, len = this.oldImagesCache.length; i < len; i ++) {
  if (album.localId === _oldImagesCache[i]) {
   this.deleteImagesList.push(_oldImagesCache[index]);
  }
 }
 this.canEdit && this.albums.$remove(album);
}

6.Cuando la cantidad de imágenes es igual al número máximo de imágenes, el último icono de la cámara pequeña desaparece v-if="albums.length < 9

7.Expone dos métodos para que otros componentes los llamen: ① método de subida de imágenes (sube a los servidores de WeChat y ejecuta el callback después de la subida exitosa) uploadImage ② método de obtención de toda la información de imágenes, incluyendo la álbum inicial, las imágenes eliminadas y las nuevas imágenes getAllImgInfo
¿Cómo expone métodos para que otros componentes los llamen, esto es un gran problema. Ni siquiera sé cuál es la mejor práctica, porque hay varias formas, como el componente hijo $dispatch, y luego el componente padre recibe en events, pero parece que es muy complicado, por lo que elegí hacerlo de esta manera:
En el componente hijo, utilice v-rel:xxx agregar el índice del componente

Luego, en el componente padre, puede llamar al método expuesto por el componente hijo mediante this.$refs.xxx.uploadImage().

Este artículo ha sido organizado en 'Resumen de Trucos de Desarrollo de WeChat con JavaScript', bienvenidos a aprender y leer.

Le recomendamos un tutorial de mini programa de WeChat con alta atención actual: 'Tutorial de Desarrollo de Mini Programas de WeChat'. El editor lo ha organizado con esmero, esperamos que les guste.

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos nos apoyen y alentemos el tutorial de clamor.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará