# web-view
承载网页的容器。此组件会自动铺满整个快应用页面，且每个页面最多只能有一个。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| src | string | 否 | webview 指向网页的链接；可以通过 qa.setTrustedUrls 方法为业务，设定可信任网址。 | |
| bindload | eventhandler | 否 | 网页加载成功时候触发此事件。e.detail = { src } | |
| binderror | eventhandler | 否 | 网页加载失败的时候触发此事件。e.detail = { src } | |
| bindmessage | eventhandler | 否 | 网页通过 postMessage 方法向快应用发送消息，会在特定时机（如：快应用后退、组件销毁）触发并收到。e.detail = { data }，data 是多次 postMessage 的参数组成的数组 |
默认情形下，src 属性所指向网页的链接，是可以信任的；为安全考量，其他网页如果想调用 JSSDK 中提供的 API，须通过 qa.setTrustedUrls 方法，配置可信任的网址（支持正则表达式），示例如下：
// app.js
qa.setTrustedUrls([
'https://your-domain-name.cn/explore/',
/^https?:\/\/your-domain-name.com/,
/^https?:\/\/(www\.)your-domain-name.com/,
/^https?:\/\/([a-z0-9]*\.)your-domain-name.com/
])
1
2
3
4
5
6
7
2
3
4
5
6
7
# 相关接口
web-view 加载的H5页面中可使用内置 JSSDK 提供的接口。
使用相关的接口需要在web-view 加载的H5页面引入js件:<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js" ></script>。现支持的有以下接口：
注意：https://quickapp/jssdk.webview.min.js 无法在线访问，仅支持快应用客户端内部加载.
| 接口名 | 说明 |
|---|---|
| qa.navigateTo | 参数与快应用接口一致 |
| qa.navigateBack | 参数与快应用接口一致 |
| qa.switchTab | 参数与快应用接口一致 |
| qa.reLaunch | 参数与快应用接口一致 |
| qa.redirectTo | 参数与快应用接口一致 |
| qa.postMessage | 向快应用发送消息，会在特定时机（快应用后退、组件销毁）触发组件的 Message 事件 |
| qa.getEnv | 获取当前环境 |
# 示例代码
<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js" ></script>
// JavaScript Code
qa.navigateTo({ url: '/path/to/page' })
qa.navigateBack({
delta: 1,
success: res => {
// 做些你需要处理的事情
}
})
qa.postMessage({ data: 'QuickApp' })
qa.postMessage({ data: { foo: 'QuickApp' } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
在网页内可通过 window.__qajs_environment 变量，来判断是否在快应用环境；也可以在 QaJSBridgeReady 回调中使用，或者使用 getEnv 接口，还可以通过判断 userAgent 中，是否包含 mode-quickapp 字样来判断。具体请参见如下示例：
<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js" ></script>
// web-view 下网页对应代码
function jSBridgeReady() {
console.log(window.__qajs_environment === 'quickapp') // true
}
if (!window.QaJSBridge || !QaJSBridge.invoke) {
document.addEventListener('QaJSBridgeReady', jSBridgeReady, false)
} else {
jSBridgeReady()
}
// 或者在 getEnv 回调中处理
qa.getEnv(res => {
console.log(res.quickapp) // true
})
// 或者基于 userAgent 判断
if (navigator.userAgent.includes('mode-quickapp')) {
// 做些你需要处理的事情
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Bug & Tip
- 每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件；
- 如果
src所指定的网页，不能正常调用所提供的 API，请检查是否引入js件； - 倘若跳转的网页，不能正常调用所提供的 API，请检查该网页是否在
qa.setTrustedUrls所指定规则内； - web-view 网页与快应用之间不支持除 JSSDK 提供的接口之外的通信；
https://quickapp/jssdk.webview.min.js无法在线访问，仅支持快应用客户端内部加载- 在 webview 的 useragent 后追加内容，格式是 hap/<平台版本号>/<厂商标识> <平台应用包名>/<平台应用版本号> <应用名>/<应用版本号> (<来源信息>) mode-quickapp。
来源信息
| 参数名 | 类型 | 说明 |
|---|---|---|
| packageName | String | 来源 app 的包名，一级来源 |
| type | String | 来源类型，二级来源，值为 shortcut、push、url、barcode、nfc、bluetooth、other |
| extra | Object | 来源其他信息，与 type 相关，不同的 type，extra 中的字段会不同 |
←
在线客服