华为鸿蒙开发第四课

学习视频：千锋教育鸿蒙系统开发教程，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: "授权失败！"
    });
  }
}