如何在uniapp中优雅地使用WebView
Posted 林恒smileZAZ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在uniapp中优雅地使用WebView相关的知识，希望对你有一定的参考价值。
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
从webview页面传值到uniapp中
官方文档已经很详细了,这里给大家上我的实战代码，首先在webview页面中引入相关依赖：
<!-- uniapp各平台依赖 -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1)
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent))
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\\/script>');
else if (/miniProgram/i.test(userAgent))
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\\/script>');
else if (/toutiaomicroapp/i.test(userAgent))
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\\/script>');
else if (/swan/i.test(userAgent))
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\\/script>');
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
然后通过uni.postMessage向uniapp传值：
document.addEventListener('UniAppJSBridgeReady', function()
uni.postMessage(
data:
action: 'message'
);
uni.getEnv(function(res)
console.log('当前环境：' + JSON.stringify(res));
);
);
在uniapp中监听message：
<template lang="pug">
view
web-view.webview(:src="url" @message="getMessage")
</template>
<script>
export default
data()
return
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
,
methods:
getMessage(event)
let data = event.detail.data
console.log(data);
</script>
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>
从uniapp中动态传值到webview页面
按照官方文档，从uniapp传值到webview中，只能通过query：
<template lang="pug">
view
<!-- #ifdef APP-PLUS -->
web-view.webview(:src="url")
<!-- #endif -->
</template>
<script>
export default
data()
return
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
</script>
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>
在webview中解析query：
let data = getQuery('data')
console.log(data); // 获取 uni-app 传来的值
// 取url中的参数值
function getQuery(name)
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null)
// 对参数值进行解码
return decodeURIComponent(r[2]);
return null;
但是，我发现，通过向web-view的src中传值，只能传一次，如果参数改变了，没法动态传到webview。
对于这种需要动态传递参数的需求，我们可以使用动态创建webview达到目的，而不是通过webview组件。
实现如下：
<template lang="pug">
view
</template>
<script>
export default
data()
return
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",
,
mounted()
// #ifdef APP-PLUS
var w = plus.webview.create(this.url + '?data=good');
w.show();
setTimeout(() =>
plus.webview.close(w);
setTimeout(() =>
w = plus.webview.create(this.url + '?data=123');
w.show();
, 1000)
, 1000)
// #endif
</script>
以上，通过plus.webview.create创建一个webview，然后显示。如果数据更新了，可以先关闭之前的一个webview，然后重新创建一个，再显示。
也可以直接使用open刷新页面：
// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=good');
setTimeout(() =>
w = plus.webview.open(this.url + '?data=123');
, 1000)
// #endif
相关API：
// 创建窗口
WebviewObject plus.webview.create( url, id, styles, extras );
// 创建并打开窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
// 显示窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
// 隐藏窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
// 关闭窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );
调用webview中的方法
动态传值还有一种解决方案，就是通过evalJs方法直接调用webview中方法。
具体实现如下：
在模板中，通过ref暴露web-view元素：
<template lang="pug">
web-view(:src="url" ref="wb")
</template>
在mounted生命周期的时候获取此元素：
// #ifdef APP-PLUS
this.wb = this.$refs.wb
// #endif
在需要调用webview中方法的时候使用evalJs：
// #ifdef APP-PLUS
this.wb.evalJs(`showAlert($this.num)`)
// #endif
在webview页面定义对应的方法即可：
function showAlert(num)
alert(num)
从uniapp动态传值，可以使用这种方式。
注意：
-
在nvue中，只有通过ref暴露webview节点才能拿到webview本身
-
注意
evalJs的拼写方式，官方文档是evalJS，但通过ref获取时，S应该为小写
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
app中的webview是啥？如何理解？
参考技术A 当你上网阅读东西时，我们一般会选择一款浏览器，比如Chrome、火狐、safari、IE或者Edge。你可能不知道这些浏览器之间有一些竞争，而竞争的主要形式就是WebView。WebView的定义
什么是WebView呢？它是本地应用程序内嵌的一个浏览器！这句话有两处需要搞清楚！
上面是火狐的一个页面，红色区域可以认为是WebView，它拥有渲染引擎，可以通过http/https请求加载内容，加载回来的代码就可以被执行和渲染出来。红色区域以上的部分就是浏览器本地的UI组件。
移动端app中WebView的特点
我们经常把h5页面内嵌入app中，这种就是混合型的app，除了渲染页面本身的功能外，页面中的js还有能力调用app系统接口的，比如某些弹窗、分享等，这些区别对用户来说都是无感知的。
在普通浏览器中是没有这个能力的，至少浏览器没有开放这些api。
WebView中的渲染引擎 WebView带来的好处 总结
可以认为WebView就是浏览器，只是在不同平台长相和能力有所不同！
App中的WebView可以理解为一个浏览器，因为它具有基本的浏览器能力，包括加载网页，js控制等；
首先，看一下安卓端webview的一些介绍。
是一个基于引擎、展现页面的控件。可以显示和渲染Web页面，与JS交互，也可以和原生代码交互。
然后可以参考下各大APP,如淘宝、支付宝、京东、美团等；这里截取几张图示例下。
(截图来自支付宝、淘宝)，上面2个页面都是在app内内嵌了定制的webview组件，用于展示一些额外的信息(非组件化的)，灵活性高；
其次，webview作为app中重要的组成部分，如混合APP, 纯H5 App；
最后，题主若还有疑问，欢迎@我。
WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。
在Android手机中，网页的解析和显示网页的能力是由webkit内核实现的。
（如chrome浏览器使用的是webkit内核，现在，webkit被内置到了android系统中）
webview对网页处理也是交给强大的webkit做的
webview在android SDK（原生）中：
封装为一个叫做WebView组件，通过这个组件可以在app中显示html+css+js，当然也就可以显示一个远程url，比如用它打开百度首页是可以的。
可以理解为：android开发中的一个activity里使用了webview组件，并打开了一个html页面呈现给用户。
其中“activity”是android原生开发时的“一张页面”，app的所谓跳转到不同“页”是在activity中跳来跳去，activity是java的一个类，布局则是使用xml（如果没做过原生android开发就这么理解就行）
webview在mui app框架开发中：
在mui开发中，这些webview就是一张一张的网页。
这些网页是webview对象，其操作方法被封装在html5+的plus.webview对象中
webview本身只是个浏览器效果组件，切换即使网页之间的跳转，理论上不可能像原生的activity中切换一样流畅，本身也不会有什么动画。
还好，mui的开发组，dcloud（数字天堂）和他们的html5+中国产业联盟（社区）实现了webview切换的动画效果，他们把这些webview映射到了真正的java webview，调用的也是原生的activity切换动画，从而使得webview切换也可以像原生app activity一样切换的效果！图一（简约图）原生开发和mui的hybrid模式区别图：（图二）希望帮助到你！[玫瑰]
以上是关于如何在uniapp中优雅地使用WebView的主要内容，如果未能解决你的问题，请参考以下文章