官网文档:https://uniapp.dcloud.net.cn/component/web-view.html#getenv

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。

各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。

属性说明

属性名类型说明平台差异说明
srcStringwebview 指向网页的链接
allowString用于为 iframe 指定其特征策略H5
sandboxString该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。H5
fullscreenBoolean是否铺满整个页面,默认值:trueH5 (HBuilder X 3.5.4+)
webview-stylesObjectwebview 的样式App-vue
update-titleBoolean是否自动更新当前页面标题。默认值:trueApp-vue (HBuilder X 3.3.8+)
@messageEventHandler网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。H5 暂不支持(可以直接使用 window.postMessage
@onPostMessageEventHandler网页向应用实时 postMessageApp-nvue

APP --- vue页面与h5页面通讯

  • src 指的是web-view需要引入的h5页面,vue页面模式下,嵌入的页面会自动铺满屏幕,不需要单独去设置页面宽高
  • 嵌入的h5项目或者页面不是uni-app项目搭建的话,需要在index.html页面或这是当前的HTML页面引入uni-app项目的API ,这样才能使用,才能相互通讯--->APIicon-default.png?t=M85Bhttps://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js
  • app端
        // 引入需要嵌入的h5 链接
        <template>
            <view>
                <web-view @message="message" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
            </view>
        </template>
        //在methods中接收h5发送的消息
        /**
        * @information message中 接收到的是由h5项目通过uni.postMessage中传递出来的数据,以数组的形式接收每次的消息
        */
        message(event){
            console.log('接收到消息',event.detail.data)
        }
    
  • h5 项目
        //引入uni-app的api之后 ,只需绑定事件,向APP传递消息
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
        <script>
            document.addEventListener('UniAppJSBridgeReady', function() {
                uni.postMessage({
                    data: {
                        action: '这是我传送的消息'
                    }
                });//传递的消息信息,必须写在 data 对象中。
            });
        </script>
    

  这个就是vue与h5 的整个通讯流程,BUT!!!,关键来了,注意点来了,就是他不能实时通讯。他只有在页面 后退,组件销毁,分享的时候会触发message事件并接收到消息,说白了就是他并不能实时通讯

解决办法

  1. 将uni-app项目的编译模式更改为V3编译模式,V3编译模式下,网页向应用postMessage为实时消息
  2. 将uni-app项目中的使用web-view的vue页面更改称为nuve页面,此时,消息传递也为实时通讯,详细介绍一下nvue与h5页面通讯

APP --- nvue页面与h5页面通讯

  nuve页面对于web-view来说与vue有点点的不同

  • 样式来说,nuve中的web-view必须指定宽高,它不像vue一样会自动铺满,需要自己自己规定,但是这个宽高不能‘写死’,咱们做的是APP端,屏幕不能是‘死’的,所以先获取手机屏幕信息之后再规定屏幕宽高吧

  • 调试来说,nvue他现在不支持h5 哈,所以通讯这一块吧,你不能在浏览器上面调试,必须真机运行哒

  • 方法来说,为了实时通讯,页面更换为nvue,相对应的方法也要从@message换成@onPostMessage

        <template>
            <view>
                <web-view @onPostMessage="message"
                :style="{width:'200px', height:'200px'}"
                src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
            </view>
        </template>
    

APP 跳转页面

  在h5页面中引入web-view的方法的基础上,不但可以像上面一样进行通讯,还可以在跳转页面,达到从嵌入h5跳回到本地应用的页面上的效果,跳转页面的方式与uni-app一致,在h5页面写入方法就好

  • uni.navigateTo // 跳转到指定页面
  • uni.redirectTo // 关闭当前页面跳转到指定页面
  • uni.reLaunch // 关闭所有页面跳转到指定页面
  • uni.switchTab // 跳转tab页面--只能跳转tab页
  • uni.navigateBack // 返回页面层级

注意

  这里有一个冲突点,当web-view嵌入的h5 是uni-app生成的h5资源的话,这样跳转要怎么跳转呢
  使用uni.webView.navigateTo //其中的webView指的是你嵌入的h5的跳转想要跳转回应用

小程序 --- vue页面与h5页面通讯

  • 小程序的与app一致,引入的h5页面会自动铺满小程序页面。个人类型与海外类型的小程序暂不支持
  • 小程序的src不变
  • 通讯方法由@message更改为@bindmessage 出发时机依旧为小程序后退,组件销毁或者分享触发并接收到消息
  • 引入uni-appAPI之后,再引入微信平台的js文件 --->wxicon-default.png?t=M85Bhttps://res.wx.qq.com/open/js/jweixin-1.3.2.js
  • 发送消息方法更改为 wx.miniProgram.postMessage({ data: 'hhh' })
  • 小程序
        <web-view src="http://a.html?id=123"></web-view>
    
  • h5
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        // javascript
        wx.miniProgram.postMessage({ data: 'hhh' })
        
        //此时接收不到,因为没有触发时机,所以可以进行人为操作
        <script type="text/javascript">
            wx.miniProgram.navigateBack({
                delta: 1
            })
            wx.miniProgram.postMessage({
                data: 'foo'
            })
    </script>
    

APP端web-view扩展

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

 每个vue页面,其实都是一个webview,而vue页面里的web-view组件,其实是webview里的一个子webview。这个子webview被append到父webview上。

 通过以下方法,可以获得这个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.$scope.$getAppWebview()
			//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
			setTimeout(function() {
				wv = currentWebview.children()[0] wv.setStyle({
					top: 150,
					height: 300
				})
			}, 1000);
			//如果是页面初始化调用时,需要延时一下 
			// #endif 
		}
	};
</script>

获取当前环境

  • HTML 在不同的环境下,可能需要执行不同的操作或传递不同的消息。可以通过 uni.getEnv() 方法,来获取当前的环境信息。
        document.addEventListener('UniAppJSBridgeReady', function() {  
            uni.getEnv(function(res) {  
                if (res.plus) {  
                    console.log('当前环境为【5+App】');  
                } else if (res.miniprogram) {  
                    console.log('当前环境为【微信小程序】');  
                }  
            });  
        })
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐