uniapp在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
uniapp在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
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时注意时机，获取方法执行太早可能获取不到。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。