uni-app web-view 使用指南：H5 页面嵌入、参数传递与消息交互

uni-app 中 web-view 组件的应用

当需要在 App 内置浏览器中打开 H5 页面时，uni-app 提供了 web-view 组件来实现这一功能。

具体实现时，需新建一个页面，在该页面中引入 web-view 组件，并将目标 H5 网址配置其中。

第一步，在所需页面中引入相关资源。

//如果不暂存在本地，会在浏览器上被转译
uni.setStorageSync('PAYWEBURL', res.data.data.url)//考虑到所传网址需要转译吗（不需要）
// let enUrl = encodeURIComponent(res.data.data.url)//转译
uni.navigateTo({
    //url: '/pages/cashier/payapp'+enUrl//需要在调转页里转译回去
    url: '/pages/cashier/payapp'//如果不需要转译先把网址暂存在本地，在跳转页面里取出，防止浏览器转译
})

第二步，在 uni-app 项目中应用该组件，实现子页面与父页面的数据交互。

<template>
  <view>
     <web-view @message="getMessage" :src="webViewUrl"></web-view>
  </view>
</template>
<script>
	export default {
		data() {
		  return {
            webViewUrl: ''
          }
		},
    onLoad() {
      // this.webViewUrl = decodeURIComponent(options.url)// 传过来的值是转译过的，需要转回原值
      this.webViewUrl = uni.getStorageSync('PAYWEBURL')//如果是不需要转译的，直接获取
      console.log(this.webViewUrl)
    },
		methods: {
			getMessage(e) {
			  console.log('webView传递过来的消息',e)
			}
		}
	}
</script>

第三步，处理 H5 页面端的逻辑。

需要引入官方提供的 JS 文件：

<!-- 用于支付结束后跳转app -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-view</title>
//重点，一定要引入
  <script src="./js/uni.webview.1.5.4.js"></script>
</head>
<body>
</body>
<script>
	document.addEventListener('UniAppJSBridgeReady', function() {
	  uni.getEnv(function(res) {
	    console.log('当前环境：' + JSON.stringify(res));//判断当前是在网页还是app还是小程序
	  })
    //在网页做什么，（跳转到指定页）
    uni.redirectTo({
      url:'/pagesOrder/order/list'
    })
	})
</script>
</html>

uni-app 与 web-view 之间的双向数据通信机制

首先介绍 uni-app 向 H5 页面发送数据的方法。

实现方式较为简单，在 web-view 中只需通过 URL 参数即可向 H5 页面传递数据。例如在 uni-app 中：

具体操作如下，在 web-view 中通过 URL 向 H5 传参，示例代码如下：

具体操作如下，在 web-view 中通过 URL 向 H5 传参，示例代码如下：

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

<script>
export default {
	data() {
		return {
			url:'/hybrid/html/local.html?data='
		};
	},
	onLoad(data) {
　　　　　　　　　　//这里对要传入到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 页面接收来自 uni-app 的值。

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

其次介绍 H5 页面向 uni-app 发送数据的方法。

在 web-view 组件中配置监听事件以接收消息。

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

最后，uni-app 端接收来自 H5 页面发送的值。

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

到此这篇关于uni-app web-view的使用的文章就介绍到这了,更多相关uni-app web-view的使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

uni-app 中 web-view 组件集成与双向通信详解