Trust
Trust
  • 发布:2018-10-10 10:52
  • 更新:2024-03-25 19:14
  • 阅读:170398

在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

分类:uni-app

uni-app的web-view组件,支持加载远程网页,在app环境下,还支持加载本地HTML页面。

在web-view加载页面中,会涉及wx、plus、uni等对象的使用。

  • 在小程序下使用wx的api,需要引入微信提供的https://res.wx.qq.com/open/js/jweixin-1.4.0.js。
  • 在app下默认有plus对象,不需要引入js文件。
  • 不管是在小程序下还是在app下,使用uni的api,需要引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

本文会详述在webview里的uni对象的使用方式,以及和vue页面的通讯方式。

HBuilderX 1.0.0 版本开始,uni-app 支持在 web-view 中调用 uni 的 API。

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK,必须引用。 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

Tips

  • 这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的,而不是 uni-app 项目中的文件。
  • 如果不考虑微信小程序,则无需引入微信的 JS-SDK。
  • 两个文件同时引入时,注意引入的顺序,微信的需要在前。

调用的时机

在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境:' + JSON.stringify(res));  
    });  
});

页面跳转

支持调用所有的 uni 路由方法,可以实现从 HTML 重新跳转回应用内的页面。

在 UniAppJSBridgeReady 后,调用路由方法跳转到应用内的页面。

document.addEventListener('UniAppJSBridgeReady', function() {  
    document.querySelector('.btn-list').addEventListener('click', function(evt) {  
        var target = evt.target;  
        if (target.tagName === 'BUTTON') {  
            var action = target.getAttribute('data-action');  
            if(action === 'navigateTo') {  
                uni.navigateTo({  
                    url: '/pages/component/button/button'  
                });  
            }  
        }  
    });  
});

发送消息

可以通过 uni.postMessage 在 HTML 中向应用发送消息。要实现此功能,需要完成以下两步工作。

监听 web-view 的 message 事件

监听 web-view 组件的 message 事件,然后在事件回调的 event.detail.data 中接收传递过来的消息。

<template>  
	<view>  
		<web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
	</view>  
</template>  
  
<script>  
	export default {  
		methods: {  
			handleMessage(evt) {  
				console.log('接收到的消息:' + JSON.stringify(evt.detail.data));  
			}  
		}  
	}  
</script>

从 HTML 向应用发送消息

uni.postMessage 中的参数格式,必须是 data: {}。也就是说,传递的消息信息必须在 data 这个对象中。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
    });  
});

每次执行 postMessage 后,传递的消息会以数组的形式存放。因此,在 web-view 的 message 事件回调中,接收到的 event.detail.data 的值是一个数组。

获取当前环境信息

HTML 在不同的环境下,可能需要执行不同的操作或传递不同的消息。可以通过 uni.getEnv() 方法,来获取当前的环境信息。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        if (res.plus) {  
            console.log('当前环境为【5+App】');  
        } else if (res.miniprogram) {  
            console.log('当前环境为【微信小程序】');  
        }  
    });  
});

本地 HTML

自 HBuilderX v1.1.0 起,在 5+App 平台下 web-view 支持加载应用内的 HTML 资源。
本地的 HTML 资源,必须存放在规定的目录下,即 uni-app 项目->hybrid->html 目录。

├─common      
├─components        
├─hybrid  
│  └─html  
│          test.html        
├─pages              
├─static  
│  App.vue  
│  main.js  
│  manifest.json  
│  pages.json

与 html 文件相关的 css、js 等本地资源,同样放在这个 hybrid->html 目录下。
这个hybrid目录不会被编译器编译,所以这里的不能放vue文件,而其他目录也不能放本地HTML文件。
未来hybrid目录还会支持其他语言在uni-app的中的混合使用。

注意:在本地 HTML 中引入网络资源时,必须补全协议。比如:https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

运行体验

示例中 web-view 加载的是一个本机的测试地址,这个测试 HTML 见附件。

  • 加载网络地址的话,需要在本机启动一个服务将此 HTML 放进去,然后修改 hello uni-app 中的 web-view 例子的 src 地址为可访问的局域网地址。

  • 如果是加载本地 HTML 的话,就直接新建目录将此 HTML 放进去,然后修改 web-view 的 src 为 /hybrid/html/test.html 即可。

  • 参考文档:web-view

web-view组件在app中的窗体关系和plus.webview操作方式

uni-app的vue页面本身是一个webview,vue页面里的web-view组件,其实是一个子webview。
但一个vue页面不能放多个web-view组件,这个组件默认是全屏的(不会覆盖原生头和原生导航)。
使用plus代码获得当前webview的对象后(参考此文https://ask.dcloud.net.cn/article/35036),再获取子webview,其实也可以得到web-view组件所对应的plus的webview对象,进而再使用plus.webview的丰富api。
获取子webview时注意时机,获取方法执行太早可能获取不到。

42 关注 分享
Neil_HL 32435 x***@sina.com bachest 4***@qq.com SnoopyChen UserX 秋凡 b***@126.com 7***@qq.com z***@qq.com 1***@qq.com sonicsunsky 6***@qq.com k***@gmail.com 2***@qq.com 小白大人 9***@qq.com one11onew 1***@qq.com 1***@qq.com 1***@qq.com z***@gmail.com 1***@qq.com 1***@qq.com 最光阴 风腾网络 菜是原罪 moon_up 3***@qq.com 1***@qq.com 彭彭丁满sky2 7***@qq.com 苏陌 9***@qq.com 1***@qq.com m***@163.com w***@163.com 1***@qq.com 理想001 HRK DCloud_UNI_HRK

要回复文章请先登录注册

f***@huiji.wiki

f***@huiji.wiki

有没有办法限制web侧对这个uni的调用呢?我是希望只使用postMessage这一个方法的。
2024-03-25 19:14
苍山暮色烟雨迟

苍山暮色烟雨迟

我是抖音小程序,h5也是用的uniapp做的,h5使用window.postMessage 抖音端@message根本收不到啊
2024-03-10 17:07
1***@qq.com

1***@qq.com

回复 t***@163.com :
使用uni.webview.postMessage 报错importExcel.html:52 Uncaught TypeError: Cannot read properties of undefined (reading 'postMessage')
2024-03-06 20:47
t***@163.com

t***@163.com

回复 1***@163.com :
你看文档啊。H5不支持。
2024-01-18 19:26
1***@163.com

1***@163.com

回复 t***@163.com :
您点开我的资料看一下我的帖子,我的h5和app都是uni写的,就是不能通信
2024-01-18 15:15
t***@163.com

t***@163.com

回复 1***@163.com :
vue3这么写 app.config.globalProperties.myUni = uni.webView ; 页面中这么写 import {getCurrentInstance} from 'vue'
const instance = getCurrentInstance()
console.log('instance...', instance!.appContext.config.globalProperties.myUni)
const myUni = instance!.appContext.config.globalProperties.myUni

const handleClick = function() {
console.log('handleClick...')
console.log('uni...', myUni)
myUni.postMessage({
data: {
info: 'hahhaha',
url: window.location.href,
id: 'H5'
}
})
}
2024-01-18 15:12
t***@163.com

t***@163.com

回复 1***@163.com :
你怎么写的
2024-01-18 09:35
1***@163.com

1***@163.com

回复 t***@163.com :
大哥为什么我这么写不行啊
2024-01-16 16:00
t***@163.com

t***@163.com

postMessage H5不支持。但是uni.webview.postMessage 就可以。你的文档写清楚些啊。不能有了uni-app x 就不管uni-app。放弃JS uni-app 会失去很多前端开源机会。注定走向失败。我即将选择rn 代替你。
2024-01-16 09:39
4***@qq.com

4***@qq.com

回复 duang2 :
解决了,创建webview的时候,plusrequire不能设置为none,设置其他就可以了
2023-12-21 17:07