一、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: "授权失败！"
    });
  }
}