uniapp中与webview相互传值调用函数笔记

uniapp中与webview相互传值调用函数笔记

开发app过程中,我们可以使用uniapp的webview来调用本地或远程网页来扩展功能,那么就离不开uniapp与webview的数据互传及方法相互调用。

800_auto

一、uniapp向webview传值

2主要通过更改webview的url后面的hash来传值,h5页面通过监听hash变动来获取uniapp的传值

例如,项目根目录下新建一个hybird,里面存放我们的h5页面代码。

800_auto

   window.addEventListener('hashchange',()=>{
		        const value = location.hash
				alert(value);
		    })

里面有一段js就是监听hash变动

uniapp中通过data中的url改变来传值

<template>
	<view>
		<web-view :src="url" ></web-view>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				url:"/hybrid/html/local.html"
			
			}
		},
method:(){
    changeit(){
   let info = {name:'hello'}
				this.url = '/hybrid/html/local.html' + '#' + JSON.stringify(info)
}
}

二、webview中h5向uniapp传值

<template>
	<view>
		<web-view :src="url" @message="message" ></web-view>
	</view>
	
	
</template>
methods: {
		

			 message(info){
			       console.log(info);
				
			    }
				
		}

h5页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="go()">
      点击我传值给uniapp
    </button>
</body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uni.webview.1.5.2.js"></script>
	<script>
	
	function go(){
	     uni.postMessage({
                 data: {
                     mess: 123
                 }
            });
            
           
	}
		  // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
		  document.addEventListener('UniAppJSBridgeReady', function() {
			uni.webView.getEnv(function(res) {
				console.log('当前环境:' + JSON.stringify(res));
			});
			
		  });
	</script>

</html>
		

webview使用uni.webview.1.5.2.js后可以在h5页面中调用uniapp的api。


{{collectdata}}

网友评论