Este artículo demuestra cómo utilizar ArkUI de HarmonyOS para llamar a la biblioteca comunitaria que se ha colocado en el centro de bibliotecas de terceros. Experimente la última API 9 de HarmonyOS 3 y dé la bienvenida a todos a participar en la construcción de esta era de Internet de todo.

página de inicio del evento

El desafío HarmonyOS Online Codelabs ha comenzado. Esta serie de desafíos se centrará en las características técnicas de los componentes básicos y componentes contenedores de HarmonyOS, bibliotecas de terceros y bases de datos. Los desarrolladores pueden crear rápidamente aplicaciones interesantes al experimentar las características y capacidades de HarmonyOS. , Útil Aplicaciones.

Amigos interesados en participar juntos.

Página de inicio del evento:

Foro de desarrolladores de Huawei

Obtenga el código fuente de la aplicación HarmonyOS

ArkUI de HarmonyOS llama al programa "ArkUITHirdPartyLibrary" de la biblioteca comunitaria, y todos los códigos se pueden encontrar en el proyecto "Desarrollo de HarmonyOS con Laowei" (consulte "Referencias" al final del artículo para obtener el enlace). Los internautas interesados pueden clonar el código para ejecutarlo, probarlo y modificarlo localmente.

A continuación, presentaremos cómo se implementa la aplicación de compras "ArkUITHirdPartyLibrary".

Crea aplicaciones con DevEco Studio 3

Para la instalación y configuración de DevEco Studio 3, puede consultar el artículo anterior "Se debe instalar DevEco Studio 3 para jugar HarmonyOS 3, preste atención para evitar las viñetas" y no se repetirá aquí.

La primera opción es abrir DevEco Studio 3 y podrá ver la siguiente interfaz.

Haga clic en "Crear proyecto" para crear el programa ArkUI "ArkUITHirdPartyLibrary".

seleccionar plantilla

Seleccione la plantilla vacía Capacidad vacía y haga clic en "Siguiente" para ejecutar el siguiente paso.

elementos de configuración

Configure la información del proyecto, principalmente la parte que figura en un círculo a continuación. Otras configuraciones pueden seguir la configuración predeterminada. Haga clic en "Finalizar" para continuar con el siguiente paso.

Una vez completada la inicialización del programa, el código se puede desarrollar y ejecutar sobre la base del programa.

Ejecute la aplicación HarmonyOS

Abrir Administrador de dispositivos

Inicie sesión con su cuenta Huawei

Haga clic en "Iniciar sesión" para iniciar sesión en su cuenta Huawei registrada personalmente. De lo contrario, consulte el enlace al final de este artículo para registrarse.

Inicie el emulador remoto

ejecutar la aplicación

Haga clic en el botón del triángulo hacia abajo para iniciar la aplicación.

El diagrama de efectos de ejecución de la aplicación es el siguiente.

código perfecto

Sobre la base de la plantilla vacía, inicialmente agregamos el código comercial para finalmente implementar el programa.

Instalar el componente PhotoView

PhotoView es una biblioteca de tres partes que implementa el componente de exploración de zoom de imágenes, y la imagen se puede ampliar, desplazar y rotar. Ejecute la siguiente instrucción para instalar.

npm install @ohos/photoview –saveCopiar

Una vez completada la instalación, puede ver que la dependencia de PhotoView se agregó automáticamente en package.json:

Para usar PhotoView, simplemente importe el paquete PhotoView

import {PhotoView} from '@ohos/photoview';Copiar

Implementar escalado de imagen

En la página Índice, agregue el siguiente código:

import {PhotoView} from '@ohos/photoview';

@Entry
@Component
struct Index {
  @State data: PhotoView.Model = new PhotoView.Model();
  @State data1: PhotoView.Model = new PhotoView.Model();
  @State data2: PhotoView.Model = new PhotoView.Model();
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {
    this.data
      .setImageResource($r('app.media.harmony'))
    this.data1
      .setImageResource($r('app.media.harmony1'))
    this.data2
      .setImageResource($r('app.media.harmony2'))

  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        PhotoView({model: this.data})
        PhotoView({model: this.data1})
        PhotoView({model: this.data2})
      }
      .index(0)
      .autoPlay(true) // 自动播放
      .indicator(true) // 默认开启指示点
      .loop(true) // 默认开启循环播放
      .duration(50)
      .vertical(true) // 默认横向切换
      .itemSpace(0)
      .onChange((index: number) => {
        this.data.resetMatrix()
        this.data1.resetMatrix()
        this.data2.resetMatrix()
        console.info("ViewPager"+index.toString())
      })
    }.height('100%').width('100%').backgroundColor(0x3d3d3d)
  }
}
Copiar

El código anterior realiza funciones como reproducción automática, reproducción en bucle y cambio horizontal de imágenes. Los recursos de imágenes se colocan en el directorio de medios.

Efecto de ejecución del programa

Para ver un video de demostración completo, consulte Estación B: [Laowei Moves Bricks] Problema 026: use HarmonyOS ArkUI para llamar a la biblioteca de terceros PhotoView para realizar la transmisión y reducción simultánea de imágenes_哔哩哔哩_bilibili

Preguntas relacionadas

Problema: @ohos/photoview no encontrado

El mensaje de error es el siguiente:

>npm install @ohos/photoview --save

npm ERR! code E404

npm ERR! 404 Not Found - GET https://registry.npmmirror.com/@ohos%2fphotoview - [NOT_FOUND] @ohos/photoview not found

npm ERR! 404

npm ERR! 404 '@ohos/photoview@latest' is not in the npm registry.

npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

npm ERR! 404

npm ERR! 404 Note that you can also install from a

npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\wayla\AppData\Roaming\npm-cache\_logs\2022-11-13T13_13_32_065Z-debug.logCopiar

Solución:

Configurar la duplicación npm

npm config set @ohos:registry=https://repo.harmonyos.com/npm/Copiar

código fuente

Consulte "ArkUITHirdPartyLibrary" en https://github.com/waylau/harmonyos-tutorial

Referencias

Tutorial gratuito de código abierto "Aprenda el desarrollo de HarmonyOS de Laowei", https://github.com/waylau/harmonyos-tutorial
"Desarrollo de aplicaciones Hongmeng HarmonyOS desde el principio hasta el dominio" (Liu Weiwei, Peking University Press) "Desarrollo de aplicaciones Hongmeng HarmonyOS desde el principio hasta el dominio" (Liu Weiwei) [Lectura de prueba de reseña de libro abstracto] - Jingdong Books, "Desarrollo de aplicaciones Hongmeng HarmonyOS desde el principio Para dominar las obras de Liu Weiwei (Liu Weiwei) [Introducción_Reseña del libro_Lectura en línea] - Dangdang Books
Para jugar HarmonyOS 3, debes instalar DevEco Studio 3, presta atención para evitar balas Foro de desarrolladores de Huawei
OpenHarmony-SIG/PhotoView

Utilice HarmonyOS ArkUI para llamar a la biblioteca de terceros PhotoView para realizar la transmisión y el zoom simultáneos de imágenes