属性说明

src

webview-styles

progress

注意：

• 小程序仅支持加载网络网页，不支持本地html
• 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
• App 端使用 自定义组件模式 时，uni.web-view.js 的最低版为
• App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下，如下为一个加载本地网页的uni-app项目文件目录示例：

    
┌─components           
├─hybrid              
│  └─html
│     ├─css
│     │  └─test.css
│     ├─img
│     │  └─icon.png
│     │  └─test.js
│     └─local.html
├─pages              
│     └─index.vue  
├─static              
├─main.js             
├─App.vue              
├─manifest.json      
└─pages.json         
    

示例

网页向应用发送消息，在 <web-view> 的 message 事件回调 event.detail.data 中接收消息。

Tips

• 传递的消息信息，必须写在 data 对象中。
• event.detail.data 中的数据，以数组的形式接收每次 post 的消息。

callback 返回的对象

示例

在 <web-view> 加载的 HTML 中，添加以下代码：

<!-- 微信 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 支付宝的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript">
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    }
</script>
<!-- 百度 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

待触发 UniAppJSBridgeReady 事件后，即可调用 uni 的 API。

App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。

通过以下方法，可以获得这个web-view组件对应的js对象，然后参考https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject，可以进一步重设这个web-view组件的样式，比如调整大小

<template>
    <view>
        <web-view src="https://www.baidu.com"></web-view>
    </view>
</template>
<script>
var wv;//计划创建的webview
export default {
    onReady() {
        // #ifdef APP-PLUS
        var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
        setTimeout(function() {
            wv = currentWebview.children()[0]
            wv.setStyle({top:150,height:300})
        }, 1000); //如果是页面初始化调用时，需要延时一下
        // #endif
        }
    };
</script>

甚至可以不用web-view组件，直接js创建一个子webview来加载html。比如不希望远程网页使用plus的API，不管是因为安全原因还是因为back监听冲突，可以使用如下代码：

web-view组件在App和小程序中层级较高，如需要在vue页面中写代码为web-view组件覆盖内容，小程序端无解，只能由web-view的组件自己弹出div。App端有如下若干方案：

• 比较简单的方式是actionsheet等原生弹出菜单
• 也可以使用plus.nativeObj.view。这里有一个底部图标菜单的示例，可参考
• 也可以使用HBuilderX1.9.10以后新出的原生子窗体subNvue

• 也可以在web-view组件内嵌的网页中弹出z-index更高的div。如果是外部网页，可以在vue中获得子webview对象后，通过为这个子webview注入一段js，操作其弹出div层。注意事项

• <web-view> 组件默认铺满全屏并且层级高于前端组件。App端想调节大小或再其上覆盖内容需使用plus规范。

• <web-view> 组件所在窗口的标题，跟随页面的 <title> 值的变化而变化。
• App端，web-view加载的html页面可以运行plus的api，但注意如果该页面调用了plus.key的API监听了back按键（或使用mui的封装），会造成back监听冲突。需要该html页面移除对back的监听。或按照上面的示例代码禁止网页使用plus对象
• uni.webview.js 最新版地址：https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js
• 小程序平台，个人类型与海外类型的小程序使用 web-view 组件，提交审核时注意微信等平台是否允许使用
• 小程序平台， src 指向的链接需登录小程序管理后台配置域名白名单。5+App和 无此限制。

Q：web-view 的页面怎么和应用内的页面交互？A：调用 uni 相关的 API，就可以实现页面切换及发送消息。参考：

Q：web-view 加载的 HTML 中，能够调用 5+ 的能力么？A：加载的 HTML 中是有 5+ 环境的，在 plusready 后调用即可。参考：一个简单实用的 plusready 方法