Foreword

This article is my fourth training note on HarmonyOS application development. As a developer in the IOT team of Maykle Studio, and a developer who is also learning HarmonyOS development technology, I have witnessed Huawei's progress.Come as soon as possible, and I hope that Chinese developers will become stronger and stronger. I would like to continue to thank Jin Qige for his explanation.

Learning Materials:

​​​​​​Common Attributes-Generic-Component-based on JS extensionWeb-like development paradigm - mobile phone, tablet, smart screen and smart wearable development - JS API reference - HarmonyOS application development

Qianfeng Education Hongmeng system development tutorial, HarmonyOS 2.0 Hongmeng application development practical tutorial (develop your own first Hongmeng APP) _bilibili

I. Web Components

First add network permissions

For network permission configuration, please refer to Section 9 of the technical fat document Technology Fat-Huawei Hongmeng System Application OpenHarmony JS Front-end Development Basic Tutorial-End(jspang.com)

Note: A page only supports one web component, which will be displayed in full screen. If there are other components in the page, they will be covered by the web component, and the web component will not follow the transition animation events.

2.Carmera component

camera-Media Component-Component-JS Extended Web-like Development Paradigm-Mobile Phone, Tablet, Smart Screen andSmart wear development-JS API reference-HarmonyOS application development

The camera component provides preview and photo functions.

Add permission ohos.permission.CAMERA

Method takePhoto

Callback function (!!very important!!)

Three, real machine debugging preparation steps

On the Hongmeng mobile phone (mine is HUAWEI nova 7), Settings - About Phone - Click the version number 6 times in a row to enter the developer mode, use a USB cable to connect to the computer, select the file transfer on the phone, and in Settings -- System and Updates - Developer options, turn on USB debugging.And finally auto-sign on DevEco.

AppGallery Connect (huawei.com)

Signing needs to create an app on the above website first, and then return to automatically sign

In the DevEco run/debug configuration interface, you can set the debugging code type and set the Hap package installation method.

The debugging effect is as follows:

Add the code to remove the black box

 "metaData":{"customizeData":[{"name": "hwc-theme","extra": "","value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"}]}

The effect is as follows:

Four. Key points of this training

4.1 Camera component callback function

Because the photo uri generated when taking a photo can only be accessed by the local machine, a conversion is required.

As shown above, be sure to pay attention to details.

4.2 web components

A page only supports one web component, which will be displayed in full screen. If there are other components in the page, they will be covered by the web component, and the web component will not follow the transition animation.It can be solved with the router.push method.

4.3 Code Details

This means that under the class menu-tab-item, if $item === currentTab, add the class menu-tab-item-text, otherwise add the class menu-tab-item-normal.The reference article is attached below:

(121 messages) The priority of multiple classes in CSS_Talon will not write code blog-CSDN blog_class priority

Finally, don't say anything, thank you Jin Qi!!!