Trust
Trust
  • 发布:2018-10-10 10:52
  • 更新:2019-11-11 19:25
  • 阅读:26728

在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时注意时机,获取方法执行太早可能获取不到。

17 关注 分享
Neil_HL jack_zheng xiangdeshan_120@sina.com bachest 466509589@qq.com SnoopyChen UserX 377313813@qq.com bashi1@126.com 774813571@qq.com zykczm@qq.com 1604002085@qq.com sonicsunsky@qq.com 664917175@qq.com kistoryg@gmail.com 253906501@qq.com 小白大人

要回复文章请先登录注册

382436919@qq.com

382436919@qq.com

回复 961695050@qq.com:
你好,大佬,请问你这个有实例么,uniapp给html发消息
2019-11-11 19:25
3128118199@qq.com

3128118199@qq.com

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

这个版本的js文件不好使,大家去引demo的那个版本的js文件。 真jb坑,浪费一下午时间。
2019-11-06 16:54
501919993@qq.com

501919993@qq.com

回复 498619363@qq.com:
我的页面有时候可以 有时候不行不知道哪里错了
2019-11-04 15:44
gakkki

gakkki

H5暂不支持,那请问什么时候会支持?不支持的话,有其他解决方案吗?【web-view @message 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息】
2019-10-30 17:08
3191535976@qq.com

3191535976@qq.com

nvue可以引入html吗
2019-10-25 16:08
1062884167

1062884167

回复 315500033@qq.com:
https://github.com/dingyong0214/uni.webview.js
2019-10-21 23:25
Mingor

Mingor

有问题的老哥们试试换下 uni.webview.js 的地址为最新版
https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js
2019-10-11 15:41
小白大人

小白大人

回复 uni小菜鸡:
试试监听titleUpdate,然后改变h5的title,一般来说app中内嵌的h5好像也用不到title吧
2019-09-29 18:35
小白大人

小白大人

回复 小白大人:
监听titleUpdate
2019-09-29 18:32
小白大人

小白大人

我发现一个h5和app通信的办法,就是app中监听webview页面标题title改变事件,然后在h5中用document.title改变标题,就可以监听到了,曲线救国或许可以用一用
2019-09-29 18:28
17611323298@163.com

17611323298@163.com

[system] navigateTo:fail page `/pages/user/receiving/receiving` is not found 为什么我跳的报这个错
2019-09-06 15:12
uni小菜鸡

uni小菜鸡

回复 510450106@qq.com:
plus.storage.getItem() 用这个 勉强可以解决问题
2019-08-30 14:11
510450106@qq.com

510450106@qq.com

回复 uni小菜鸡:
请问你解决了吗?
2019-08-30 11:21
uni小菜鸡

uni小菜鸡

plus.webview.create("","tengxun-webview",{
background:'transparent'
})
使用plus.webview.create 这种方法创建的webview加载页面 怎么向应用传递数据呢???
2019-08-29 17:36
346723989@qq.com

346723989@qq.com

当前环境:{"miniprogram":false} ,在微信开发者工具中,你们有没有遇到过
2019-08-26 15:27
hanson_s@163.com

hanson_s@163.com

回复 redeom:
h5=>app可以用webview的overrideUrlLoading 这个方法 拦截url,做bridge,app=>h5使用evalJS传递数据
2019-08-22 11:47
1048151913@qq.com

1048151913@qq.com

数据怎么传到本地html呢,html需要用到vue里面的值
2019-08-20 14:10
redeom

redeom

回复 诸葛逍遥:
找到出路了没有?大佬
2019-08-09 17:49
redeom

redeom

回复 584531552@qq.com:
这个通信不是实时的,后面怎么解决的?
2019-08-09 17:48
redeom

redeom

回复 513339083@qq.com:
大佬,解决了吗?我也是卡在这里,由于不能实时交互导致扩展困难,浪费了不少时间
2019-08-09 17:45
qihang2019

qihang2019

回复 315500033@qq.com:
同问,你解决了吗
2019-08-02 15:52
315500033@qq.com

315500033@qq.com

请问uni-app开发的app 用web-view 调用 用uni-app开发的h5页面 (uni-app调用uni-app); 会报uni.postMessage is not a function。请问webview的js该怎么引用
2019-07-31 17:26
arjun

arjun

回复 arjun:
不能这样操作
2019-07-30 10:03
arjun

arjun

回复 961695050@qq.com:
好像不难这样操作
2019-07-30 10:03
wenju

wenju

回复 诸葛逍遥:
看来只能用websocket曲线救国了 可怕
2019-07-25 14:24
诸葛逍遥

诸葛逍遥

怎么做到实时相互通信 ?? H5
2019-07-24 10:25
诸葛逍遥

诸葛逍遥

回复 513339083@qq.com:
确实 想方设法都不行 还得找别的出路
2019-07-24 10:24
1397267811@qq.com

1397267811@qq.com

webview加载的h5,之前调用横屏方法 plus.screen.lockOrientation("portrait-primary")正常显示横屏,这两天打开app一看,横屏只显示一半了。不知道怎么回事求解答?
2019-07-20 21:47
505114230@qq.com

505114230@qq.com

想通过web-view扩展一点个性需求发现卡在通信这一块,哎
2019-07-10 09:59
1537372393@qq.com

1537372393@qq.com

回复 阿拉比卡豆:
需要引入uni的js文件,但是storage接口还是没有
2019-07-04 12:21
1537372393@qq.com

1537372393@qq.com

请问打开webview 怎么给页面传值呢?现在只有监听到html向应用发送消息的功能。而且在webview页面里面不能调用获取storage接口
2019-07-04 12:21
1537372393@qq.com

1537372393@qq.com

回复 余红杰:
重新编译一次app
2019-07-04 12:19
阿拉比卡豆

阿拉比卡豆

远程加载的vue项目页面似乎无法调用uni的接口啊?
2019-06-27 15:56
哈哈八百

哈哈八百

回复 foreverglory@qq.com:
大佬你好,我这边的场景是,iframe 中的h5页面点击需要掉起uni-app 的分享功能,如果iframe中post-message到这个中转页面,这个中转页面怎么给最外面的vue 页面 post-message,吊起分享呢??谢谢
2019-06-13 14:44
uni小菜鸡

uni小菜鸡

在 h5页面使用uni-app的 api 的时候不能异步执行,放到定时器里面的 api 也不会执行, 不能异步执行 那页面跳转的api 有什么用? 我不能刚进入这个页面立即就跳转 到别的页面吧
2019-06-04 17:32
961695050@qq.com

961695050@qq.com

回复 513339083@qq.com:
uniapp完全可以给html发消息,使用plus.storage.setItem设置参数,在html中使用plus.storage.getItem来接受参数使用。
2019-05-28 09:53
584531552@qq.com

584531552@qq.com

回复 1820573959@qq.com:
uni.postMessage.我使用接收不到信息呢
2019-05-27 18:59
1820573959@qq.com

1820573959@qq.com

请教一个问题,我接的是融云的第三方及时通讯,融云的api在uni-app里面就没有办法使用,所以接了外联页面,用法也是一样,用的中转页,现在出现的问题是:我外联页面(接了融云接口)接收到了消息了,可是未读消息无法第一时间回传到uni-app中去,uni.postMessage只能传到中间页面,可是中间页面不打开又无法传到第一个页面,打开了就直接跳转到外联页面了,感觉走到了死胡同了,请问下有没有遇到过类似的情况,有办法解决吗?
2019-05-27 15:25
1023401012@qq.com

1023401012@qq.com

回复 513339083@qq.com:
不止鸡肋, plus.webview的很多属性也给砍掉了....
2019-05-25 08:59
632151055@qq.com

632151055@qq.com

web-view.page中的网页重定向后调用uni.navigateBack()只能回到webview的首页,不能回到web-view.page的上个页面,设置delta也不行,是bug还是?
2019-05-24 18:06
513339083@qq.com

513339083@qq.com

html给uniapp发消息不是实时的?反过来,uniapp完全不能给html发消息?如果是这样,真是鸡肋了,浪费一天时间
2019-05-21 09:27
wangwensheng@linhuiba.com

wangwensheng@linhuiba.com

回复 leah_huang:
大佬解决了吗?同问
2019-05-17 16:33
wangwensheng@linhuiba.com

wangwensheng@linhuiba.com

回复 fategaga:
大佬解决了吗?同问
2019-05-17 16:32
foreverglory@qq.com

foreverglory@qq.com

回复 webnzwj@163.com:
间接解决,先嵌套一个web-view用于中转、存储,然后在这web-view里面使用iframe再去套对应的页面,使用post-message在当前web-view与对应页面间进行通信。
2019-05-17 12:49
银少

银少

只能在特定时机才会触发,有点鸡肋
2019-05-14 19:09
784971454@qq.com

784971454@qq.com

h5跳转app页面可以带参数吗?页面可以跳转了
2019-05-09 21:01
webnzwj@163.com

webnzwj@163.com

回复 foreverglory@qq.com:
我也遇到这个问题,请问您解决了吗?
2019-05-08 17:48
fategaga

fategaga

uni页面如何向本地html页面发送数据
2019-04-19 14:30
iyunxi@qq.com

iyunxi@qq.com

回复 Trust:
应用与html只能单次交互,好鸡肋啊,需要加强实时交互~
2019-04-10 01:13
774813571@qq.com

774813571@qq.com

回复 leah_huang:
网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。 如果需要执行数据交互 最好是把token携带过去?在那边进行ajax 这个只是用来通知刷新数据~我想是这样
2019-04-09 20:50
498619363@qq.com

498619363@qq.com

微信小程序加载的网页不支持uni.navigateBack()?
APP里可以返回,微信小程序里没反应,是不是我用法不对
///////////////////////////////////////////////

<a href="javascript:;" class="back-btn">返回</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.0.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function () {
document.querySelector('.back-btn').addEventListener('click', function (evt) {
uni.navigateBack()
});
});
</script>
2019-04-02 16:16
leah_huang

leah_huang

请教下大佬,应用可以向webview页面发送消息吗?还有从页面传回的消息,vue页面监听不到是咋回事
2019-03-22 10:55
foreverglory@qq.com

foreverglory@qq.com

如何实现即时postMessage通信?很多情况下并不需要将webview关闭或者退出。还有,如何不要让webview全屏化,或者可以添加其它组件。
2019-03-15 17:38
494227683@qq.com

494227683@qq.com

除开上面说的那些API能用其他的不能用吗? 比如 uni.getStorageSync('accessToken')
2019-03-09 15:35
hcy.php@qq.com

hcy.php@qq.com

uni.postMessage({
data: {
action: editor.txt.html();//富文本内容
}
});

请教一下大神,传输数据回去,进入这个页面 改变了内容 传不回去是怎么回事,只能传回去页面加载出来的初始内容,在页面上修改内容后新内容传不回去,怎么解决啊。
2019-01-09 15:53
1206188300@qq.com

1206188300@qq.com

关于获取vue页面中的web-view组件对象,需要设置延时才能正常的获取到该对象。一般手机500mm可以获取到了,但是今天测试华为手机,要设置1s才能获取到该web-view对象。比如:小米,一加手机等500mm能正常获取,但是华为就要1s。延时时间是和手机配置什么的有关吗?那设置这个延时时间有什么标准吗?
2018-12-26 18:00
风雅

风雅

怎么刷新页面呢?最好头部右侧增加刷新按钮
2018-12-13 09:11
657917826@qq.com

657917826@qq.com

下载最近HBuilderX,webview请求的页面无法打开,什么原因????
2018-11-29 15:48
Trust

Trust (作者)

回复 余红杰:
http://uniapp.dcloud.io/component/web-view
网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。
2018-10-30 13:49
余红杰

余红杰

不对,实测是这样:
如果成功调用navigateback或者redirect事件则会收到message,这是什么原因呢
2018-10-30 13:28
余红杰

余红杰

Tue Oct 30 2018 11:29:37 GMT+0800 (CST) 事件警告
11:29:39.673 OnWebviewEvent: __DOMReady, WebviewId: 1 not found
11:29:39.694 console.groupEnd
这是唯一的警告,难道是因为这个?
2018-10-30 11:31
余红杰

余红杰

html页面给vue发送消息怎么没反应啊?可以使用Uni跳转页面,但是message就不行
2018-10-30 11:30
Trust

Trust (作者)

回复 余红杰:
前面不是写了么,1.0.2起才支持的,所以需要下载群里的体验版。
正式版,这周会尽快更新的。
2018-10-29 11:33
余红杰

余红杰

回复 Trust:
申请了,关键是提示这个错误“请求的页面无法打开:file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/hybrid/html/test.html at file:///android_asset/data/dcloud_error.html:41”
我就是新建了hybrid/html目标,然后把test.html放进去了,然后把模板的webview那个src改成/hybrid/html/test.html
2018-10-29 11:32
Trust

Trust (作者)

回复 余红杰:
4群:942702595
2018-10-29 11:25
Trust

Trust (作者)

回复 余红杰:
自 HBuilderX v1.0.2 起,在 5+App 平台下 web-view 支持加载应用内的 HTML 资源。
2018-10-29 11:25
余红杰

余红杰

回复 Trust:
群都是满的哦,而且
2018-10-29 11:22
余红杰

余红杰

这个错误,我的hbuilderX是1.0.1.20181012啊!!
2018-10-29 11:22
余红杰

余红杰

回复 Trust:
:file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/hybrid/html/test.html at file:///android_asset/data/dcloud_error.html:41
2018-10-29 11:21
Trust

Trust (作者)

回复 余红杰:
检查下页面的地址,地址不正确的话无法加载。
如果是本地 html,请确认 HBuilderX 版本号是否正确。可以去QQ群下载体验版,本周更新正式版。
2018-10-29 11:21
余红杰

余红杰

请求的页面无法打开是什么原因呢??
2018-10-29 11:15