从webview页面传值到uniapp中

官方文档已经很详细了，首先在webview页面中引入相关依赖：

  1. <!-- uniapp各平台依赖 -->
  2. <script type="text/javascript">
  3.   var userAgent = navigator.userAgent;
  4.   if (userAgent.indexOf('AlipayClient') > -1) {
  5.     // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
  6.     document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  7.   } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
  8.     // QQ 小程序
  9.     document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
  10.   } else if (/miniProgram/i.test(userAgent)) {
  11.     // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
  12.     document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
  13.   } else if (/toutiaomicroapp/i.test(userAgent)) {
  14.     // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
  15.     document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
  16.   } else if (/swan/i.test(userAgent)) {
  17.     // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
  18.     document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
  19.   }
  20. </script>
  21. <!-- uni 的 SDK -->
  22. <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传值：

  1.   document.addEventListener('UniAppJSBridgeReady', function() {
  2.     uni.postMessage({
  3.       data: {
  4.         action: 'message'
  5.       }
  6.     });
  8.     uni.getEnv(function(res) {
  9.         console.log('当前环境：' + JSON.stringify(res));
  10.     });
  11.   });

在uniapp中监听message：

  1. <template lang="pug">
  2.   view
  3.     web-view.webview(:src="url" @message="getMessage")
  4. </template>
  6. <script>
  7.   export default {
  8.     data() {
  9.       return {
  10.         url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
  11.       }
  12.     },
  13.     methods: {
  14.       getMessage(event) {
  15.         let data = event.detail.data
  16.         console.log(data);
  17.       }
  18.     }
  19.   }
  20. </script>
  22. <style lang="stylus" scoped>
  23. $webviewHeight = 420rpx
  24. .webview
  25.   width 750rpx
  26.   height $webviewHeight
  27. </style>

从uniapp中动态传值到webview页面

按照官方文档，从uniapp传值到webview中，只能通过query：

  1. <template lang="pug">
  2.   view
  3.     <!-- #ifdef APP-PLUS -->
  4.     web-view.webview(:src="url")
  5.     <!-- #endif -->
  6. </template>
  8. <script>
  9.   export default {
  10.     data() {
  11.       return {
  12.         url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
  13.       }
  14.     }
  15.   }
  16. </script>
  18. <style lang="stylus" scoped>
  19. $webviewHeight = 420rpx
  20. .webview
  21.   width 750rpx
  22.   height $webviewHeight
  23. </style>

在webview中解析query：

  1. let data = getQuery('data')
  2. console.log(data);  // 获取 uni-app 传来的值
  4. // 取url中的参数值
  5. function getQuery(name) {
  6.     // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
  7.     let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  8.     let r = window.location.search.substr(1).match(reg);
  9.     console.log(r);
  10.     if(r != null) {
  11.         // 对参数值进行解码
  12.         return decodeURIComponent(r[2]);
  13.     }
  14.     return null;
  15. }

但是，我们发现，通过向web-view的src中传值，只能传一次，如果参数改变了，没法动态传到webview。

对于这种需要动态传递参数的需求，我们可以使用动态创建webview达到目的，而不是通过webview组件。

实现如下：

  1. <template lang="pug">
  2.   view
  3. </template>
  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.         url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",
  10.       }
  11.     },
  12.     mounted() {
  13.       // #ifdef APP-PLUS
  14.       var w = plus.webview.create(this.url + '?data=good');
  15.       w.show();
  17.       setTimeout(() => {
  18.         plus.webview.close(w);
  19.         setTimeout(() => {
  20.           w = plus.webview.create(this.url + '?data=123');
  21.           w.show();
  22.         }, 1000)
  23.       }, 1000)
  24.       // #endif
  25.     }
  26.   }
  27. </script>

以上，通过plus.webview.create创建一个webview，然后显示。如果数据更新了，可以先关闭之前的一个webview，然后重新创建一个，再显示。

也可以直接使用open刷新页面：

  1. // #ifdef APP-PLUS
  2. var w = plus.webview.open(this.url + '?data=good');
  3. setTimeout(() => {
  4.     w = plus.webview.open(this.url + '?data=123');
  5. }, 1000)
  6. // #endif

相关API：

  1. // 创建窗口
  2. WebviewObject plus.webview.create( url, id, styles, extras );
  4. // 创建并打开窗口
  5. WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
  7. // 显示窗口
  8. void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
  10. // 隐藏窗口
  11. void plus.webview.hide( id_wvobj, aniHide, duration, extras );
  13. // 关闭窗口
  14. void plus.webview.close( id_wvobj, aniClose, duration, extras );

调用webview中的evalJs方法

动态传值还有一种解决方案，就是通过evalJs方法直接调用webview中方法。

具体实现如下：

在模板中，通过ref暴露web-view元素：

  1. <template lang="pug">
  2.   web-view(:src="url" ref="wb")
  3. </template>

在mounted生命周期的时候获取此元素：

  1. // #ifdef APP-PLUS
  2. this.wb = this.$refs.wb
  3. // #endif

在需要调用webview中方法的时候使用evalJs：

  1. // #ifdef APP-PLUS
  2. this.wb.evalJs(`showAlert(${this.num})`)
  3. // #endif

在webview页面定义对应的方法即可：

  1. function showAlert(num) {
  2.   alert(num)
  3. }

从uniapp动态传值，可以使用这种方式。

注意：

  1. 在nvue中，只有通过ref暴露webview节点才能拿到webview本身
  2. 注意evalJs的拼写方式，官方文档是evalJS，但通过ref获取时，S应该为小写

参考资料