Bootstrap

uniapp APP端页面触发调用webview(页面为uniapp开发的H5)里的方法

原理:

使用 getCurrentInstance() 获取当前组件的 Vue 实例,通过 instance.proxy.$scope.$getAppWebview() 获取 Uniapp 的原生 WebView 对象。 使用 WebView 提供的 evalJS 方法,执行嵌入 H5 页面内的 JavaScript 代码

<template>
	<view class="main">
		<view v-if="url" class="" style="width: 100%;height: 50vh;">
			<web-view @message="onMessageFromH5" id="webView" ref="webView" @error="onError" :src="url"></web-view>
		</view>
	</view>
</template>
function getData() {
		url.value = "http://192.168.0.22:5174/#/pages/orderDatelis/orderDatelis"
		orderDetails({
			id: orderId.value
		}).then(res => {
			const {
				end_latitude,
				end_longitude,
				id,
				start_latitude,
				start_longitude
			} = res.data
			send(res.data)
		})
	}

	function send(data) {
		const json = JSON.stringify(data)
		if (instance) {
			const currentWebview = instance.proxy.$scope?.$getAppWebview();
			const wv = currentWebview.children()[0];
			wv.evalJS(`msgFromUniapp(${json})`);
			console.warn("发送");
		} else {
			console.warn('getCurrentInstance() returned null');
		}
	}

代码大意:调完接口后将接口返回参数注入webview

uniapp H5 webview部分:

onMounted(() => {
		window.msgFromUniapp = (res) => {
			send(res)
			try {
				data.value = res
				initMap()
			} catch (e) {
				uni.showToast({
					title: e.message
				})
				send(e.message)
			}

		}
	})

;