Html5调用Vue ​

基础用法 ​

一、html js 中调用window.Js2Vue.js2Vue(字符串参数) ​

点击查看源码
html
<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<title>Vue和Html5通信</title>
</head>
<body>

<script lang='js'>
	window.Js2Vue.js2Vue('Hello Vue~');

	function sayHello(value) {
		return 'Hello Js~' + value;
	}
</script>

<p>Vue和Html5通信</p>

</body>
</html>

二、<qt-web-view>组件监听onJs2Vue事件，获取html传递的参数。 ​

点击查看源码
vue
<template>
	<div class="es-sdk-root-css">
		<s-title-view
			class="es-sdk-content-title-css"
			:text="this.$options.name"
		/>
		<div class="es-sdk-content-divider-css" />
		<div class="es-sdk-content-row-css">
			<qt-web-view
				@onPageFinished="onPageFinished"
				@onJs2Vue="onJs2Vue"
				ref="webview"
				class="es-sdk-web-view-css"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIWebView} from '@quicktvui/quicktvui3';
import {useESToast} from '@extscreen/es3-core';

export default defineComponent({
	name: 'Js2Vue',
	setup() {
		const webview = ref<QTIWebView>();
		const toast = useESToast();

		function onPageFinished(url) {}

		function onJs2Vue(value) {
			toast.showToast('来自js的消息：' + value);
		}

		function onESCreate(params) {
			webview.value?.loadUrl('http://192.168.80.32');
		}

		return {
			webview,
			onESCreate,
			onPageFinished,
			onJs2Vue,
		};
	},
});
</script>

<style>
.es-sdk-web-view-css {
	width: 1920px;
	height: 1080px;
}
</style>