快應(yīng)用 web組件

2020-08-06 14:56 更新

概述

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

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

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

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

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

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

子組件

不支持

屬性

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

示例代碼

查看 示例代碼

事件

支持 通用事件

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

方法

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

示例:

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

內(nèi)部 API

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

事件

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

方法

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

示例

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

web   示例代碼

查看 示例代碼


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)