uniapp vue 和 html 页面通信

uniapp vue 和 html 页面通信https://uniapp.dcloud.io/component/web-view这是官网解释，想必大家也遇到了吧. uniapp web-view 通过uni.postMessage({data: {...

nicepainkiller

8432人浏览 · 2020-01-13 16:38:18

nicepainkiller · 2020-01-13 16:38:18 发布

uniapp vue 和 html 页面通信

https://uniapp.dcloud.io/component/web-view

这是官网解释，想必大家也遇到了吧. uniapp web-view 通过

uni.postMessage({
     data: {
         action: 'message'
     }
});

传递的参数只能在特定情况下才能触发，比如后退的时候，这不是坑爹嘛！我要她何用！

但是有意思的是：官方的 deme 可以做到实时的调用，并没有上面提到的只有特定情形才会触发

所以我猜想一定有办法实时调用的。

后来分析 demo 源码，发现 nvue 可以做到实时调用，但是只能 app 使用，不能网页调用。由于目前我的项目是app的，然后就ok了

后来发现尽然有插件 nvue向网页传参，网页向nvue传参

好了直接上源码：参考了上面的插件

.nvue

<template>
	<view class="web-view">
		<web-view class="web-view" :src="url" ref="webview" @pagestart="onPageStart" @onPostMessage="handlePostMessage"
		 @pagefinish="onPageFinish" @error="onError" @receivedtitle="onReceivedTitle">
		</web-view>
	</view>
</template>

<script>
	import config from '@/utils/config.js'
	var currentWebview;
	export default {
		data() {
			return {
				params: {},
				//url: config.serverConfig.hostApi+'/novemAppMobile/newUserGuideBpCustMember.do?userId=',
				url: 'http://192.168.0.26:17344',
				webviewStyles: {
					progress: '#FFFFFF'
				},
				pagestart: '',
				pagefinish: '',
				error: '',
				canGoBack: false,
				canGoForward: false,
				PageStart: false, // 记录网页请求的加载状态，true 加载成功 false 加载失败
			};
		},
		onLoad() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			currentWebview = page.$getAppWebview();
			console.log("===>", currentWebview);
		},
		methods: {
			handlePostMessage: function(data) {
				// 获取网页的参数
				console.log("得到参数", data.detail);
			},


			onPageStart: function(e) {
				console.log(e);
				// 监听页面加载成功
				this.PageStart = true;
				// 其实页面也可以使用这个方法传参
				//this.$refs.webview.evalJs("setLoginToken('我就是个参数啊')");

			},
			onPageFinish: function(e) {
				this.pagefinish = e.url;
				this.canGoBack = e.canGoBack;
				this.canGoForward = e.canGoForward;
				var tn = currentWebview.getStyle().titleNView;
				tn.titleText = '新手指南'
				// tn.titleText = e.detail.title || '第三方网站';
				// currentWebview.setStyle({
				// 	titleNView: tn
				// });

			},
			onError: function(e) {
				// 监听页面加载错误
				this.error = url;
			},
			onReceivedTitle: function(e) {
				if (e.title) {
					var tn = currentWebview.getStyle().titleNView;
					tn.titleText = e.detail.title || '第三方网站';
					currentWebview.setStyle({
						titleNView: tn
					});
				}
			},
			reloadWebviewUrl() {
				// 刷新网页
				var webview = weex.requireModule('webview');
				webview.reload(this.$refs.webview);
			}
		}
	};
</script>

<style>
	.web-view {
		flex: 1;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.sendMessage {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
	}
</style>

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网络网页</title>
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.btn-yellow {
				background-color: #f0ad4e;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}


		</style>
	</head>
	<body>

		<div class="post-message-section">
			<p id="messageText"></p>

			<div class="btn-list">
				<button class="btn btn-red" type="button" id="postMessage">新手专区跳转购买界面</button>
			</div>
			
		</div>
 
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript">
			window.jsfunction = function(data){
				var canshutype =  typeof data ;
				var mes = typeof data == "object" ?  JSON.stringify(data) : data; 
				
				alert("收到参数"+canshutype);


				document.getElementById('messageText').innerHTML = "恭喜你，接收到你的传参，你很牛逼！\n，你传的居然是"+canshutype+"参数如下：\n"+mes
				
				console.log('data', data);
				
			}
			document.addEventListener('UniAppJSBridgeReady', function() {

				document.getElementById('postMessage').addEventListener('click', function() {
					uni.navigateTo({
						url: "/pages/product/productInfo/productInfo?index=0"
					});
					
					<!-- uni.postMessage({ -->
						<!-- data: { -->
					 		<!-- user_id: 111, -->
					 		<!-- user_token: 'sa1s6a1s9a81s98q1w6q51s6a81s6q561sa65', -->
					 		<!-- user_info: { -->
					 			<!-- nickname: 'Jalon', -->
					 			<!-- headImg: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/avatar/000/86/77/53_avatar_max.jpg' -->
					 		<!-- } -->
					 	<!-- } -->
					 <!-- }); -->
				});
			});
		</script>
	</body>
</html>

后来发现 vue 也是可以做到时时通信的：链接

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^