如何通过uniapp与webview实现复杂长尾词的跨页面数据交互？

本文共计424个文字，预计阅读时间需要2分钟。

使用uni-app将数据发送到H5的简单方法如下：

在uni-app中，只需通过URL传递参数即可将数据发送到H5页面。具体步骤如下：

1. 在uni-app的模板中，使用``组件来加载H5页面。

2.在``组件的`src`属性中设置H5页面的URL。

3.使用`@message`事件监听从H5页面接收到的消息。

例如，在uni-app的模板中可以这样写：

这样，当H5页面通过URL传递参数时，uni-app就可以通过监听`@message`事件来接收这些参数。

1.uni-app 如何发送数据到 H5？ 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：

<template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view> </view> </template> <script> export default { data() { return { url:'/hybrid/html/local.html?data=' }; }, onLoad(data) {<br>　　　　　　　　　　//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码 this.url+=encodeURIComponent(data.data) }, mounted() {}, methods: { message(event){ console.log(event.detail.data); } } }; </script> <style scoped="scoped" lang="scss"> @import './advertisement.scss'; </style>

那么在 H5 中是如何接收值得呢？

console.log(getQuery('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; }

2.webview向uniapp传值

<script> document.addEventListener('UniAppJSBridgeReady', function() { //向uniapp传值 uni.postMessage({ data: { action: 'message' } }); uni.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); }); </script>

uniapp接受

//message接受方法 <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view> </view> </template>

到此这篇关于uniapp与webview之间的相互传值的实现的文章就介绍到这了,更多相关uniapp与webview相互传值内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！