From 1f75a7eab869ed5a404b0a54ff0c8640f692a3c8 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Mon, 6 Apr 2026 01:14:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20web=E9=80=9A=E8=AE=AF=E7=9A=84=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages-bridge/SaveImage.vue         | 32 +++++++++++++++++
 src/pages-bridge/UploadImage.vue       | 27 +++++++++++++++
 src/pages.json                         | 17 +++++++++
 src/pages/webview/{h5.js => bridge.js} |  0
 src/pages/webview/index.vue            | 48 +++++++++++++++++---------
 5 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 src/pages-bridge/SaveImage.vue
 create mode 100644 src/pages-bridge/UploadImage.vue
 rename src/pages/webview/{h5.js => bridge.js} (100%)

diff --git a/src/pages-bridge/SaveImage.vue b/src/pages-bridge/SaveImage.vue
new file mode 100644
index 0000000..7e87e8f
--- /dev/null
+++ b/src/pages-bridge/SaveImage.vue
@@ -0,0 +1,32 @@
+<template>
+    
+</template>
+<style scoped>
+
+</style>
+<script setup>
+import { onMounted } from "vue";
+import { saveImageToAlbum } from '@/pages/webview/bridge.js'
+
+onMounted(() => {
+  // 获取页面参数
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options;
+
+  if (options.imageUrl) {
+    const imageUrl = decodeURIComponent(options.imageUrl);
+    saveImage(imageUrl);
+  }
+});
+
+const saveImage = async (imageUrl) => {
+  try {
+    await saveImageToAlbum(imageUrl)
+  } catch (e) {
+  }
+
+  uni.navigateBack()
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages-bridge/UploadImage.vue b/src/pages-bridge/UploadImage.vue
new file mode 100644
index 0000000..ebc2d29
--- /dev/null
+++ b/src/pages-bridge/UploadImage.vue
@@ -0,0 +1,27 @@
+<template>
+    
+</template>
+
+<script setup>
+import { onLoad } from '@dcloudio/uni-app'
+import { chooseAndUploadImage } from '@/pages/webview/bridge.js'
+
+onLoad(() => {
+  handleChoose()
+})
+
+const sendResult = (imageUrl) => {
+  // 触发全局事件
+  uni.$emit('UPLOAD_RESULT', imageUrl)
+}
+const handleChoose = async () => {
+  try {
+    const imageUrl = await chooseAndUploadImage()
+    sendResult(imageUrl)
+  } catch (e) {
+    sendResult('error')
+  }
+
+  uni.navigateBack()
+}
+</script>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 7b2a594..6f74690 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -90,6 +90,23 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages-bridge",
+      "pages": [
+        {
+          "path": "UploadImage",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "SaveImage",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {
diff --git a/src/pages/webview/h5.js b/src/pages/webview/bridge.js
similarity index 100%
rename from src/pages/webview/h5.js
rename to src/pages/webview/bridge.js
diff --git a/src/pages/webview/index.vue b/src/pages/webview/index.vue
index d97aa16..ecbe455 100644
--- a/src/pages/webview/index.vue
+++ b/src/pages/webview/index.vue
@@ -1,15 +1,19 @@
 <template>
   <view>
-    <web-view :src="webviewUrl" @message="handleMessage"></web-view>
+    <web-view id="webview" :src="webviewUrl" @message="handleMessage"></web-view>
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import { navigateToNewPage, saveImageToAlbum, chooseAndUploadImage } from "./h5.js";
+import { ref, onMounted, onUnmounted } from "vue";
+import { navigateToNewPage, saveImageToAlbum, chooseAndUploadImage } from "./bridge.js";
 
 const webviewUrl = ref("");
 
+onUnmounted(() => {
+  uni.$off('UPLOAD_RESULT')
+})
+
 onMounted(() => {
   // 获取页面参数
   const pages = getCurrentPages();
@@ -19,10 +23,31 @@ onMounted(() => {
   // 从页面参数中获取url
   if (options.url) {
     // 对URL进行解码，因为传递时可能被编码了
-    webviewUrl.value = decodeURIComponent(options.url);
+    const decoded = decodeURIComponent(options.url);
+    webviewUrl.value = decoded;
   }
+
+  chooseAndUpload();
 });
 
+const chooseAndUpload = () => {
+  uni.$on('UPLOAD_RESULT', (imageUrl) => {
+    console.log('收到图片地址:', imageUrl)
+
+    const webview = getCurrentPages()
+      .slice(-1)[0]
+      .selectComponent('#webview')
+
+    if (webview) {
+      webview.evalJS(
+        `window.onUploadResult && window.onUploadResult("${imageUrl}")`
+      )
+    } else {
+      console.error('webview 未找到')
+    }
+  })
+}
+
 const handleMessage = (event) => {
   const messageData = event.detail.data[0];
   console.log("Received message from H5:", messageData);
@@ -43,18 +68,9 @@ const handleMessage = (event) => {
       saveImageToAlbum(messageData.imageUrl);
       break;
     case "chooseAndUpload": {
-      // 调用公共上传方法
-      chooseAndUploadImage()
-        .then((imageUrl) => {
-          // 将图片地址通过 hash 传回 H5（不刷新页面）
-          const newUrl = `${originalWebviewUrl.value}#uploadResult=${encodeURIComponent(imageUrl)}`
-          webviewUrl.value = newUrl
-        })
-        .catch(() => {
-          // 上传失败，也可以通知 H5（比如传一个空值或错误标识）
-          const newUrl = `${originalWebviewUrl.value}#uploadResult=error`
-          webviewUrl.value = newUrl
-        })
+      uni.navigateTo({
+        url: '/pages-bridge/UploadImage',
+      })
     }
     break;