feat(weapp): support snapshot component

NervJS#14560
TheKonka · Sep 18, 2023 · bd81007 · bd81007
1 parent 965c3c5
commit bd81007
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 14 deletions.
diff --git a/packages/taro-components/types/Snapshot.d.ts b/packages/taro-components/types/Snapshot.d.ts
@@ -0,0 +1,15 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface SnapshotProps extends StandardProps {
+  id: string
+}
+
+/**
+ * 截图组件。 支持将其子节点的渲染结果导出成图片，该组件需配合 snapshot 接口使用。 目前仅在 Skyline 渲染引擎 下支持。
+ * @supported weapp (基础库 3.0.1+)
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/snapshot.html
+ */
+declare const Snapshot: ComponentType<SnapshotProps>
+export { Snapshot, SnapshotProps }
diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts
@@ -6,17 +6,12 @@ export * from './props'
 export { Block } from './Block'
 export { CoverImage } from './CoverImage'
 export { CoverView } from './CoverView'
-export { GridView } from './GridView'
-export { ListView } from './ListView'
 export { MatchMedia } from './MatchMedia'
 export { MovableArea } from './MovableArea'
 export { MovableView } from './MovableView'
 export { PageContainer } from './PageContainer'
 export { RootPortal } from './RootPortal'
 export { ScrollView } from './ScrollView'
-export { ShareElement } from './ShareElement'
-export { StickyHeader } from './StickyHeader'
-export { StickySection } from './StickySection'
 export { Swiper } from './Swiper'
 export { SwiperItem } from './SwiperItem'
 export { View } from './View'
@@ -45,6 +40,14 @@ export { Slider } from './Slider'
 export { Switch } from './Switch'
 export { Textarea } from './Textarea'
 
+/** Skyline */
+export { GridView } from './GridView'
+export { ListView } from './ListView'
+export { ShareElement } from './ShareElement'
+export { Snapshot } from './SnapShot'
+export { StickyHeader } from './StickyHeader'
+export { StickySection } from './StickySection'
+
 /** 导航 */
 export { FunctionalPageNavigator } from './FunctionalPageNavigator'
 export { Navigator } from './Navigator'

diff --git a/packages/taro-components/types/index.vue3.d.ts b/packages/taro-components/types/index.vue3.d.ts
@@ -65,6 +65,7 @@ import { ScrollViewProps } from './ScrollView'
 import { ShareElementProps } from './ShareElement'
 import { SliderProps } from './Slider'
 import { SlotProps } from './Slot'
+import { SnapshotProps } from './SnapShot'
 import { StickyHeaderProps } from './StickyHeader'
 import { StickySectionProps } from './StickySection'
 import { SwiperProps } from './Swiper'
@@ -108,17 +109,12 @@ export * from './props'
 export declare const Block: VueComponentType<StandardProps>
 export declare const CoverImage: VueComponentType<CoverImageProps>
 export declare const CoverView: VueComponentType<CoverViewProps>
-export declare const GridView: VueComponentType<GridViewProps>
-export declare const ListView: VueComponentType<ListViewProps>
 export declare const MatchMedia: VueComponentType<MatchMediaProps>
 export declare const MovableArea: VueComponentType<MovableAreaProps>
 export declare const MovableView: VueComponentType<MovableViewProps>
 export declare const PageContainer: VueComponentType<PageContainerProps>
 export declare const RootPortal: VueComponentType<RootPortalProps>
 export declare const ScrollView: VueComponentType<ScrollViewProps>
-export declare const ShareElement: VueComponentType<ShareElementProps>
-export declare const StickyHeader: VueComponentType<StickyHeaderProps>
-export declare const StickySection: VueComponentType<StickySectionProps>
 export declare const Swiper: VueComponentType<SwiperProps>
 export declare const SwiperItem: VueComponentType<SwiperItemProps>
 export declare const View: VueComponentType<ViewProps>
@@ -144,6 +140,13 @@ export declare const RadioGroup: VueComponentType<RadioGroupProps>
 export declare const Slider: VueComponentType<SliderProps>
 export declare const Switch: VueComponentType<SwitchProps>
 export declare const Textarea: VueComponentType<TextareaProps>
+/** Skyline */
+export declare const GridView: VueComponentType<GridViewProps>
+export declare const ListView: VueComponentType<ListViewProps>
+export declare const Snapshot: VueComponentType<SnapshotProps>
+export declare const ShareElement: VueComponentType<ShareElementProps>
+export declare const StickyHeader: VueComponentType<StickyHeaderProps>
+export declare const StickySection: VueComponentType<StickySectionProps>
 /** 导航 */
 export declare const FunctionalPageNavigator: VueComponentType<FunctionalPageNavigatorProps>
 export declare const Navigator: VueComponentType<NavigatorProps>
@@ -206,8 +209,6 @@ declare global {
       'taro-root-portal-core': ElementAttrs<TransformReact2VueType<RootPortalProps>>
       'scroll-view': ElementAttrs<TransformReact2VueType<ScrollViewProps>>
       'taro-scroll-view-core': ElementAttrs<TransformReact2VueType<ScrollViewProps>>
-      'share-element': ElementAttrs<TransformReact2VueType<ShareElementProps>>
-      'taro-share-element-core': ElementAttrs<TransformReact2VueType<ShareElementProps>>
       swiper: ElementAttrs<TransformReact2VueType<SwiperProps>>
       'taro-swiper-core': ElementAttrs<TransformReact2VueType<SwiperProps>>
       'swiper-item': ElementAttrs<TransformReact2VueType<SwiperItemProps>>
@@ -256,6 +257,19 @@ declare global {
       'taro-switch-core': ElementAttrs<TransformReact2VueType<SwitchProps>>
       textarea: ElementAttrs<TransformReact2VueType<TextareaProps>>
       'taro-textarea-core': ElementAttrs<TransformReact2VueType<TextareaProps>>
+      /** Skyline */
+      'grid-view': ElementAttrs<TransformReact2VueType<GridViewProps>>
+      'taro-grid-view-core': ElementAttrs<TransformReact2VueType<GridViewProps>>
+      'list-view': ElementAttrs<TransformReact2VueType<ListViewProps>>
+      'taro-list-view-core': ElementAttrs<TransformReact2VueType<ListViewProps>>
+      'share-element': ElementAttrs<TransformReact2VueType<ShareElementProps>>
+      'taro-share-element-core': ElementAttrs<TransformReact2VueType<ShareElementProps>>
+      'snapshot': ElementAttrs<TransformReact2VueType<SnapshotProps>>
+      'taro-snapshot-core': ElementAttrs<TransformReact2VueType<SnapshotProps>>
+      'sticky-header': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
+      'taro-sticky-header-core': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
+      'sticky-section': ElementAttrs<TransformReact2VueType<StickySectionProps>>
+      'taro-sticky-section-core': ElementAttrs<TransformReact2VueType<StickySectionProps>>
       /** 导航 */
       'functional-page-navigator': ElementAttrs<TransformReact2VueType<FunctionalPageNavigatorProps>>
       'taro-functional-page-navigator-core': ElementAttrs<TransformReact2VueType<FunctionalPageNavigatorProps>>

diff --git a/packages/taro-weapp/src/components-react.ts b/packages/taro-weapp/src/components-react.ts
@@ -20,3 +20,4 @@ export const ListView = 'list-view'
 export const GridView = 'grid-view'
 export const StickyHeader = 'sticky-header'
 export const StickySection = 'sticky-section'
+export const Snapshot = 'snapshot'
diff --git a/packages/taro-weapp/src/components.ts b/packages/taro-weapp/src/components.ts
@@ -379,4 +379,5 @@ export const components = {
     objectFit: "'contain'",
     bindError: _empty
   },
+  Snapshot: {}
 }
diff --git a/packages/taro/types/api/skyline/index.d.ts b/packages/taro/types/api/skyline/index.d.ts
@@ -0,0 +1,59 @@
+import Taro from '../../index'
+
+declare module '../../index' {
+  /**
+   * Snapshot 实例，可通过 SelectorQuery 获取。
+   *
+   * Snapshot 通过 id 跟一个 snapshot 组件绑定，操作对应的 snapshot 组件。
+   * @supported weapp
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/skyline/Snapshot.html
+   */
+  interface Snapshot {
+    /**
+     * 画布宽度
+     */
+    width: number
+    /**
+     * 画布高度
+     */
+    height: number
+    /**
+     * 对 snapshot 组件子树进行截图
+     * @param option
+     * @see https://developers.weixin.qq.com/miniprogram/dev/api/skyline/Snapshot.takeSnapshot.html
+     */
+    takeSnapshot(option: Snapshot.TakeSnapshot.Option): Promise<TaroGeneral.CallbackResult>
+  }
+
+  namespace Snapshot {
+    namespace TakeSnapshot {
+      interface Option {
+        /**
+         * 截图导出类型，'file' 保存到临时文件目录或 'arraybuffer' 返回图片二进制数据，默认值为 'file'
+         */
+        type: string
+        /**
+         * 截图文件格式，'rgba' 或 'png'，默认值为 'png'
+         */
+        format: string
+        /** 接口调用结束的回调函数（调用成功、失败都会执行） */
+        complete?: (res: TaroGeneral.CallbackResult) => void
+        /** 接口调用失败的回调函数 */
+        fail?: (res: TaroGeneral.CallbackResult) => void
+        /** 接口调用成功的回调函数 */
+        success?: (res: SuccessCallbackResult) => void
+      }
+
+      interface SuccessCallbackResult {
+        /**
+         * 截图保存的临时文件路径，当 type 为 file 该字段生效
+         */
+        tempFilePath: string
+        /**
+         * 截图对应的二进制数据，当 type 为 arraybuffer 该字段生效
+         */
+        data: string
+      }
+    }
+  }
+}
diff --git a/packages/taro/types/index.d.ts b/packages/taro/types/index.d.ts
@@ -38,7 +38,7 @@
  * │   │   ├── scan.d.ts                    设备 -> 扫码 API
  * │   │   ├── screen.d.ts                  设备 -> 屏幕 API
  * │   │   ├── vibrate.d.ts                 设备 -> 振动 API
- * │   │   └── wifi.d.ts                    设备 -> Wi-Fi API
+ * │   │   └── wifi.d.ts                     设备 -> Wi-Fi API
  * │   ├── ext
  * │   │   └── index.d.ts                   第三方平台 API
  * │   ├── files
@@ -87,6 +87,8 @@
  * │   │   └── index.d.ts                   路由 API
  * │   ├── share
  * │   │   └── index.d.ts                   转发 API
+ * │   ├── skyline
+ * │   │   └── index.d.ts                   微信 Skyline API
  * │   ├── storage
  * │   │   ├── background-fetch.d.ts        数据缓存 -> 后台获取 API
  * │   │   └── index.d.ts                   数据缓存 API

diff --git a/packages/taro/types/taro.api.d.ts b/packages/taro/types/taro.api.d.ts
@@ -18,7 +18,6 @@
 /// <reference path="api/base/env.d.ts" />
 /// <reference path="api/route/index.d.ts" />
 /// <reference path="api/navigate/index.d.ts" />
-/// <reference path="api/share/index.d.ts" />
 /// <reference path="api/ui/interaction.d.ts" />
 /// <reference path="api/ui/navigation-bar.d.ts" />
 /// <reference path="api/ui/background.d.ts" />
@@ -39,6 +38,8 @@
 /// <reference path="api/network/tcp.d.ts" />
 /// <reference path="api/network/udp.d.ts" />
 /// <reference path="api/payment/index.d.ts" />
+/// <reference path="api/share/index.d.ts" />
+/// <reference path="api/skyline/index.d.ts" />
 /// <reference path="api/storage/index.d.ts" />
 /// <reference path="api/storage/background-fetch.d.ts" />
 /// <reference path="api/storage/cache-manager.d.ts" />