feat: 处理加载H5页面的 方法逻辑

src/pages/webview/index.vue

@@ -1,11 +1,12 @@
 <template>
   <view>
-    <web-view :src="webviewUrl" @message="handleH5Message"></web-view>
+    <web-view :src="webviewUrl" @message="handleMessage"></web-view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
+import { navigateToNewPage, saveImageToAlbum, chooseAndUploadImage } from "./h5.js";
 
 const webviewUrl = ref("");
 
@@ -22,7 +23,7 @@ onMounted(() => {
   }
 });
 
-const handleH5Message = (event) => {
+const handleMessage = (event) => {
   const messageData = event.detail.data[0];
   console.log("Received message from H5:", messageData);
   // 根据需要处理H5传递过来的消息
@@ -33,12 +34,33 @@ const handleH5Message = (event) => {
       uni.navigateBack();
       break;
     case "navigateTo":
+      navigateToNewPage(messageData.url);
+      break;
+    case "showToast":
+      uni.showToast({ title: messageData.title, icon: messageData.icon || "none" }); 
+      break;
+    case "saveImage":
+      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
+        })
+    }
+    break; 
 
-      break
     default:
       console.log("Unknown action:", action);
   }
-
 };
 
 </script>