如何在uniapp中优雅地使用WebView

  • 如何在uniapp中优雅地使用WebView已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

 


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

如何在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动态传值,可以使用这种方式。

注意:

  1. 在nvue中,只有通过ref暴露webview节点才能拿到webview本身

  2. 注意evalJs的拼写方式,官方文档是evalJS,但通过ref获取时,S应该为小写

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 如何在uniapp中优雅地使用WebView