快應(yīng)用 web組件

2020-08-06 14:56 更新

概述

用于顯示在線的 html 頁面,在 webview 的 useragent 后追加內(nèi)容,格式是 hap/<平臺版本號>/<廠商標(biāo)識> <平臺應(yīng)用包名>/<平臺應(yīng)用版本號> <應(yīng)用名>/<應(yīng)用版本號> (<來源信息>)?!皝碓葱畔ⅰ迸c app 接口的 getInfo 方法返回結(jié)果中的 source 字段相同。

使用 web 組件,必須聲明"打開網(wǎng)頁"接口,否則會提示缺乏權(quán)限。

1010+ 支持上傳文件,不支持多選。 1020+ 支持下載文件。 1040+ 支持定位。

由于各廠商系統(tǒng) webview 已不再支持非安全域的 web 定位請求,為保證定位成功率和精度,請盡快升級您的站點到 HTTPS。

1040+ 支持 h5 頁面中 input 標(biāo)簽的拍照、錄視頻、錄音頻以及音頻、視頻、圖片文件選擇。

accept 字段內(nèi)容(audio/ 表示音頻 , video/ 表示視頻 ,image/* 表示圖片 或者其他有效 MIME 類型)。

子組件

不支持

屬性

名稱 類型 默認(rèn)值 必填 描述
src <string> - 需要加載的頁面地址
trustedurl 1020+ <array> - 可信任的網(wǎng)址,支持正則表達(dá)式。只有 trustedurl 中鏈接或者 src 鏈接的網(wǎng)頁可以和框架進(jìn)行雙向通信
allowthirdpartycookies 1030+ <boolean> false 是否支持第三方 cookies,設(shè)置為 true 時開啟接收第三方 cookies。 注意allowthirdpartycookies只支持安卓 5.0 及以上系統(tǒng)。5.0 以下默認(rèn)為 true
showloadingdialog 1070+ <boolean> false 是否展示默認(rèn)加載框
supportzoom 1070+ <boolean> true 網(wǎng)頁是否支持放大縮小

示例代碼

查看 示例代碼

事件

支持 通用事件

名稱 參數(shù) 描述
pagestart {url: urlString} 開始加載網(wǎng)頁時觸發(fā)
pagefinish {url: urlString, canBack: true/false, canForward: true/false} 網(wǎng)頁加載完成時觸發(fā)
titlereceive {title: title} 收到網(wǎng)頁標(biāo)題時觸發(fā)
error {errorMsg: errorMsg} 網(wǎng)頁加載出現(xiàn)錯誤時觸發(fā)
message 1020+ {message: messageString, url: urlString} 接收到網(wǎng)頁發(fā)來的消息時觸發(fā)
progress 1070+ {progress: progressValue} 當(dāng)前進(jìn)度,范圍 0~100

方法

名稱 參數(shù) 描述
reload 重新加載頁面
forward 瀏覽歷史頁面中的前一個頁面
back 瀏覽歷史頁面中的后一個頁面
canForward {callback: Function} 是否可以向前瀏覽
canBack {callback: Function} 是否可以向后瀏覽
postMessage 1020+ {message: messageString} 向網(wǎng)頁發(fā)送消息
canForward回調(diào)函數(shù)返回參數(shù):
參數(shù) 返回值類型 描述
canForward Boolean 是否可以向前瀏覽
canBack回調(diào)函數(shù)返回參數(shù):
參數(shù) 返回值類型 描述
canBack Boolean 是否可以向后瀏覽

示例:

<web id="web" src="http://www.example.com/" rel="external nofollow" ></web>
onBackPress () {
  this.$element('web').canBack({
    callback: function (e) {
      if (e) {
        // 加載歷史列表中的上一個 URL
        this.$element('web').back()
      } else {
        router.back()
      }
    }.bind(this)
  })
  // 阻止默認(rèn)行為,等待異步操作
  return true
}

內(nèi)部 API

在 web 打開的網(wǎng)頁中可以使用的事件和方法

事件

名稱參數(shù)描述
system.onmessage 1020+<string>收到快應(yīng)用發(fā)送的消息時觸發(fā)

方法

名稱參數(shù)描述
system.postMessage 1020+<string>發(fā)送消息到快應(yīng)用

示例

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

web   示例代碼

查看 示例代碼


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號