华为鸿蒙开发第四课

简介: 华为鸿蒙开发第四课

学习视频:千锋教育鸿蒙系统开发教程,HarmonyOS 2.0鸿蒙应用开发实战教程(开发属于自己的第一个鸿蒙APP)_哔哩哔哩_bilibili


学习文档:


通用属性-通用-组件-基于JS扩展的类Web开发范式-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发


一、web组件


展示网页内容的组件

web-基础组件-组件-基于JS扩展的类Web开发范式-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发


约束


一个页面只支持一个web组件,会全屏显示,若页面中还有其他组件,会被web组件覆盖,web组件不跟随转场动画


子组件


不支持。


属性


仅支持如下属性:

名称

类型

默认值

必填

描述

src

string

-

设置需要显示网页的地址,网址的域名必须为https协议且经过ICP备案。

id

string

-

组件的唯一标识。


样式


不支持通用样式设置。


事件


仅支持如下事件:

名称

参数

描述

pagestart

{url: string}

加载网页时触发

pagefinish

{url: string}

网页加载结束时触发

error

{url: string, errorCode: number, description: string}

加载网页出现错误时触发或打开网页出错时触发


方法


仅支持如下方法:

名称

参数

描述

reload

-

重新加载页面


示例


<!-- xxx.hml -->
<div class="container">
  <button onclick="reloadWeb">click to reload</button>
  <web src = "https://www.example.com" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
</div>


// xxx.js
import router from '@system.router'
export default {
  reloadWeb() {
    this.$element('web').reload()
  },
  pagestart: function (e) {
    console.info('pagestart: ' + e.url);
  },
  pagefinish: function (e) {
    console.info('pagefinish: ' + e.url);
  },
  error: function (e) {
    console.info('pageError url:' + e.url);
    console.info('pageError errorCode:' + e.errorCode);
    console.info('pageError description:' + e.description);
  }
}

// xxx.js
import router from '@system.router'
export default {
  reloadWeb() {
    this.$element('web').reload()
  },
  pagestart: function (e) {
    console.info('pagestart: ' + e.url);
  },
  pagefinish: function (e) {
    console.info('pagefinish: ' + e.url);
  },
  error: function (e) {
    console.info('pageError url:' + e.url);
    console.info('pageError errorCode:' + e.errorCode);
    console.info('pageError description:' + e.description);
  }
}

二、carmera组件


camera-媒体组件-组件-基于JS扩展的类Web开发范式-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发

照相机组件,提供预览、拍照功能。


子组件


不支持。


属性


除支持通用属性外,还支持如下样式:

名称

类型

默认值

必填

描述

flash

string

off

闪光灯,取值为on、off、torch(手电筒常亮模式)

deviceposition

string

back

前置或后置,取值为front、back。

说明

目前不支持渲染属性if、show和for。


样式


仅支持如下样式:

名称

类型

默认值

必填

描述

width

<length> | <percentage>

-

设置组件自身的宽度。

缺省时使用元素自身内容需要的宽度。

说明

camera组件宽高不支持动态修改。

height

<length> | <percentage>

-

设置组件自身的高度。

缺省时使用元素自身内容需要的高度。

[left|top]

<length>

-

left|top需要配合position样式使用,来确定元素的偏移位置。

  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。


事件


除支持通用事件外,还支持如下事件:

名称

参数

描述

error

-

用户不允许使用摄像头时触发。


方法


仅支持如下方法:

名称

参数

描述

takePhoto

CameraTakePhotoOptions

执行拍照,支持设置图片质量。


表1 CameraTakePhotoOptions

参数

类型

必填

默认值

描述

quality

string

normal

图片质量,可能值有:high、normal、low。

success

Function

-

接口调用成功的回调函数。返回图片的uri。

fail

Function

-

接口调用失败的回调函数。

complete

Function

-

接口调用结束的回调函数。


示例


<!-- xxx.hml-->
<div class="container">
  <camera flash="on" deviceposition="back" @error="cameraError">
  </camera>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
camera{
  width: 300px;
  height: 300px;
}

//xxx.js
import prompt from '@system.prompt';
export default {
  data: {
    title: 'World'
  },
  cameraError(){
    prompt.showToast({
      message: "授权失败!"
    });
  }
}


目录
打赏
0
0
0
0
15
分享
相关文章
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
81 0
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
鸿蒙开发:基于最新API,如何实现组件化运行
手动只是让大家了解切换的原理,在实际开发中,可不推荐手动,下篇文章,我们将通过脚本或者插件,快速实现组件化模块之间的切换,实现独立运行,敬请期待!
100 0
鸿蒙开发:基于最新API,如何实现组件化运行
鸿蒙开发:资讯项目实战之项目初始化搭建
目前来说,我们的资讯项目只是往前迈了很小的一步,仅仅实现了项目创建,步虽小,但概念性的知识很多,这也是这个项目的初衷,让大家不仅仅可以掌握日常的技术开发,也能让大家理解实际的项目开发知识。
鸿蒙开发:资讯项目实战之项目初始化搭建
鸿蒙5开发宝藏案例分享---优化应用时延问题
鸿蒙性能优化指南来了!从UI渲染到数据库操作,6大实战案例助你提升应用流畅度。布局层级优化、数据加载并发、数据库查询提速、相机资源延迟释放、手势识别灵敏调整及转场动画精调,全面覆盖性能痛点。附赠性能自检清单,帮助开发者高效定位问题,让应用运行如飞!来自华为官方文档的精华内容,建议收藏并反复研读,共同探讨更多优化技巧。
鸿蒙5开发宝藏案例分享---Swiper组件性能优化实战
本文分享了鸿蒙系统中Swiper组件的性能优化技巧,包括:1) 使用`LazyForEach`替代`ForEach`实现懒加载,显著降低内存占用;2) 通过`cachedCount`精准控制缓存数量,平衡流畅度与内存消耗;3) 利用`onAnimationStart`在抛滑时提前加载资源,提升构建效率;4) 添加`@Reusable`装饰器复用组件实例,减少创建开销。实际应用后,图库页帧率从45fps提升至58fps,效果显著。适合处理复杂列表或轮播场景,欢迎交流经验!
|
10天前
|
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
52 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
HarmonyOS NEXT仓颉开发语言实战案例:图片预览器
本文介绍了如何使用仓颉语言实现图片放大预览器。通过弹窗组件`CustomDialogController`与`Swiper`容器结合,实现全屏图片浏览效果,支持多图切换与点击关闭功能,适配动态广场场景下的图片预览需求。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问