学习视频：千锋教育鸿蒙系统开发教程，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样式使用，来确定元素的偏移位置。
|
事件
除支持通用事件外，还支持如下事件：
名称 |
参数 |
描述 |
error |
- |
用户不允许使用摄像头时触发。 |
方法
仅支持如下方法：
名称 |
参数 |
描述 |
takePhoto |
执行拍照，支持设置图片质量。 |
表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: "授权失败！" }); } }
