java开发鸿蒙软件 鸿蒙js开发教程

一、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移动应用开发实战详解icon-default.png?t=N7T8https://edu.csdn.net/course/detail/39184

  • 23
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

传说三哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值