uniapp APP端页面触发调用uniapp开发的webview里的方法
原理：
使用 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)
}
}
})原文地址：https://blog.csdn.net/m0_49083276/article/details/145300682
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！