feat: web通讯的处理

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>

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>

src/pages.json

@@ -90,6 +90,23 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages-bridge",
+      "pages": [
+        {
+          "path": "UploadImage",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "SaveImage",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

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,17 +68,8 @@ 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;