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

从webview页面传值到uniapp中官方文档已经很详细了,这里给大家上我的实战代码，首先在webview页面中引入相关依赖：

  var userAgent = navigator.userAgent;  if (userAgent.indexOf('AlipayClient') > -1) {    // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。    document.writeln('' + '');  } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {    // QQ 小程序    document.write('');  } else if (/miniProgram/i.test(userAgent)) {    // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。    document.write('');  } else if (/toutiaomicroapp/i.test(userAgent)) {    // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。    document.write('');  } else if (/swan/i.test(userAgent)) {    // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。    document.write('');  }

然后通过uni.postMessage向uniapp传值：

  document.addEventListener('UniAppJSBridgeReady', function() {    uni.postMessage({      data: {        action: 'message'      }    });    uni.getEnv(function(res) {        console.log('当前环境：' + JSON.stringify(res));    });  });

在uniapp中监听message：

  view    web-view.webview(:src="url" @message="getMessage")  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);      }    }  }$webviewHeight = 420rpx.webview  width 750rpx  height $webviewHeight

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

  view        web-view.webview(:src="url")      export default {    data() {      return {        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",      }    }  }$webviewHeight = 420rpx.webview  width 750rpx  height $webviewHeight

在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组件。实现如下：

  view  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    }  }

以上，通过plus.webview.create创建一个webview，然后显示。如果数据更新了，可以先关闭之前的一个webview，然后重新创建一个，再显示。也可以直接使用open刷新页面：

// #ifdef APP-PLUSvar 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元素：

  web-view(:src="url" ref="wb")

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

// #ifdef APP-PLUSthis.wb = this.$refs.wb// #endif

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

// #ifdef APP-PLUSthis.wb.evalJs(`showAlert(${this.num})`)// #endif

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

function showAlert(num) {  alert(num)}

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

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

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