我们日常使用web-view最常见的方法是新建一个页面,然后放一个web-view并配置上我们的html页面地址
这里有另外一种动态创建web-view的方法,更加的灵活
let wvPath = '/hybrid/html/webview.html'
let wv= plus.webview.create(
wvPath,
'map-view',
{
'uni-app': 'none',
top: systemInfo.statusBarHeight,
left: 0,
width: systemInfo.screenWidth,
height: systemInfo.screenHeight - systemInfo.statusBarHeight,
background: '#ffffff',
// 启用手势返回
// popGesture: 'close',
},
{
// 这里携带web-view的额外参数
key
}
)
// 一定要记得在不需要的时候 关闭掉web-view
wv.close()
监听动态创建的web-view发送的消息,切记plus.globalEvent.addEventListener('plusMessage', messageEvent)只需要添加一次,不要每次都添加监听
plus.globalEvent.addEventListener('plusMessage', messageEvent)
function messageEvent(e) {
// 检查数据结构
if (!e.data || !e.data.args || !e.data.args.data || !e.data.args.data.arg) {
console.error('接收到的消息格式不正确:', e)
return
}
let info = e.data.args.data.arg
}
竟然用到了plusMessage方法,本来直接使用的message监听发现怎么都不生效
很多人的使用习惯,既然我监听了消息,那么在我不需要的时候是需要把这个监听移除掉的,否则不停的监听影响APP性能,于是写了下面的移除方法:
plus.globalEvent.removeEventListener('plusMessage',messagEvent)
但是出乎意料,移除后整个APP的所有事件都失效!点击哪里都没有反应,切记这个方法是不可以移除的!
可以看到plus.globalEvent监听的是全局的plusMessage事件,移除后影响到了全局的事件,导致APP无响应。
大家会考虑到这样不能移除的话,不是一个好的监听消息方案,频繁监听消息各种类型的消息都会监听到,严重影响APP性能。
那么接下来我们考虑更换页面通信的方案。
第二种 消息传输方式 Webview url拦截
plus.globalEvent监听uni.postMessage推送的消息会出现重复推送等问题,建议改为Webview url拦截的方式获取html文件数据。
// html中跳转自定义url,会被拦截,不会进行跳转
let str = encodeURIComponent(JSON.stringify(obj))
location.href = `push://?${str}`
// 接收webview发送的通知消息
mapwv.overrideUrlLoading({ mode: 'reject'},(e) => {
let obj = JSON.parse(decodeURIComponent(e.url.split('?')[1]))
removeEvent()
})
参考文章:
https://www.html5plus.org/doc/zh_cn/webview.html
url拦截更实时,准确率更高,不会重复接收消息,只有App支持,H5 文档参考:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.overrideUrlLoading
https://ask.dcloud.net.cn/article/35083