用HarmonyOS ArkUI调用三方库PhotoView实现图片的联播、缩放

灰太狼 2024-04-01 19:28 80阅读 0赞

本文演示如果用HarmonyOS的ArkUI来调用已经上架到三方库中心的社区库。体验HarmonyOS 3最新的API 9，欢迎大家一起参与构建这个万物互联的时代！

活动主页

HarmonyOS线上Codelabs挑战赛已经开启，该系列挑战赛将围绕HarmonyOS的基础组件和容器组件、三方库和数据库等技术特性展开，开发者们可以通过体验基于HarmonyOS特性和能力的应用开发，快速构建有趣、有用的应用程序。

有兴趣的朋友一起参与吧。

活动主页：

[华为开发者论坛][Link 1]

获取HarmonyOS应用源码

HarmonyOS的ArkUI来调用社区库的程序“ArkUIThirdPartyLibrary”，全部代码可以在《跟老卫学HarmonyOS开发》项目中找到（链接见文末“参考引用”）。有兴趣的网友可以clone该代码到本地进行运行、测试、修改。

接下来将介绍该购物应用程序“ArkUIThirdPartyLibrary”是如何实现的。

通过DevEco Studio 3创建应用

有关DevEco Studio 3的安装配置，可以参考前文《玩转HarmonyOS 3必装DevEco Studio 3，注意避弹》这里就不在赘述。

首选是打开DevEco Studio 3，可以看到如下界面。

![a040d735c4a9ad10bdf6e68883ca9c47.png][]

点击“Create Project”来创建ArkUI程序“ArkUIThirdPartyLibrary”。

### 选择模板 ###

选择空模板Empty Ability，点击“Next”执行下一步。

![14b72377a09b86d5140e737a7d7952df.png][]

### 配置项目 ###

配置项目信息，重要是以下圈中部分。其他配置按照默认配置即可。点击“Finish”执行下一步。

![4718c9b972d063172e36e59ff4169b35.png][]

程序初始化完成之后，就能在该程序基础上进行代码开发、运行。

![d45a5feae208820909da225d882127ee.png][]

运行HarmonyOS应用

打开Device Manager

![3101b8c9652e92bd51fff3b1ffee630a.png][]

![959d2c0c9de8fa2eb14d1f09c399fd2c.png][]

登入华为账号

点击“Sign In”登入个人注册的华为账号。如果没有，则参考本文最后的链接进行注册。

![41aaf8e047382bec92e3a9cd7e602849.png][]

启动远程模拟器

![690953a92c8998bd0298297200806d00.png][]

运行应用

点击下命的三角形按钮以启动应用

![52318adb283b1521c9ef5a68267a7a64.png][]

应用运行效果图如下。

![49dc80b02a8743f27c8ef8d567f0eb1c.png][]

## 完善代码 ##

在空模板的基础上，我们初步添加业务代码，来最终实现程序。

### 安装PhotoView组件 ###

PhotoView是一款三方库，实现了图片缩放浏览组件，图片可缩放，平移，旋转。执行下面语句进行安装。

npm install @ohos/photoview –save复制

安装完成之后，可以看到在package.json中已经自动添加了PhotoView的依赖：

![8b4cce3a9be89312da36fbfe63539c68.png][]

要使用PhotoView，只需要导入PhotoView的包

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

### 实现图片缩放 ###

在Index页面中，添加如下代码：

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

上述代码实现了图片的自动播放、循环播放、横向切换等功能。其中图片资源放置在media目录下。

![79b342c352de4576b968ea7cbb4ae55e.png][]

## 程序运行效果 ##

![982e7a7bdf5dd9a6c614f4c6c0fda45d.png][]

![f8c3aa972ba93b98361a29ea7b6608e7.png][]

完整演示视频见B站：[【老卫搬砖】026期：用HarmonyOS ArkUI调用三方库PhotoView实现图片的联播、缩\_哔哩哔哩\_bilibili][026_HarmonyOS ArkUI_PhotoView_bilibili]

## 相关问题 ##

### 问题：@ohos/photoview not found ###

报错信息如下：

>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.log复制

解决方法：

设置npm的镜像

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

## 源码 ##

见 [https://github.com/waylau/harmonyos-tutorial][https_github.com_waylau_harmonyos-tutorial] 中的“ArkUIThirdPartyLibrary”

**参考引用**

*  《跟老卫学HarmonyOS开发》 开源免费教程，[https://github.com/waylau/harmonyos-tutorial][https_github.com_waylau_harmonyos-tutorial]
 *  《鸿蒙 HarmonyOS 应用开发从入门到精通战》（柳伟卫著，北京大学出版社）[《鸿蒙HarmonyOS应用开发从入门到精通》(柳伟卫)【摘要 书评 试读】- 京东图书][HarmonyOS_ _ _-]、[《鸿蒙HarmonyOS应用开发从入门到精通 柳伟卫著》(柳伟卫)【简介\_书评\_在线阅读】 - 当当图书][HarmonyOS_ _ -]
 *  玩转HarmonyOS 3必装DevEco Studio 3，注意避弹 [华为开发者论坛][Link 2]
 *  [OpenHarmony-SIG/PhotoView][OpenHarmony-SIG_PhotoView]

[Link 1]: https://developer.huawei.com/consumer/cn/forum/topic/0202103392123890120?fid=0101587866109860105
[a040d735c4a9ad10bdf6e68883ca9c47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7a9258f602594ff4aa53ca246a14661e.png
[14b72377a09b86d5140e737a7d7952df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3fe07a4d854a4c76b9fff860136d0e78.png
[4718c9b972d063172e36e59ff4169b35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f6237b313c70416281e69a94fd3f3687.png
[d45a5feae208820909da225d882127ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/eac5c7f83ba74b04b58a073c13fd40c8.png
[3101b8c9652e92bd51fff3b1ffee630a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a62c9f44a9894a10b07ab9dba6e14a18.png
[959d2c0c9de8fa2eb14d1f09c399fd2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8e670d875c924464839afddf6fb13e8f.png
[41aaf8e047382bec92e3a9cd7e602849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1b5afd0b117a4b9eb9fe39d47e23d992.png
[690953a92c8998bd0298297200806d00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/670112e1de734523a366d2ef216f4bab.png
[52318adb283b1521c9ef5a68267a7a64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/90d3748f0807415f8faa2e622c4b72d8.png
[49dc80b02a8743f27c8ef8d567f0eb1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1c3d803b66a649f2bcc119c1d7ebf09c.png
[8b4cce3a9be89312da36fbfe63539c68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/82aff430361048ee9118112b571f38ed.png
[79b342c352de4576b968ea7cbb4ae55e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9c50fdbd16574cc0aa50b82016a85348.png
[982e7a7bdf5dd9a6c614f4c6c0fda45d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5fae758598f34af8bd7ca2c2dda53dca.png
[f8c3aa972ba93b98361a29ea7b6608e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/658f680e5bf44d69b52b83360b490782.png
[026_HarmonyOS ArkUI_PhotoView_bilibili]: https://www.bilibili.com/video/BV1Rg411i7y1/
[https_github.com_waylau_harmonyos-tutorial]: https://github.com/waylau/harmonyos-tutorial
[HarmonyOS_ _ _-]: https://item.jd.com/13696724.html
[HarmonyOS_ _ -]: http://product.dangdang.com/29386650.html
[Link 2]: https://developer.huawei.com/consumer/cn/forum/topic/0202103558349879153?fid=0101610563345550409
[OpenHarmony-SIG_PhotoView]: https://gitee.com/openharmony-sig/PhotoView