web

概述

用于显示在线的 html 页面，在 webview 的 useragent 后追加内容，格式是 hap/<平台版本号>/<厂商标识> <平台应用包名>/<平台应用版本号> <应用名>/<应用版本号> (<来源信息>)。“来源信息”与 app 接口的 getInfo 方法返回结果中的 source 字段相同。

使用 web 组件，必须声明"打开网页"接口，否则会提示缺乏权限。

1010+ 支持上传文件，不支持多选。 1020+ 支持下载文件。 1040+ 支持定位。

由于各厂商系统 webview 已不再支持非安全域的 web 定位请求，为保证定位成功率和精度，请尽快升级您的站点到 HTTPS。

1040+ 支持 h5 页面中 input 标签的拍照、录视频、录音频以及音频、视频、图片文件选择。

accept 字段内容（audio/ 表示音频 ， video/ 表示视频 ，image/* 表示图片 或者其他有效 MIME 类型）。

1090+ 支持 h5 页面中 input 标签的capture属性。

子组件

不支持

属性

示例代码

查看示例代码

事件

支持通用事件

pagestart事件新增返回参数 1080+:

error事件新增返回参数 1080+:

方法

canForward 回调函数返回参数：

canBack 回调函数返回参数：

postMessage 的参数说明：

isSupportWebRTC 回调函数返回参数 1080+：

setCookie 的参数说明 1100+：

示例：

<web id="web" src="http://www.example.com/"></web>

onBackPress () {
  this.$element('web').canBack({
    callback: function (e) {
      if (e) {
        // 加载历史列表中的上一个 URL
        this.$element('web').back()
      } else {
        router.back()
      }
    }.bind(this)
  })
  // 阻止默认行为，等待异步操作
  return true
}

内部 API

在 web 打开的网页中可以使用的事件和方法

事件

方法

示例

system.onmessage = function(data) {
  console.log('message received: ' + data)
}
system.postMessage('hello')

相关接口

在 web 打开的网页中仅支持以下JSSDK接口：

示例

window.hap.getEnv(data => {
  console.log(data.quickapp)
})

window.hap.scan({
  scanType: 0, success: (data) => {
    console.log(`handling success: ${data.result}`)
  }, fail: (data, code) => {
    console.log(`handling fail, code = ${code}`)
  }, cancel: () => {
    console.log('cancel')
  }, complete: () => {
    console.log('complete')
  }
})

web   示例代码

查看示例代码