@mpxjs/webpack-plugin 2.10.15-4 → 2.10.15-prelease.1

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

@@ -120,8 +120,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const strVelocity = 'velocity' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
     const touchfinish = useSharedValue(true);
-    // 记录onUpdate时的方向，用于进行onFinalize中的值修正
-    const preUpdateTransDir = useSharedValue(0);
     // 记录上一帧的绝对定位坐标
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -327,9 +325,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current) {
-        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-        bindchange && bindchange(eventData);
+    function handleSwiperChange(current, pCurrent) {
+        if (pCurrent !== currentIndex.value) {
+            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+            bindchange && bindchange(eventData);
+        }
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -379,7 +379,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
+        if (newIndex !== preIndex && bindchange) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
     });
@@ -411,9 +411,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        // 1. 如果用户在touch的过程中, 外部更新了current以内部为准（小程序表现）
+        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
         // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-        if (propCurrent !== currentIndex.value && touchfinish.value) {
+        if (propCurrent !== currentIndex.value) {
             updateCurrent(propCurrent, step.value);
         }
     }, [propCurrent]);
@@ -662,7 +662,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 translation: moveDistance,
                 transdir: moveDistance
             };
-            preUpdateTransDir.value = moveDistance;
             // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
             const { half } = computeHalf(eventData);
             if (childrenLength.value > 1 && half) {
@@ -703,17 +702,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
             if (touchfinish.value)
                 return;
             touchfinish.value = true;
-            /**
-             * 安卓修正
-             * 问题：部分安卓机型onFinalize中拿到的absoluteX 有问题
-             * 案例：比如手指从右向左滑的时候，onUpdate拿到的是241.64346313476562， 而onFinalize中拿到的是241.81817626953125，理论上onFinalize中应该比onUpdate小才对吧
-             * 解决方式：修正
-            */
             // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
             const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance,
-                transdir: Math.abs(moveDistance) > 1 ? moveDistance : preUpdateTransDir.value
+                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
             };
             // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {

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

@@ -203,16 +203,13 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            if (type === 'linear') {
-                const dimensionWidth = calcPercent(width, layoutWidth) || 0;
-                const dimensionHeight = calcPercent(height, layoutHeight) || 0;
-                // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
-                if (dimensionWidth && dimensionHeight) {
-                    dimensions = {
-                        width: dimensionWidth,
-                        height: dimensionHeight
-                    };
-                }
+            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+                // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+                // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+                dimensions = {
+                    width: 0,
+                    height: 0
+                };
             }
             else {
                 dimensions = {

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

@@ -80,9 +80,25 @@ const _WebView = forwardRef((props, ref) => {
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
+    const hostValidate = (url) => {
+        const host = url && new URL(url).host;
+        const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || [];
+        if (hostWhitelists.length) {
+            return hostWhitelists.some((item) => {
+                return host.endsWith(item);
+            });
+        }
+        else {
+            return true;
+        }
+    };
     if (!src) {
         return null;
     }
+    if (!hostValidate(src)) {
+        console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单');
+        return null;
+    }
     const _reload = function () {
         if (__mpx_mode__ !== 'ios') {
             fristLoaded.current = false; // 安卓需要重新设置
@@ -133,6 +149,9 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const _message = function (res) {
+        if (!hostValidate(res.nativeEvent?.url)) {
+            return;
+        }
         let data = {};
         let asyncCallback;
         const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
@@ -184,7 +203,7 @@ const _WebView = forwardRef((props, ref) => {
                 break;
             default:
                 if (type) {
-                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    const implement = mpx.config.rnConfig.webviewConfig && mpx.config.rnConfig.webviewConfig.apiImplementations && mpx.config.rnConfig.webviewConfig.apiImplementations[type];
                     if (isFunction(implement)) {
                         asyncCallback = Promise.resolve(implement(...params));
                     }

package/lib/runtime/components/react/getInnerListeners.ts

@@ -10,11 +10,13 @@ import {
   RemoveProps,
   InnerRef,
   LayoutRef,
-  ExtendedNativeTouchEvent
+  ExtendedNativeTouchEvent,
+  GlobalEventState
 } from './types/getInnerListeners'
 
-const globalEventState = {
-  needPress: true
+const globalEventState: GlobalEventState = {
+  needPress: true,
+  identifier: null
 }
 
 const getTouchEvent = (
@@ -137,39 +139,54 @@ function checkIsNeedPress (e: ExtendedNativeTouchEvent, type: 'bubble' | 'captur
   }
 }
 
+function shouldHandleTapEvent (e: ExtendedNativeTouchEvent, eventConfig: EventConfig) {
+  const { identifier } = e.nativeEvent.changedTouches[0]
+  return eventConfig.tap && globalEventState.identifier === identifier
+}
+
 function handleTouchstart (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
-  // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
   e.persist()
   const { innerRef } = eventConfig
-  globalEventState.needPress = true
-  innerRef.current.mpxPressInfo.detail = {
-    x: e.nativeEvent.changedTouches[0].pageX,
-    y: e.nativeEvent.changedTouches[0].pageY
+  const touch = e.nativeEvent.changedTouches[0]
+  const { identifier } = touch
+
+  const isSingle = e.nativeEvent.touches.length <= 1
+
+  if (isSingle) {
+    // 仅在 touchstart 记录第一个单指触摸点
+    globalEventState.identifier = identifier
+    globalEventState.needPress = true
+    innerRef.current.mpxPressInfo.detail = {
+      x: touch.pageX,
+      y: touch.pageY
+    }
   }
 
   handleEmitEvent('touchstart', e, type, eventConfig)
 
   if (eventConfig.longpress) {
-    if (e._stoppedEventTypes?.has('longpress')) {
-      return
-    }
-    if (eventConfig.longpress.hasCatch) {
-      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
-      e._stoppedEventTypes.add('longpress')
+    // 只有单指触摸时才启动长按定时器
+    if (isSingle) {
+      if (e._stoppedEventTypes?.has('longpress')) {
+        return
+      }
+      if (eventConfig.longpress.hasCatch) {
+        e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+        e._stoppedEventTypes.add('longpress')
+      }
+      innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+      innerRef.current.startTimer[type] = setTimeout(() => {
+        globalEventState.needPress = false
+        handleEmitEvent('longpress', e, type, eventConfig)
+      }, 350)
     }
-    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
-    innerRef.current.startTimer[type] = setTimeout(() => {
-      // 只要触发过longpress, 全局就不再触发tap
-      globalEventState.needPress = false
-      handleEmitEvent('longpress', e, type, eventConfig)
-    }, 350)
   }
 }
 
 function handleTouchmove (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
   const { innerRef } = eventConfig
   handleEmitEvent('touchmove', e, type, eventConfig)
-  if (eventConfig.tap) {
+  if (shouldHandleTapEvent(e, eventConfig)) {
     checkIsNeedPress(e, type, innerRef)
   }
 }
@@ -178,7 +195,9 @@ function handleTouchend (e: ExtendedNativeTouchEvent, type: EventType, eventConf
   const { innerRef, disableTap } = eventConfig
   handleEmitEvent('touchend', e, type, eventConfig)
   innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
-  if (eventConfig.tap) {
+
+  // 只有单指触摸结束时才触发 tap
+  if (shouldHandleTapEvent(e, eventConfig)) {
     checkIsNeedPress(e, type, innerRef)
     if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
       return

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

@@ -4,8 +4,8 @@
  * ✔ out-of-bounds
  * ✔ x
  * ✔ y
- * ✘ damping
- * ✘ friction
+ * ✔ damping
+ * ✔ friction
  * ✔ disabled
  * ✘ scale
  * ✘ scale-min
@@ -27,13 +27,125 @@ import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, P
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
-  withDecay,
   runOnJS,
   runOnUI,
-  withSpring
+  withTiming,
+  Easing
 } from 'react-native-reanimated'
 import { collectDataset, noop } from '@mpxjs/utils'
 
+// 超出边界处理函数，参考微信小程序的超出边界衰减效果
+const applyBoundaryDecline = (
+  newValue: number,
+  range: [min: number, max: number]
+): number => {
+  'worklet'
+
+  const decline = (distance: number): number => {
+    'worklet'
+    return Math.sqrt(Math.abs(distance))
+  }
+
+  if (newValue < range[0]) {
+    const overDistance = range[0] - newValue
+    return range[0] - decline(overDistance)
+  } else if (newValue > range[1]) {
+    const overDistance = newValue - range[1]
+    return range[1] + decline(overDistance)
+  }
+  return newValue
+}
+
+// 参考微信小程序的弹簧阻尼系统实现
+const withWechatSpring = (
+  toValue: number,
+  dampingParam = 20,
+  callback?: () => void
+) => {
+  'worklet'
+
+  // 弹簧参数计算
+  const m = 1 // 质量
+  const k = 9 * Math.pow(dampingParam, 2) / 40 // 弹簧系数
+  const c = dampingParam // 阻尼系数
+
+  // 判别式：r = c² - 4mk
+  const discriminant = c * c - 4 * m * k
+
+  // 计算动画持续时间和缓动函数
+  let duration: number
+  let easingFunction: any
+
+  if (Math.abs(discriminant) < 0.01) {
+    // 临界阻尼 (discriminant ≈ 0)
+    // 使用cubic-out模拟临界阻尼的平滑过渡
+    duration = Math.max(350, Math.min(800, 2000 / dampingParam))
+    easingFunction = Easing.out(Easing.cubic)
+  } else if (discriminant > 0) {
+    // 过阻尼 (discriminant > 0)
+    // 使用指数缓动模拟过阻尼的缓慢收敛
+    duration = Math.max(450, Math.min(1000, 2500 / dampingParam))
+    easingFunction = Easing.out(Easing.exp)
+  } else {
+    // 欠阻尼 (discriminant < 0) - 会产生振荡
+    // 计算振荡频率和衰减率
+    const dampingRatio = c / (2 * Math.sqrt(m * k)) // 阻尼比
+
+    // 根据阻尼比调整动画参数
+    if (dampingRatio < 0.7) {
+      // 明显振荡
+      duration = Math.max(600, Math.min(1200, 3000 / dampingParam))
+      // 创建带振荡的贝塞尔曲线
+      easingFunction = Easing.bezier(0.175, 0.885, 0.32, 1.275)
+    } else {
+      // 轻微振荡
+      duration = Math.max(400, Math.min(800, 2000 / dampingParam))
+      easingFunction = Easing.bezier(0.25, 0.46, 0.45, 0.94)
+    }
+  }
+
+  return withTiming(toValue, {
+    duration,
+    easing: easingFunction
+  }, callback)
+}
+
+// 参考微信小程序friction的惯性动画
+const withWechatDecay = (
+  velocity: number,
+  currentPosition: number,
+  clampRange: [min: number, max: number],
+  frictionValue = 2,
+  callback?: () => void
+) => {
+  'worklet'
+
+  // 微信小程序friction算法: delta = -1.5 * v² / a, 其中 a = -f * v / |v|
+  // 如果friction小于等于0，设置为默认值2
+  const validFriction = frictionValue <= 0 ? 2 : frictionValue
+  const f = 1000 * validFriction
+  const acceleration = velocity !== 0 ? -f * velocity / Math.abs(velocity) : 0
+  const delta = acceleration !== 0 ? (-1.5 * velocity * velocity) / acceleration : 0
+
+  let finalPosition = currentPosition + delta
+
+  // 边界限制
+  if (finalPosition < clampRange[0]) {
+    finalPosition = clampRange[0]
+  } else if (finalPosition > clampRange[1]) {
+    finalPosition = clampRange[1]
+  }
+
+  // 计算动画时长
+  const distance = Math.abs(finalPosition - currentPosition)
+  const duration = Math.min(1500, Math.max(200, distance * 8))
+
+  return withTiming(finalPosition, {
+    duration,
+    easing: Easing.out(Easing.cubic)
+  }, callback)
+}
+
 interface MovableViewProps {
   children: ReactNode
   style?: Record<string, any>
@@ -42,6 +154,8 @@ interface MovableViewProps {
   y?: number
   disabled?: boolean
   animation?: boolean
+  damping?: number
+  friction?: number
   id?: string
   changeThrottleTime?:number
   bindchange?: (event: unknown) => void
@@ -95,6 +209,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     inertia = false,
     disabled = false,
     animation = true,
+    damping = 20,
+    friction = 2,
     'out-of-bounds': outOfBounds = false,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -206,18 +322,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) })
         if (direction === 'horizontal' || direction === 'all') {
           offsetX.value = animation
-            ? withSpring(newX, {
-              duration: 1500,
-              dampingRatio: 0.8
-            })
+            ? withWechatSpring(newX, damping)
             : newX
         }
         if (direction === 'vertical' || direction === 'all') {
           offsetY.value = animation
-            ? withSpring(newY, {
-              duration: 1500,
-              dampingRatio: 0.8
-            })
+            ? withWechatSpring(newY, damping)
             : newY
         }
         if (bindchange) {
@@ -404,7 +514,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
-  // 节流版本的 change 事件触发
+  // 节流版本的change事件触发
   const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
     'worklet'
     const now = Date.now()
@@ -468,7 +578,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value })
             offsetX.value = x
           } else {
-            offsetX.value = newX
+            offsetX.value = applyBoundaryDecline(newX, draggableXRange.value)
           }
         }
         if (direction === 'vertical' || direction === 'all') {
@@ -477,7 +587,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY })
             offsetY.value = y
           } else {
-            offsetY.value = newY
+            offsetY.value = applyBoundaryDecline(newY, draggableYRange.value)
           }
         }
         if (bindchange) {
@@ -506,18 +616,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           if (x !== offsetX.value || y !== offsetY.value) {
             if (x !== offsetX.value) {
               offsetX.value = animation
-                ? withSpring(x, {
-                  duration: 1500,
-                  dampingRatio: 0.8
-                })
+                ? withWechatSpring(x, damping)
                 : x
             }
             if (y !== offsetY.value) {
               offsetY.value = animation
-                ? withSpring(y, {
-                  duration: 1500,
-                  dampingRatio: 0.8
-                })
+                ? withWechatSpring(y, damping)
                 : y
             }
             if (bindchange) {
@@ -528,38 +632,42 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }
           }
         } else if (inertia) {
-          // 惯性处理
+          // 惯性处理 - 使用微信小程序friction算法
           if (direction === 'horizontal' || direction === 'all') {
             xInertialMotion.value = true
-            offsetX.value = withDecay({
-              velocity: e.velocityX / 10,
-              rubberBandEffect: outOfBounds,
-              clamp: draggableXRange.value
-            }, () => {
-              xInertialMotion.value = false
-              if (bindchange) {
-                runOnJS(runOnJSCallback)('handleTriggerChange', {
-                  x: offsetX.value,
-                  y: offsetY.value
-                })
+            offsetX.value = withWechatDecay(
+              e.velocityX / 10,
+              offsetX.value,
+              draggableXRange.value,
+              friction,
+              () => {
+                xInertialMotion.value = false
+                if (bindchange) {
+                  runOnJS(runOnJSCallback)('handleTriggerChange', {
+                    x: offsetX.value,
+                    y: offsetY.value
+                  })
+                }
               }
-            })
+            )
           }
           if (direction === 'vertical' || direction === 'all') {
             yInertialMotion.value = true
-            offsetY.value = withDecay({
-              velocity: e.velocityY / 10,
-              rubberBandEffect: outOfBounds,
-              clamp: draggableYRange.value
-            }, () => {
-              yInertialMotion.value = false
-              if (bindchange) {
-                runOnJS(runOnJSCallback)('handleTriggerChange', {
-                  x: offsetX.value,
-                  y: offsetY.value
-                })
+            offsetY.value = withWechatDecay(
+              e.velocityY / 10,
+              offsetY.value,
+              draggableYRange.value,
+              friction,
+              () => {
+                yInertialMotion.value = false
+                if (bindchange) {
+                  runOnJS(runOnJSCallback)('handleTriggerChange', {
+                    x: offsetX.value,
+                    y: offsetY.value
+                  })
+                }
               }
-            })
+            )
           }
         }
       })

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -1,5 +1,4 @@
-import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement, Fragment } from 'react'
 
 export type State = {
   portals: Array<{
@@ -48,13 +47,10 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
 
   return (
     <>
-      {state.portals.map(({ key, children }, i) => (
-        <View
-          key={key}
-          collapsable={false} // Need collapsable=false here to clip the elevations
-          style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+      {state.portals.map(({ key, children }) => (
+        <Fragment key={key}>
           {children}
-        </View>
+        </Fragment>
       ))}
     </>
   )