feat: closePreviewImage

packages/uni-api/src/protocols/media/previewImage.ts

@@ -30,3 +30,6 @@ export const PreviewImageProtocol: ApiProtocol<API_TYPE_PREVIEW_IMAGE> = {
     type: [Number, String],
   },
 }
+
+export const API_CLOSE_PREVIEW_IMAGE = 'closePreviewImage'
+export type API_TYPE_CLOSE_PREVIEW_IMAGE = typeof uni.closePreviewImage

packages/uni-app-plus/src/service/api/media/previewImage.ts

@@ -4,6 +4,8 @@ import {
   defineAsyncApi,
   PreviewImageProtocol,
   PreviewImageOptions,
+  API_CLOSE_PREVIEW_IMAGE,
+  API_TYPE_CLOSE_PREVIEW_IMAGE,
 } from '@dcloudio/uni-api'
 
 import { isPlainObject } from '@vue/shared'
@@ -96,3 +98,16 @@ export const previewImage = <API_TYPE_PREVIEW_IMAGE>defineAsyncApi(
   PreviewImageProtocol,
   PreviewImageOptions
 )
+
+export const closePreviewImage = defineAsyncApi<API_TYPE_CLOSE_PREVIEW_IMAGE>(
+  API_CLOSE_PREVIEW_IMAGE,
+  (_, { resolve, reject }) => {
+    try {
+      // @ts-expect-error
+      plus.nativeUI.closePreviewImage()
+      resolve()
+    } catch (error) {
+      reject()
+    }
+  }
+)

packages/uni-h5-vite/lib/api.json

@@ -17,6 +17,7 @@
   "chooseVideo",
   "clearStorage",
   "clearStorageSync",
+  "closePreviewImage",
   "closeSocket",
   "connectSocket",
   "createAnimation",

packages/uni-h5/src/service/api/media/previewImage/index.ts

@@ -6,11 +6,22 @@ import {
   defineAsyncApi,
   PreviewImageProtocol,
   PreviewImageOptions,
+  API_CLOSE_PREVIEW_IMAGE,
+  API_TYPE_CLOSE_PREVIEW_IMAGE,
 } from '@dcloudio/uni-api'
 import { ensureRoot, createRootApp } from '../../ui/popup/utils'
 import ImagePreview, { Props } from './ImagePreview'
 
 let state: Props | null = null
+let imagePreviewInstance: ReturnType<typeof createRootApp> | null
+
+const closePreviewImageView = () => {
+  state = null
+  nextTick(() => {
+    imagePreviewInstance?.unmount()
+    imagePreviewInstance = null
+  })
+}
 
 export const previewImage = <API_TYPE_PREVIEW_IMAGE>defineAsyncApi(
   API_PREVIEW_IMAGE,
@@ -19,13 +30,12 @@ export const previewImage = <API_TYPE_PREVIEW_IMAGE>defineAsyncApi(
       state = reactive(args) as Props
       // 异步执行，避免干扰 getCurrentInstance
       nextTick(() => {
-        const app = createRootApp(ImagePreview, state as Props, () => {
-          state = null
-          nextTick(() => {
-            app.unmount()
-          })
-        })
-        app.mount(ensureRoot('u-a-p'))
+        imagePreviewInstance = createRootApp(
+          ImagePreview,
+          state as Props,
+          closePreviewImageView
+        )
+        imagePreviewInstance.mount(ensureRoot('u-a-p'))
       })
     } else {
       extend(state, args)
@@ -35,3 +45,15 @@ export const previewImage = <API_TYPE_PREVIEW_IMAGE>defineAsyncApi(
   PreviewImageProtocol,
   PreviewImageOptions
 )
+
+export const closePreviewImage = defineAsyncApi<API_TYPE_CLOSE_PREVIEW_IMAGE>(
+  API_CLOSE_PREVIEW_IMAGE,
+  (_, { resolve, reject }) => {
+    if (imagePreviewInstance) {
+      closePreviewImageView()
+      resolve()
+    } else {
+      reject()
+    }
+  }
+)