? ? 最近開發了個oa系統，pc端的表單使用form-create開發，form-create?是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。移動端使用uniapp開發，但是因為form-create移動端只支持vant，不支持uniapp。官方的說法是移動端用vant開發后通過webview的方式嵌入到uniapp。
? ? uniapp嵌入開發好的h5頁面沒有問題，但是h5頁面需要保存表單數據和發起工作流，做完這個操作后需要告知uniapp關閉webview頁面，并跳轉uniapp相應頁面。
? （1）uniapp 的webview.vue頁面：
<template><view><web-view :src="fileUrl" @message="handlerMessage"></web-view></view>
</template><script>export default {data() {return {fileUrl: "",}},onLoad(options) {this.fileUrl = decodeURIComponent(options.fileUrl)},methods: {handlerMessage(event) {console.log('Received message:', event.detail.data);}}}
</script><style></style>
webview頁面使用message方法監聽h5發送給uniapp應用的消息。
（2）h5推送消息至uniapp
? ?我的h5頁面基于vue3+vant4+vite開發。
? ?1.首先在public目錄下新建static目錄，接著創建js目錄。下載jweixin-1.4.0.js和uni.webview.1.5.6.js文件到本地，引入到js目錄下。
2.在項目index.html中寫入如下內容：
<!DOCTYPE html>
<html lang="">
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流程表單</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="text/javascript" src="/static/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="/static/js/uni.webview.1.5.6.js"></script>
<script>document.addEventListener('UniAppJSBridgeReady', function () {uni.getEnv(function (res) {if (res.plus) {console.log('當前環境為【5+App】');} else if (res.miniprogram) {console.log('當前環境為【微信小程序】');} else if (res.h5) {console.log('當前環境為h5');}});});
</script>
</body>
</html>
3.在h5頁面，保存按鈕點擊時調用下面的方法。
//提交
async function onSubmit(formData) {let params = {procdefKey: processDefKey,formData: JSON.stringify(formData)};try {loading.value = trueawait apiSaveFormStartProcess(params);uni.postMessage({data: {action: 'startProcessCompleted'}});showSuccessToast('流程發起成功');uni.navigateBack({delta: 1});} finally {loading.value = false}
}uni.postMessage推送消息到uniapp應用。由于message在后退、組件銷毀、分享才會接受到消息。所以在提交完后，調用?uni.navigateBack觸發后退。此時webview的message方法就能接受到消息了。
（3）效果
?
