一、web组件
展示网页内容的组件
约束
一个页面只支持一个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组件
照相机组件,提供预览、拍照功能。
子组件
不支持。
属性
除支持通用属性外,还支持如下样式:
名称
类型
默认值
必填
描述
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: "授权失败!"
});
}
}
HarmonyOS 鸿蒙2.0移动应用开发实战详解https://edu.csdn.net/course/detail/39184