This article demonstrates how to use ArkUI of HarmonyOS to call the community library that has been put on the third-party library center. Experience the latest API 9 of HarmonyOS 3, and welcome everyone to participate in building this era of Internet of Everything!

event homepage

The HarmonyOS Online Codelabs Challenge has started. This series of challenges will focus on the technical features of HarmonyOS' basic components and container components, third-party libraries, and databases. Developers can quickly build interesting applications by experiencing HarmonyOS features and capabilities. , Useful Apps.

Interested friends to participate together.

Event home page:

Huawei Developer Forum

Get HarmonyOS application source code

The ArkUI of HarmonyOS calls the program "ArkUIThirdPartyLibrary" of the community library, and all the codes can be found in the "HarmonyOS Development with Laowei" project (see "References" at the end of the article for the link). Interested netizens can clone the code to run, test and modify it locally.

Next, we will introduce how the shopping application "ArkUIThirdPartyLibrary" is implemented.

Create applications with DevEco Studio 3

For the installation and configuration of DevEco Studio 3, you can refer to the previous article "DevEco Studio 3 must be installed to play HarmonyOS 3, pay attention to avoiding bullets" and will not be repeated here.

The first choice is to open DevEco Studio 3, and you can see the following interface.

Click "Create Project" to create the ArkUI program "ArkUIThirdPartyLibrary".

select template

Select the empty template Empty Ability, and click "Next" to execute the next step.

configuration items

Configure project information, mainly the part circled below. Other configurations can follow the default configuration. Click "Finish" to proceed to the next step.

After the program initialization is completed, the code can be developed and run on the basis of the program.

Run the HarmonyOS application

Open Device Manager

Click "Sign In" to log in to your personally registered Huawei account. If not, please refer to the link at the end of this article to register.

Start the remote emulator

run the application

Click the down triangle button to launch the application

The application running effect diagram is as follows.

perfect code

On the basis of the empty template, we initially add business code to finally realize the program.

Install the PhotoView component

PhotoView is a three-party library that realizes the picture zoom browsing component, and the picture can be zoomed, panned and rotated. Execute the following statement to install.

npm install @ohos/photoview –savecopy

After the installation is complete, you can see that the dependency of PhotoView has been automatically added in package.json:

To use PhotoView, just import the PhotoView package

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

Implement image scaling

On the Index page, add the following code:

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

The above code realizes functions such as automatic playback, loop playback, and horizontal switching of pictures. The image resources are placed in the media directory.

Program running effect

For a complete demonstration video, see Station B: [Laowei Moves Bricks] Issue 026: Use HarmonyOS ArkUI to call the third-party library PhotoView to realize simultaneous broadcasting and shrinking of pictures_哔哩哔哩_bilibili

source code

See "ArkUIThirdPartyLibrary" in https://github.com/waylau/harmonyos-tutorial

References

"Learn HarmonyOS Development from Laowei" open source free tutorial, https://github.com/waylau/harmonyos-tutorial
"Hongmeng HarmonyOS application development from entry to proficiency" (Liu Weiwei, Peking University Press) "Hongmeng HarmonyOS application development from entry to proficiency" (Liu Weiwei) [Abstract book review trial reading] - Jingdong Books, "Hongmeng HarmonyOS application development from entry To Master the Works of Liu Weiwei (Liu Weiwei) [Introduction_Book Review_Online Reading] - Dangdang Books
To play HarmonyOS 3, you must install DevEco Studio 3, pay attention to avoid bullets Huawei Developer Forum
OpenHarmony-SIG/PhotoView

Use HarmonyOS ArkUI to call the three-party library PhotoView to realize the simultaneous broadcast and zoom of pictures