web-view

Component Type：UniWebViewElement

承载网页的容器

Attributes

name	type	default	description
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 = { errSubject, errCode, errMsg }
@loaded	(event: WebViewLoadedEvent) => void	-	网页加载完成后触发。e.detail = { url }
@loading	(event: WebViewLoadingEvent) => void	-	网页加载中触发。e.detail = { url }
@download	(event: WebViewDownloadEvent) => void	-	点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength }

WebViewStyles

web-view组件的样式

WebViewStyles Values

name	type	optinal	default	description
progress	WebViewProgressStyles | boolean	YES	false	网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。

WebViewProgressStyles

web-view组件的进度条样式

WebViewProgressStyles Values

name	type	optinal	default	description
color	string.ColorString	YES	-	网页加载进度条颜色，默认值为 #00FF00 。

Event

WebViewMessageEvent

WebViewMessageEvent Values

name	type	required	default	description
detail	WebViewMessageEventDetail	YES	-	-
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

WebViewMessageEventDetail Values

name	type	optinal	default	description
data	Map<string, any>	NO	-	消息包含的数据

WebViewMessageEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

WebViewErrorEvent

WebViewErrorEvent Values

name	type	required	default	description
detail	WebViewErrorEventDetail	YES	-	-
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

WebViewErrorEventDetail Values

name	type	optinal	default	description
errSubject	string	YES	-	统一错误主题（模块）名称，固定值uni-web-view
errCode	number	YES	-	统一错误码 100001 ssl error 100002 page error 100003 http error
errMsg	string	YES	-	统一错误描述信息

WebViewErrorEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

WebViewLoadedEvent

WebViewLoadedEvent Values

name	type	required	default	description
detail	WebViewLoadedEventDetail	YES	-	-
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

WebViewLoadedEventDetail Values

name	type	optinal	default	description
url	string	YES	-	加载完成的网页链接

WebViewLoadedEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

WebViewLoadingEvent

WebViewLoadingEvent Values

name	type	required	default	description
detail	WebViewLoadingEventDetail	YES	-	-
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

WebViewLoadingEventDetail Values

name	type	optinal	default	description
url	string	YES	-	加载中的网页链接
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

WebViewLoadingEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

WebViewDownloadEvent

WebViewDownloadEvent Values

name	type	required	default	description
detail	WebViewDownloadEventDetail	YES	-	-
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

WebViewDownloadEventDetail Values

name	type	optinal	default	description
url	string	YES	-	下载链接
userAgent	string	YES	-	用户代理
contentDisposition	string	YES	-	指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地
mimetype	string	YES	-	媒体类型
contentLength	number	YES	-	文件大小

WebViewDownloadEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

UniWebViewElement

web-view元素对象

UniWebViewElement Methods

back()

后退

forward()

前进

reload()

重新加载

stop()

停止加载

evalJS(js)

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

Parameters

name	type	required	default	description
js	string	YES	-	-

Example

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" @download="download">
   </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">
       <button class="uni-flex-item" type="primary" @click="back">后退</button>
       <button class="uni-btn-ml uni-flex-item" type="primary" @click="forward">前进</button>
     </view>
     <view class="uni-row uni-btn-v">
       <button class="uni-flex-item" type="primary" @click="reload">重新加载</button>
       <button class="uni-btn-ml uni-flex-item" type="primary" @click="stop">停止加载</button>
     </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));
     },
     error(event : WebViewErrorEvent) {
       this.loadError = true
       console.log(JSON.stringify(event));
     },
     loading(event : WebViewLoadingEvent) {
       console.log(JSON.stringify(event));
     },
     loaded(event : WebViewLoadedEvent) {
       console.log(JSON.stringify(event));
     },
     download(event : WebViewDownloadEvent) {
       console.log(JSON.stringify(event));
       uni.showModal({
         content: "下载链接: " + event.detail.url + "\n文件大小: " + event.detail.contentLength / 1024 + "KB",
         showCancel: false
       });
     },
     confirm(event : InputConfirmEvent) {
       console.log(JSON.stringify(event));
       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>

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
web-view	5.0	√	3.9+	9.0	√	-

Children Components

Can't nest components

See also

• Related Bug

上下文对象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	向应用发送消息

在网页中使用uni.postMessage()即可向uts发送消息。

uts端在 <web-view> 组件的 message 事件回调 event.detail.data 中接收消息。

示例代码详见hello-uni-app-x/hybrid/html/local.html

Tips

• 传递的消息信息，必须写在 data 对象中。
• event.detail.data 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受）

注意

• web-view组件为系统web-view，内核版本号不由uni-app x框架控制。如需x5等webview，需另行开发插件。
• web-view组件默认宽、高为0px，页面中使用时需设置相应的 css 属性控制组件宽高才能正常显示。