@mpxjs/webpack-plugin 2.10.18 → 2.10.19

package/lib/platform/template/wx/component-config/camera.js

@@ -18,6 +18,18 @@ module.exports = function ({ print }) {
 
   return {
     test: TAG_NAME,
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
     props: [
       {
         test: 'mode',

package/lib/platform/template/wx/component-config/unsupported.js

@@ -13,7 +13,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/runtime/components/react/dist/mpx-camera.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+interface CameraProps {
+    mode?: 'normal' | 'scanCode';
+    resolution?: 'low' | 'medium' | 'high';
+    'device-position'?: 'front' | 'back';
+    flash?: 'auto' | 'on' | 'off';
+    'frame-size'?: 'small' | 'medium' | 'large';
+    style?: Record<string, any>;
+    bindstop?: () => void;
+    binderror?: (error: {
+        message: string;
+    }) => void;
+    bindinitdone?: (result: {
+        type: string;
+        data: string;
+    }) => void;
+    bindscancode?: (result: {
+        type: string;
+        data: string;
+    }) => void;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+}
+type HandlerRef<T, P> = {
+    current: T | null;
+};
+declare const _camera: import("react").ForwardRefExoticComponent<CameraProps & import("react").RefAttributes<HandlerRef<any, CameraProps>>>;
+export default _camera;

package/lib/runtime/components/react/dist/mpx-camera.jsx

@@ -0,0 +1,270 @@
+import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect, useMemo } from 'react';
+import { getCurrentPage, useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { Camera, useCameraDevice, useCodeScanner, useCameraFormat } from 'react-native-vision-camera';
+import { noop, warn, hasOwn } from '@mpxjs/utils';
+import { RouteContext } from './context';
+import { watch } from '@mpxjs/core';
+const qualityValue = {
+    high: 90,
+    normal: 75,
+    low: 50,
+    original: 100
+};
+let RecordRes = null;
+const _camera = forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const cameraRef = useRef(null);
+    const { mode = 'normal', resolution = 'medium', 'device-position': devicePosition = 'back', flash = 'auto', 'frame-size': frameSize = 'medium', bindinitdone, bindstop, bindscancode, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-var': enableVar, 'external-var-context': externalVarContext, style = {} } = props;
+    const styleObj = extendObject({}, style);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef });
+    const isPhoto = useRef(false);
+    isPhoto.current = mode === 'normal';
+    const device = useCameraDevice(devicePosition || 'back');
+    const { navigation, pageId } = useContext(RouteContext) || {};
+    const [zoomValue, setZoomValue] = useState(1);
+    const [isActive, setIsActive] = useState(true);
+    const [hasPermission, setHasPermission] = useState(null);
+    const page = getCurrentPage(pageId);
+    // 先定义常量，避免在条件判断后使用
+    const maxZoom = device?.maxZoom || 1;
+    const RESOLUTION_MAPPING = {
+        low: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        high: 'max'
+    };
+    const FRAME_SIZE_MAPPING = {
+        small: { width: 1280, height: 720 },
+        medium: { width: 1920, height: 1080 },
+        large: 'max'
+    };
+    const format = useCameraFormat(device, [
+        {
+            photoResolution: RESOLUTION_MAPPING[resolution],
+            videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+        }
+    ]);
+    const isScancode = useCallback((fail, complete) => {
+        if (!isPhoto.current) {
+            const result = {
+                errMsg: 'Not allow to invoke takePhoto in \'scanCode\' mode.'
+            };
+            fail(result);
+            complete(result);
+            return true;
+        }
+        return false;
+    }, []);
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr'],
+        onCodeScanned: (codes) => {
+            codes.forEach(code => {
+                const type = code.type === 'qr' ? 'QR_CODE' : code.type?.toUpperCase();
+                const frame = code.frame || {};
+                bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+                    detail: {
+                        result: code.value,
+                        type,
+                        scanArea: [parseInt(frame.x) || 0, parseInt(frame.y) || 0, parseInt(frame.width) || 0, parseInt(frame.height) || 0]
+                    }
+                }));
+            });
+        }
+    });
+    const onInitialized = useCallback(() => {
+        bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+            detail: {
+                maxZoom
+            }
+        }));
+    }, [bindinitdone, maxZoom]);
+    const onStopped = useCallback(() => {
+        bindstop && bindstop();
+    }, [bindstop]);
+    const camera = useMemo(() => ({
+        setZoom: (zoom) => {
+            setZoomValue(zoom);
+        },
+        takePhoto: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            if (isScancode(fail, complete))
+                return;
+            cameraRef.current?.takePhoto?.({
+                quality: qualityValue[options.quality || 'normal']
+            }).then((res) => {
+                const result = {
+                    errMsg: 'takePhoto:ok',
+                    tempImagePath: res.path
+                };
+                success(result);
+                complete(result);
+            }).catch(() => {
+                const result = {
+                    errMsg: 'takePhoto:fail'
+                };
+                fail(result);
+                complete(result);
+            });
+        },
+        startRecord: (options = {}) => {
+            let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options;
+            timeout = timeout > 300 ? 300 : timeout;
+            let recordTimer = null;
+            if (isScancode(fail, complete))
+                return;
+            try {
+                const result = {
+                    errMsg: 'startRecord:ok'
+                };
+                success(result);
+                complete(result);
+                cameraRef.current?.startRecording?.({
+                    onRecordingError: (error) => {
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                        const errorResult = {
+                            errMsg: 'startRecord:fail during recording',
+                            error: error
+                        };
+                        timeoutCallback(errorResult);
+                    },
+                    onRecordingFinished: (video) => {
+                        RecordRes = video;
+                        if (recordTimer)
+                            clearTimeout(recordTimer);
+                    }
+                });
+                recordTimer = setTimeout(() => {
+                    cameraRef.current?.stopRecording().catch(() => {
+                        // 忽略停止录制时的错误
+                    });
+                }, timeout * 1000);
+            }
+            catch (error) {
+                if (recordTimer)
+                    clearTimeout(recordTimer);
+                const result = {
+                    errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        },
+        stopRecord: (options = {}) => {
+            const { success = noop, fail = noop, complete = noop } = options;
+            if (isScancode(fail, complete))
+                return;
+            try {
+                cameraRef.current?.stopRecording().then(() => {
+                    setTimeout(() => {
+                        if (RecordRes) {
+                            const result = {
+                                errMsg: 'stopRecord:ok',
+                                tempVideoPath: RecordRes?.path,
+                                duration: RecordRes.duration * 1000 // 转成ms
+                            };
+                            RecordRes = null;
+                            success(result);
+                            complete(result);
+                        }
+                    }, 200); // 延时200ms，确保录制结果已准备好
+                }).catch((e) => {
+                    const result = {
+                        errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
+                    };
+                    fail(result);
+                    complete(result);
+                });
+            }
+            catch (error) {
+                const result = {
+                    errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
+                };
+                fail(result);
+                complete(result);
+            }
+        }
+    }), []);
+    useEffect(() => {
+        let unWatch;
+        if (pageId && hasOwn(global.__mpxPageStatusMap, String(pageId))) {
+            unWatch = watch(() => global.__mpxPageStatusMap[pageId], (newVal) => {
+                if (newVal === 'show') {
+                    if (page.id === pageId) {
+                        setIsActive(true);
+                    }
+                }
+                if (newVal === 'hide') {
+                    setIsActive(false);
+                }
+            }, { sync: true });
+        }
+        const checkCameraPermission = async () => {
+            try {
+                const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission;
+                if (typeof cameraPermission === 'function') {
+                    const permissionResult = await cameraPermission();
+                    setHasPermission(permissionResult === true);
+                }
+                else {
+                    setHasPermission(true);
+                }
+            }
+            catch (error) {
+                setHasPermission(false);
+            }
+        };
+        checkCameraPermission();
+        return () => {
+            if (navigation?.camera === camera) {
+                delete navigation.camera;
+            }
+            unWatch && unWatch();
+        };
+    }, []);
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: cameraRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        isActive,
+        photo: true,
+        video: true,
+        onInitialized,
+        onStopped,
+        device,
+        format,
+        codeScanner: !isPhoto.current ? codeScanner : undefined,
+        zoom: zoomValue,
+        torch: flash
+    }), [
+        'mode',
+        'resolution',
+        'frame-size',
+        'bindinitdone',
+        'bindstop',
+        'flash',
+        'bindscancode',
+        'binderror'
+    ], {
+        layoutRef
+    });
+    if (navigation && navigation.camera && navigation.camera !== camera) {
+        warn('<camera>: 一个页面只能插入一个');
+        return null;
+    }
+    else if (navigation) {
+        navigation.camera = camera;
+    }
+    if (!hasPermission || !device) {
+        return null;
+    }
+    return createElement(Camera, innerProps);
+});
+_camera.displayName = 'MpxCamera';
+export default _camera;

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -160,19 +160,96 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         }
     }, [refresherTriggered]);
-    function scrollTo({ top = 0, left = 0, animated = false }) {
-        scrollToOffset(left, top, animated);
+    function scrollTo({ top = 0, left = 0, animated = false, duration }) {
+        // 如果指定了 duration 且需要动画，使用自定义动画
+        if (animated && duration && duration > 0) {
+            // 获取当前滚动位置
+            const currentY = scrollOptions.current.scrollTop || 0;
+            const currentX = scrollOptions.current.scrollLeft || 0;
+            const startTime = Date.now();
+            const deltaY = top - currentY;
+            const deltaX = left - currentX;
+            // 缓动函数：easeInOutCubic
+            const easing = (t) => {
+                return t < 0.5
+                    ? 4 * t * t * t
+                    : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            };
+            // 使用 requestAnimationFrame 实现平滑动画
+            const animate = () => {
+                const elapsed = Date.now() - startTime;
+                const progress = Math.min(elapsed / duration, 1); // 0 到 1
+                const easeProgress = easing(progress);
+                const nextY = currentY + deltaY * easeProgress;
+                const nextX = currentX + deltaX * easeProgress;
+                if (scrollViewRef.current) {
+                    scrollViewRef.current.scrollTo({ y: nextY, x: nextX, animated: false });
+                }
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                }
+                else {
+                    // 确保最终位置准确
+                    if (scrollViewRef.current) {
+                        scrollViewRef.current.scrollTo({ y: top, x: left, animated: false });
+                    }
+                }
+            };
+            requestAnimationFrame(animate);
+        }
+        else {
+            // 使用原生的 scrollTo
+            scrollToOffset(left, top, animated);
+        }
     }
-    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
-        const refs = __selectRef(`#${selector}`, 'node');
-        if (!refs)
-            return;
-        const { nodeRef } = refs.getNodeInstance();
-        nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            const adjustedLeft = scrollX ? left + offset : left;
-            const adjustedTop = scrollY ? top + offset : top;
-            scrollToOffset(adjustedLeft, adjustedTop, animated);
-        });
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true, duration = undefined } = {}) {
+        try {
+            const currentSelectRef = propsRef.current.__selectRef;
+            if (!currentSelectRef) {
+                const errMsg = '__selectRef is not available. Please ensure the scroll-view component is properly initialized.';
+                warn(errMsg);
+                return;
+            }
+            const targetScrollView = scrollViewRef.current;
+            if (!targetScrollView) {
+                const errMsg = 'scrollViewRef is not ready';
+                warn(errMsg);
+                return;
+            }
+            // scroll-into-view prop 按微信规范直传裸 id（如 "section-1"），而 __refs 注册时 key 带 # 或 . 前缀，需补齐才能命中；
+            // pageScrollTo 调用方已自带前缀（如 "#section-1"）
+            const normalizedSelector = selector.startsWith('#') || selector.startsWith('.') ? selector : `#${selector}`;
+            // 调用 __selectRef 查找元素
+            const refs = currentSelectRef(normalizedSelector, 'node');
+            if (!refs) {
+                const errMsg = `Element not found for selector: ${normalizedSelector}`;
+                warn(errMsg);
+                return;
+            }
+            const { nodeRef } = refs.getNodeInstance();
+            if (!nodeRef?.current) {
+                const errMsg = `Node ref not available for selector: ${normalizedSelector}`;
+                warn(errMsg);
+                return;
+            }
+            nodeRef.current.measureLayout(targetScrollView, (left, top) => {
+                const adjustedLeft = scrollX ? left + offset : left;
+                const adjustedTop = scrollY ? top + offset : top;
+                // 使用 scrollTo 方法，支持 duration 参数
+                if (duration !== undefined) {
+                    scrollTo({ left: adjustedLeft, top: adjustedTop, animated, duration });
+                }
+                else {
+                    scrollToOffset(adjustedLeft, adjustedTop, animated);
+                }
+            }, (error) => {
+                warn(`Failed to measure layout for selector ${normalizedSelector}: ${error}`);
+            });
+        }
+        catch (error) {
+            const errMsg = `handleScrollIntoView error for selector ${selector}: ${error?.message || error}`;
+            warn(errMsg);
+        }
     }
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
@@ -457,9 +534,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     // 处理下拉刷新的手势 - 使用 useMemo 避免每次渲染都创建
     const panGesture = useMemo(() => {
-        if (!hasRefresher)
-            return Gesture.Pan(); // 返回空手势
         return Gesture.Pan()
+            .activeOffsetY([-5, 5])
+            .failOffsetX([-5, 5])
             .onUpdate((event) => {
             'worklet';
             if (enhanced && !!bounces) {
@@ -519,7 +596,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         })
             .simultaneousWithExternalGesture(scrollViewRef);
-    }, [hasRefresher, enhanced, bounces, refreshing, refresherThreshold]);
+    }, [enhanced, bounces, refreshing, refresherThreshold]);
     const scrollAdditionalProps = extendObject({
         style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
             ? {}

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -184,7 +184,7 @@ const _WebView = forwardRef((props, ref) => {
                 }
                 break;
             case 'postMessage':
-                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                bindmessage && bindmessage(getCustomEvent('message', {}, {
                     detail: {
                         data: params[0]?.data
                     }

package/lib/runtime/components/react/mpx-camera.tsx

@@ -0,0 +1,358 @@
+import { createElement, forwardRef, useRef, useCallback, useContext, useState, useEffect, useMemo } from 'react'
+import { getCurrentPage, useTransformStyle, useLayout, extendObject } from './utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import { Camera, useCameraDevice, useCodeScanner, useCameraFormat } from 'react-native-vision-camera'
+import { noop, warn, hasOwn } from '@mpxjs/utils'
+import { RouteContext } from './context'
+import { watch, WatchOptions } from '@mpxjs/core'
+
+const qualityValue = {
+  high: 90,
+  normal: 75,
+  low: 50,
+  original: 100
+}
+
+interface CameraProps {
+  mode?: 'normal' | 'scanCode'
+  resolution?: 'low' | 'medium' | 'high'
+  'device-position'?: 'front' | 'back'
+  flash?: 'auto' | 'on' | 'off'
+  'frame-size'?: 'small' | 'medium' | 'large'
+  style?: Record<string, any>
+  bindstop?: () => void
+  binderror?: (error: { message: string }) => void
+  bindinitdone?: (result: { type: string, data: string }) => void
+  bindscancode?: (result: { type: string, data: string }) => void
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'enable-var'?: boolean
+  'external-var-context'?: any
+}
+
+interface TakePhotoOptions {
+  quality?: 'high' | 'normal' | 'low' | 'original'
+  success?: (result: { errMsg: string, tempImagePath: string }) => void
+  fail?: (result: { errMsg: string }) => void
+  complete?: (result: { errMsg: string, tempImagePath?: string }) => void
+}
+
+interface RecordOptions {
+  timeout?: number
+  success?: (result: { errMsg: string }) => void
+  fail?: (result: { errMsg: string, error?: any }) => void
+  complete?: (result: { errMsg: string }) => void
+  timeoutCallback?: (result: { errMsg: string, error?: any }) => void
+}
+
+interface StopRecordOptions {
+  success?: (result: { errMsg: string, tempVideoPath: string, duration: number }) => void
+  fail?: (result: { errMsg: string }) => void
+  complete?: (result: { errMsg: string, tempVideoPath?: string, duration?: number }) => void
+}
+
+interface CameraRef {
+  setZoom: (zoom: number) => void
+  takePhoto: (options?: TakePhotoOptions) => void
+  startRecord: (options?: RecordOptions) => void
+  stopRecord: (options?: StopRecordOptions) => void
+}
+
+type HandlerRef<T, P> = {
+  current: T | null
+}
+
+let RecordRes: any = null
+
+const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: CameraProps, ref): JSX.Element | null => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const cameraRef = useRef<any>(null)
+  const {
+    mode = 'normal',
+    resolution = 'medium',
+    'device-position': devicePosition = 'back',
+    flash = 'auto',
+    'frame-size': frameSize = 'medium',
+    bindinitdone,
+    bindstop,
+    bindscancode,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    style = {}
+  } = props
+  const styleObj = extendObject(
+    {},
+    style
+  )
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: cameraRef })
+  const isPhoto = useRef<boolean>(false)
+  isPhoto.current = mode === 'normal'
+  const device = useCameraDevice(devicePosition || 'back')
+  const { navigation, pageId } = useContext(RouteContext) || {}
+  const [zoomValue, setZoomValue] = useState<number>(1)
+  const [isActive, setIsActive] = useState<boolean>(true)
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
+  const page = getCurrentPage(pageId)
+
+  // 先定义常量，避免在条件判断后使用
+  const maxZoom = device?.maxZoom || 1
+  const RESOLUTION_MAPPING: Record<string, { width: number, height: number } | 'max'> = {
+    low: { width: 1280, height: 720 },
+    medium: { width: 1920, height: 1080 },
+    high: 'max'
+  }
+  const FRAME_SIZE_MAPPING: Record<string, { width: number, height: number } | 'max'> = {
+    small: { width: 1280, height: 720 },
+    medium: { width: 1920, height: 1080 },
+    large: 'max'
+  }
+
+  const format = useCameraFormat(device, [
+    {
+      photoResolution: RESOLUTION_MAPPING[resolution],
+      videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+    }
+  ])
+  const isScancode = useCallback((fail: (res: { errMsg: string }) => void, complete: (res: { errMsg: string }) => void) => {
+    if (!isPhoto.current) {
+      const result = {
+        errMsg: 'Not allow to invoke takePhoto in \'scanCode\' mode.'
+      }
+      fail(result)
+      complete(result)
+      return true
+    }
+    return false
+  }, [])
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: (codes: any[]) => {
+      codes.forEach(code => {
+        const type = code.type === 'qr' ? 'QR_CODE' : code.type?.toUpperCase()
+        const frame = code.frame || {}
+        bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+          detail: {
+            result: code.value,
+            type,
+            scanArea: [parseInt(frame.x) || 0, parseInt(frame.y) || 0, parseInt(frame.width) || 0, parseInt(frame.height) || 0]
+          }
+        }))
+      })
+    }
+  })
+
+  const onInitialized = useCallback(() => {
+    bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+      detail: {
+        maxZoom
+      }
+    }))
+  }, [bindinitdone, maxZoom])
+
+  const onStopped = useCallback(() => {
+    bindstop && bindstop()
+  }, [bindstop])
+
+  const camera: CameraRef = useMemo(() => ({
+    setZoom: (zoom: number) => {
+      setZoomValue(zoom)
+    },
+    takePhoto: (options: TakePhotoOptions = {}) => {
+      const { success = noop, fail = noop, complete = noop } = options
+      if (isScancode(fail, complete)) return
+      cameraRef.current?.takePhoto?.({
+        quality: qualityValue[options.quality || 'normal'] as number
+      } as any).then((res: { path: any }) => {
+        const result = {
+          errMsg: 'takePhoto:ok',
+          tempImagePath: res.path
+        }
+        success(result)
+        complete(result)
+      }).catch(() => {
+        const result = {
+          errMsg: 'takePhoto:fail'
+        }
+        fail(result)
+        complete(result)
+      })
+    },
+    startRecord: (options: RecordOptions = {}) => {
+      let { timeout = 30, success = noop, fail = noop, complete = noop, timeoutCallback = noop } = options
+      timeout = timeout > 300 ? 300 : timeout
+      let recordTimer: NodeJS.Timeout | null = null
+      if (isScancode(fail, complete)) return
+      try {
+        const result = {
+          errMsg: 'startRecord:ok'
+        }
+        success(result)
+        complete(result)
+
+        cameraRef.current?.startRecording?.({
+          onRecordingError: (error: any) => {
+            if (recordTimer) clearTimeout(recordTimer)
+            const errorResult = {
+              errMsg: 'startRecord:fail during recording',
+              error: error
+            }
+            timeoutCallback(errorResult)
+          },
+          onRecordingFinished: (video: any) => {
+            RecordRes = video
+            if (recordTimer) clearTimeout(recordTimer)
+          }
+        })
+
+        recordTimer = setTimeout(() => { // 超时自动停止
+          cameraRef.current?.stopRecording().catch(() => {
+            // 忽略停止录制时的错误
+          })
+        }, timeout * 1000)
+      } catch (error: any) {
+        if (recordTimer) clearTimeout(recordTimer)
+        const result = {
+          errMsg: 'startRecord:fail ' + (error.message || 'unknown error')
+        }
+        fail(result)
+        complete(result)
+      }
+    },
+    stopRecord: (options: StopRecordOptions = {}) => {
+      const { success = noop, fail = noop, complete = noop } = options
+      if (isScancode(fail, complete)) return
+      try {
+        cameraRef.current?.stopRecording().then(() => {
+          setTimeout(() => {
+            if (RecordRes) {
+              const result = {
+                errMsg: 'stopRecord:ok',
+                tempVideoPath: RecordRes?.path,
+                duration: RecordRes.duration * 1000 // 转成ms
+              }
+              RecordRes = null
+              success(result)
+              complete(result)
+            }
+          }, 200) // 延时200ms，确保录制结果已准备好
+        }).catch((e: any) => {
+          const result = {
+            errMsg: 'stopRecord:fail ' + (e.message || 'promise rejected')
+          }
+          fail(result)
+          complete(result)
+        })
+      } catch (error: any) {
+        const result = {
+          errMsg: 'stopRecord:fail ' + (error.message || 'unknown error')
+        }
+        fail(result)
+        complete(result)
+      }
+    }
+  }), [])
+
+  useEffect(() => {
+    let unWatch: any
+    if (pageId && hasOwn(global.__mpxPageStatusMap, String(pageId))) {
+      unWatch = watch(() => global.__mpxPageStatusMap[pageId], (newVal: string) => {
+        if (newVal === 'show') {
+          if (page.id === pageId) {
+            setIsActive(true)
+          }
+        }
+        if (newVal === 'hide') {
+          setIsActive(false)
+        }
+      }, { sync: true } as WatchOptions)
+    }
+    const checkCameraPermission = async () => {
+      try {
+        const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission
+        if (typeof cameraPermission === 'function') {
+          const permissionResult = await cameraPermission()
+          setHasPermission(permissionResult === true)
+        } else {
+          setHasPermission(true)
+        }
+      } catch (error) {
+        setHasPermission(false)
+      }
+    }
+    checkCameraPermission()
+    return () => {
+      if (navigation?.camera === camera) {
+        delete navigation.camera
+      }
+      unWatch && unWatch()
+    }
+  }, [])
+
+  const innerProps:any = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: cameraRef,
+        style: extendObject({}, normalStyle, layoutStyle),
+        isActive,
+        photo: true,
+        video: true,
+        onInitialized,
+        onStopped,
+        device,
+        format,
+        codeScanner: !isPhoto.current ? codeScanner : undefined,
+        zoom: zoomValue,
+        torch: flash
+      }
+    ),
+    [
+      'mode',
+      'resolution',
+      'frame-size',
+      'bindinitdone',
+      'bindstop',
+      'flash',
+      'bindscancode',
+      'binderror'
+    ],
+    {
+      layoutRef
+    }
+  )
+
+  if (navigation && navigation.camera && navigation.camera !== camera) {
+    warn('<camera>: 一个页面只能插入一个')
+    return null
+  } else if (navigation) {
+    navigation.camera = camera
+  }
+
+  if (!hasPermission || !device) {
+    return null
+  }
+
+  return createElement(Camera, innerProps)
+})
+
+_camera.displayName = 'MpxCamera'
+
+export default _camera

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -299,22 +299,112 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }, [refresherTriggered])
 
-  function scrollTo ({ top = 0, left = 0, animated = false }: { top?: number; left?: number; animated?: boolean }) {
-    scrollToOffset(left, top, animated)
+  function scrollTo ({ top = 0, left = 0, animated = false, duration }: { top?: number; left?: number; animated?: boolean; duration?: number }) {
+    // 如果指定了 duration 且需要动画，使用自定义动画
+    if (animated && duration && duration > 0) {
+      // 获取当前滚动位置
+      const currentY = scrollOptions.current.scrollTop || 0
+      const currentX = scrollOptions.current.scrollLeft || 0
+
+      const startTime = Date.now()
+      const deltaY = top - currentY
+      const deltaX = left - currentX
+
+      // 缓动函数：easeInOutCubic
+      const easing = (t: number) => {
+        return t < 0.5
+          ? 4 * t * t * t
+          : 1 - Math.pow(-2 * t + 2, 3) / 2
+      }
+
+      // 使用 requestAnimationFrame 实现平滑动画
+      const animate = () => {
+        const elapsed = Date.now() - startTime
+        const progress = Math.min(elapsed / duration, 1) // 0 到 1
+
+        const easeProgress = easing(progress)
+        const nextY = currentY + deltaY * easeProgress
+        const nextX = currentX + deltaX * easeProgress
+
+        if (scrollViewRef.current) {
+          scrollViewRef.current.scrollTo({ y: nextY, x: nextX, animated: false })
+        }
+
+        if (progress < 1) {
+          requestAnimationFrame(animate)
+        } else {
+          // 确保最终位置准确
+          if (scrollViewRef.current) {
+            scrollViewRef.current.scrollTo({ y: top, x: left, animated: false })
+          }
+        }
+      }
+
+      requestAnimationFrame(animate)
+    } else {
+      // 使用原生的 scrollTo
+      scrollToOffset(left, top, animated)
+    }
   }
 
-  function handleScrollIntoView (selector = '', { offset = 0, animated = true } = {}) {
-    const refs = __selectRef!(`#${selector}`, 'node')
-    if (!refs) return
-    const { nodeRef } = refs.getNodeInstance()
-    nodeRef.current?.measureLayout(
-      scrollViewRef.current,
-      (left: number, top: number) => {
-        const adjustedLeft = scrollX ? left + offset : left
-        const adjustedTop = scrollY ? top + offset : top
-        scrollToOffset(adjustedLeft, adjustedTop, animated)
+  function handleScrollIntoView (selector = '', { offset = 0, animated = true, duration = undefined }: { offset?: number; animated?: boolean; duration?: number } = {}) {
+    try {
+      const currentSelectRef = propsRef.current.__selectRef
+
+      if (!currentSelectRef) {
+        const errMsg = '__selectRef is not available. Please ensure the scroll-view component is properly initialized.'
+        warn(errMsg)
+        return
       }
-    )
+
+      const targetScrollView = scrollViewRef.current
+
+      if (!targetScrollView) {
+        const errMsg = 'scrollViewRef is not ready'
+        warn(errMsg)
+        return
+      }
+
+      // scroll-into-view prop 按微信规范直传裸 id（如 "section-1"），而 __refs 注册时 key 带 # 或 . 前缀，需补齐才能命中；
+      // pageScrollTo 调用方已自带前缀（如 "#section-1"）
+      const normalizedSelector = selector.startsWith('#') || selector.startsWith('.') ? selector : `#${selector}`
+
+      // 调用 __selectRef 查找元素
+      const refs = currentSelectRef(normalizedSelector, 'node')
+      if (!refs) {
+        const errMsg = `Element not found for selector: ${normalizedSelector}`
+        warn(errMsg)
+        return
+      }
+
+      const { nodeRef } = refs.getNodeInstance()
+      if (!nodeRef?.current) {
+        const errMsg = `Node ref not available for selector: ${normalizedSelector}`
+        warn(errMsg)
+        return
+      }
+
+      nodeRef.current.measureLayout(
+        targetScrollView,
+        (left: number, top: number) => {
+          const adjustedLeft = scrollX ? left + offset : left
+          const adjustedTop = scrollY ? top + offset : top
+
+          // 使用 scrollTo 方法，支持 duration 参数
+          if (duration !== undefined) {
+            scrollTo({ left: adjustedLeft, top: adjustedTop, animated, duration })
+          } else {
+            scrollToOffset(adjustedLeft, adjustedTop, animated)
+          }
+        },
+        (error: any) => {
+          warn(`Failed to measure layout for selector ${normalizedSelector}: ${error}`)
+        }
+      )
+    } catch (error: any) {
+      const errMsg = `handleScrollIntoView error for selector ${selector}: ${error?.message || error}`
+      warn(errMsg)
+    }
   }
 
   function selectLength (size: { height: number; width: number }) {
@@ -641,9 +731,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   // 处理下拉刷新的手势 - 使用 useMemo 避免每次渲染都创建
   const panGesture = useMemo(() => {
-    if (!hasRefresher) return Gesture.Pan() // 返回空手势
-
     return Gesture.Pan()
+      .activeOffsetY([-5, 5])
+      .failOffsetX([-5, 5])
       .onUpdate((event) => {
         'worklet'
         if (enhanced && !!bounces) {
@@ -703,7 +793,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }
       })
       .simultaneousWithExternalGesture(scrollViewRef)
-  }, [hasRefresher, enhanced, bounces, refreshing, refresherThreshold])
+  }, [enhanced, bounces, refreshing, refresherThreshold])
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -234,7 +234,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
         break
       case 'postMessage':
-        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+        bindmessage && bindmessage(getCustomEvent('message', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
           detail: {
             data: params[0]?.data
           }

package/lib/utils/dom-tag-config.js

@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-input,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-camera'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18",
+  "version": "2.10.19",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.18",
+    "@mpxjs/api-proxy": "^2.10.19",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/glob": "^8.1.0",
@@ -97,6 +97,7 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1",
     "webpack": "^5.75.0"
@@ -104,5 +105,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "8ce11a81959cb4b807d683b14c2d0b72c3991da3"
+  "gitHead": "ca50ba6b1361f3c7790746476dd8b8e6be802ea3"
 }