web-view

属性

WebViewStyles

WebViewStyles 属性值

WebViewProgressStyles

WebViewProgressStyles 属性值

展示全部

# web-view

组件类型：UniWebViewElement

承载网页的容器

# # 属性

名称	类型	默认值	描述
src	string(string.URIString)	-	webview 指向网页的链接
webview-styles	WebViewStyles	{"progress":{"color":"#00FF00"}}	webview 的样式
@message	(event: WebViewMessageEvent) => void	-	网页向应用 postMessage 时触发。e.detail = { data }
@error	(event: WebViewErrorEvent) => void	-	网页加载错误时触发。e.detail = { errMsg }
@loaded	(event: WebViewLoadedEvent) => void	-	网页加载完成后触发。
@loading	(event: WebViewLoadingEvent) => void	-	网页加载中触发。

# # WebViewStyles

web-view组件的样式

# # WebViewStyles 属性值

名称	类型	必备	默认值	描述
progress	WebViewProgressStyles \| boolean	是	false	网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。

# # WebViewProgressStyles

web-view组件的进度条样式

# # WebViewProgressStyles 属性值

名称	类型	必备	默认值	描述
color	HBuilderX.ColorString	是	-	网页加载进度条颜色，默认值为 #00FF00 。

# # 事件

# # WebViewMessageEvent

# # WebViewMessageEvent 属性值

名称	类型	必填	默认值	描述
detail	WebViewMessageEventDetail	是	-	-
type	string	是	-	事件类型，固定值message
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

# # WebViewMessageEventDetail 属性值

名称	类型	必备	默认值	描述
data	Map<string, any>	否	-	消息包含的数据

# # WebViewMessageEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# # WebViewErrorEvent

# # WebViewErrorEvent 属性值

名称	类型	必填	默认值	描述
detail	WebViewErrorEventDetail	是	-	-
type	string	是	-	事件类型，固定值error
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

# # WebViewErrorEventDetail 属性值

名称	类型	必备	默认值	描述
errSubject	string	是	-	统一错误主题（模块）名称，固定值uni-web-view
errCode	number	是	-	统一错误码 100001 ssl error 100002 page error 100003 http error
errMsg	string	是	-	统一错误描述信息

# # WebViewErrorEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# # WebViewLoadedEvent

# # WebViewLoadedEvent 属性值

名称	类型	必填	默认值	描述
type	string	是	-	事件类型，固定值loaded
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

# # WebViewLoadedEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# # WebViewLoadingEvent

# # WebViewLoadingEvent 属性值

名称	类型	必填	默认值	描述
type	string	是	-	事件类型，固定值loading
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

# # WebViewLoadingEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# # UniWebViewElement

web-view元素对象

# # UniWebViewElement 方法

# # back()

后退

# # forward()

前进

# # reload()

重新加载

# # stop()

停止加载

# # evalJS(js)

原生和WebView通信（执行JS脚本）

# # 参数

名称	类型	必填	默认值	描述
js	string	是	-	-

# # 示例

hello uni-app x

<template>
 <view class="uni-flex-item">
   <web-view id="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message"
     @error="error" @loading="loading" @loaded="loaded">
   </web-view>
   <view class="uni-padding-wrap uni-common-mt">
     <view class="uni-input-v">
       <input class="uni-input" confirmType="go" placeholder="输入网址跳转" @confirm="confirm" />
     </view>
     <view class="uni-row uni-btn-v">
       <view class="uni-flex-item">
         <button type="primary" @click="back">后退</button>
       </view>
       <view class="uni-btn-ml uni-flex-item">
         <button type="primary" @click="forward">前进</button>
       </view>
     </view>
     <view class="uni-row uni-btn-v">
       <view class="uni-flex-item">
         <button type="primary" @click="reload">重新加载</button>
       </view>
       <view class="uni-btn-ml uni-flex-item">
         <button type="primary" @click="stop">停止加载</button>
       </view>
     </view>
     <view class="uni-btn-v">
       <button type="primary" @click="nativeToWeb">原生和Web通信</button>
     </view>
   </view>
 </view>
</template>

<script>
 export default {
   data() {
     return {
       src: 'https://www.dcloud.io',
       webview_styles: {
         progress: {
           color: '#FF3333'
         }
       },
       webviewContext: null as WebviewContext | null,
       loadError: false
     }
   },
   onReady() {
     this.webviewContext = uni.createWebviewContext('web-view', this)
   },
   methods: {
     back() {
       this.webviewContext?.back();
     },
     forward() {
       this.webviewContext?.forward();
     },
     reload() {
       this.webviewContext?.reload();
     },
     stop() {
       this.webviewContext?.stop();
     },
     nativeToWeb() {
       this.webviewContext?.evalJS("alert('hello uni-app x')");
     },
     message(event : WebViewMessageEvent) {
       console.log(JSON.stringify(event.detail));
     },
     error(event : WebViewErrorEvent) {
       this.loadError = true
       console.log(JSON.stringify(event.detail));
     },
     loading(event : WebViewLoadingEvent) {
       console.log(JSON.stringify(event.type));
     },
     loaded(event : WebViewLoadedEvent) {
       console.log(JSON.stringify(event.type));
     },
     confirm(event : InputConfirmEvent) {
       console.log(event.detail.value);
       let url = event.detail.value;
       if (!url.startsWith('https://') && !url.startsWith('http://')) {
         url = 'https://' + url;
       }
       this.src = url;
     }
   }
 }
</script>

<style>
 .uni-input-v {
   padding: 10rpx 0;
 }

 .uni-btn-ml {
   margin-left: 10rpx;
 }
</style>

# # 兼容性

	安卓系统版本	安卓 uni-app	安卓 uni-app-x	iOS 系统版本	iOS uni-app	iOS uni-app-x
web-view	5.0	√	3.9+	9.0	√	-

# # 子组件

不可以嵌套组件

# # 参见

Reference

# 上下文对象API

web-view的操作api为uni.createWebviewContext()。

给web-view组件设一个id属性，将id的值传入uni.createWebviewContext()，即可得到web-view组件的上下文对象，进一步可使用.evalJS()、.reload()等方法。

# web-view组件的内外通信

uts向web-view的网页发消息

使用evalJS()方法，详见上方示例代码
web-view里的网页向uts发消息

在网页中引入uni.webview.1.5.5.js。即可在网页中调用一批uni的api，包括：

方法名	说明	平台差异说明
uni.webView.navigateTo	navigateTo
uni.webView.redirectTo	redirectTo
uni.webView.reLaunch	reLaunch
uni.webView.switchTab	switchTab
uni.webView.navigateBack	navigateBack
uni.webView.postMessage	向应用发送消息