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

package/lib/dependencies/DynamicEntryDependency.js

@@ -6,7 +6,7 @@ const toPosix = require('../utils/to-posix')
 const async = require('async')
 const parseRequest = require('../utils/parse-request')
 const hasOwn = require('../utils/has-own')
-const { RetryRuntimeGlobal } = require('../retry-runtime-module')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {

package/lib/dependencies/ImportDependency.js

@@ -0,0 +1,102 @@
+const Dependency = require('webpack/lib/Dependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
+
+class ImportDependency extends ModuleDependency {
+  /**
+   * @param {string} request the request
+   * @param {[number, number]} range expression range
+   * @param {string[][]=} referencedExports list of referenced exports
+   */
+  constructor (request, range, referencedExports, extraOptions) {
+    super(request)
+    this.range = range
+    this.referencedExports = referencedExports
+    this.extraOptions = extraOptions
+  }
+
+  get type () {
+    return 'import()'
+  }
+
+  get category () {
+    return 'esm'
+  }
+
+  /**
+   * Returns list of exports referenced by this dependency
+   * @param {ModuleGraph} moduleGraph module graph
+   * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+   * @returns {(string[] | ReferencedExport)[]} referenced exports
+   */
+  getReferencedExports (moduleGraph, runtime) {
+    return this.referencedExports
+      ? this.referencedExports.map((e) => ({
+          name: e,
+          canMangle: false
+        }))
+      : Dependency.EXPORTS_OBJECT_REFERENCED
+  }
+
+  serialize (context) {
+    context.write(this.range)
+    context.write(this.referencedExports)
+    context.write(this.extraOptions)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    this.range = context.read()
+    this.referencedExports = context.read()
+    this.extraOptions = context.read()
+    super.deserialize(context)
+  }
+}
+
+makeSerializable(ImportDependency, '@mpxjs/webpack-plugin/lib/dependencies/ImportDependency')
+
+ImportDependency.Template = class ImportDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  /**
+   * @param {Dependency} dependency the dependency for which the template should be applied
+   * @param {ReplaceSource} source the current replace source which can be modified
+   * @param {DependencyTemplateContext} templateContext the context object
+   * @returns {void}
+   */
+  apply (
+    dependency,
+    source,
+    { runtimeTemplate, module, moduleGraph, chunkGraph, runtimeRequirements }
+  ) {
+    const dep = /** @type {ImportDependency} */ (dependency)
+    const block = /** @type {AsyncDependenciesBlock} */ (
+      moduleGraph.getParentBlock(dep)
+    )
+    let content = runtimeTemplate.moduleNamespacePromise({
+      chunkGraph,
+      block: block,
+      module: /** @type {Module} */ (moduleGraph.getModule(dep)),
+      request: dep.request,
+      strict: /** @type {BuildMeta} */ (module.buildMeta).strictHarmonyModule,
+      message: 'import()',
+      runtimeRequirements
+    })
+    // replace fakeType by 9 to fix require.async to commonjs2 module like 'module.exports = function(){...}'
+    content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
+      return p1 + '9' + p3
+    })
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    const extraOptions = dep.extraOptions || {}
+    if (extraOptions.isRequireAsync && extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
+    }
+
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+module.exports = ImportDependency

package/lib/{retry-runtime-module.js → dependencies/RetryRuntimeModule.js}

@@ -1,7 +1,7 @@
 const Template = require('webpack/lib/Template')
 const RuntimeModule = require('webpack/lib/RuntimeModule')
 
-const RetryRuntimeGlobal = '__webpack_require__.__retry'
+const RetryRuntimeGlobal = '__webpack_require__.mpxR'
 
 class RetryRuntimeModule extends RuntimeModule {
   constructor () {

package/lib/index.js

@@ -14,8 +14,7 @@ const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
 const FileSystemInfo = require('webpack/lib/FileSystemInfo')
-const ImportDependency = require('webpack/lib/dependencies/ImportDependency')
-const ImportDependencyTemplate = require('./dependencies/ImportDependencyTemplate')
+const ImportDependency = require('./dependencies/ImportDependency')
 const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const normalize = require('./utils/normalize')
@@ -77,8 +76,10 @@ const VirtualModulesPlugin = require('webpack-virtual-modules')
 const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
 const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
-const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./retry-runtime-module')
-require('./utils/check-core-version-match')
+const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./dependencies/RetryRuntimeModule')
+const checkVersionCompatibility = require('./utils/check-core-version-match')
+
+checkVersionCompatibility()
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
@@ -696,7 +697,8 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RequireExternalDependency, new NullFactory())
       compilation.dependencyTemplates.set(RequireExternalDependency, new RequireExternalDependency.Template())
 
-      compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
+      compilation.dependencyFactories.set(ImportDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(ImportDependency, new ImportDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -784,7 +786,7 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
-          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || isReact(this.options.mode)),
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || (isReact(this.options.mode) && this.options.rnConfig.supportSubpackage)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -1448,16 +1450,9 @@ class MpxWebpackPlugin {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              const supportRequireAsync = isReact(mpx.mode)
-              ? (mpx.supportRequireAsync && this.options.rnConfig.supportSubpackage)
-              : mpx.supportRequireAsync
-              if (supportRequireAsync) {
+              if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-                  request = addQuery(request, {
-                    isRequireAsync: true,
-                    retryRequireAsync: JSON.stringify(this.options.retryRequireAsync)
-                  })
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1465,7 +1460,10 @@ class MpxWebpackPlugin {
                     expr.loc,
                     request
                   )
-                  const dep = new ImportDependency(request, expr.range)
+                  const dep = new ImportDependency(request, expr.range, undefined, {
+                    isRequireAsync: true,
+                    retryRequireAsync: this.options.retryRequireAsync
+                  })
                   dep.loc = expr.loc
                   depBlock.addDependency(dep)
                   parser.state.current.addBlock(depBlock)

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

@@ -17,6 +17,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-progress'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
     props: [
       {
         test: /^(border-radius|font-size|color|active-mode|duration)$/,

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

@@ -8,6 +8,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-slider'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
     props: [
       {
         test: /^color$/,

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

@@ -11,7 +11,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', 'progress', 'slider', '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', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/platform/template/wx/index.js

@@ -463,7 +463,9 @@ module.exports = function getSpec ({ warn, error }) {
           ali (prefix) {
             const prefixMap = {
               bind: 'on',
-              catch: 'catch'
+              catch: 'catch',
+              'capture-catch': 'capture-catch',
+              'capture-bind': 'capture-on'
             }
             if (!prefixMap[prefix]) {
               error(`Ali environment does not support [${prefix}] event handling!`)

package/lib/resolver/AddEnvPlugin.js

@@ -16,6 +16,8 @@ module.exports = class AddEnvPlugin {
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
     const env = this.env
+    const envPattern = new RegExp(`\\.${env}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddEnvPlugin', (request, resolveContext, callback) => {
       if (request.env) {
         return callback()
@@ -32,11 +34,22 @@ module.exports = class AddEnvPlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
+
+      const resourceBasename = path.basename(resourcePath)
+      // 如果 infix 与 resourcePath 无法匹配，则认为未命中env
+      if (envPattern.test(resourceBasename) && resourceBasename.includes(queryObj.infix)) {
+        request.query = stringifyQuery(queryObj)
+        request.env = obj.env
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add env: ' + env, resolveContext, callback)
     })
   }

package/lib/resolver/AddModePlugin.js

@@ -17,6 +17,9 @@ module.exports = class AddModePlugin {
     const target = resolver.ensureHook(this.target)
     const { options = {}, mode } = this
     const { defaultMode, fileConditionRules, implicitMode } = options
+    const modePattern = new RegExp(`\\.${mode}(\\.|$)`)
+    const defaultModePattern = new RegExp(`\\.${defaultMode}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -33,13 +36,28 @@ module.exports = class AddModePlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
       if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
+
+      // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
+      if (modePattern.test(path.basename(resourcePath))) {
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
+        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -3,7 +3,8 @@ import { collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
 import eventConfigMap from './event.config';
 const globalEventState = {
-    needPress: true
+    needPress: true,
+    identifier: null
 };
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
@@ -94,36 +95,48 @@ function checkIsNeedPress(e, type, ref) {
         ref.current.startTimer[type] = null;
     }
 }
+function shouldHandleTapEvent(e, eventConfig) {
+    const { identifier } = e.nativeEvent.changedTouches[0];
+    return eventConfig.tap && globalEventState.identifier === identifier;
+}
 function handleTouchstart(e, type, 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]);
+            innerRef.current.startTimer[type] = setTimeout(() => {
+                globalEventState.needPress = false;
+                handleEmitEvent('longpress', e, type, eventConfig);
+            }, 350);
         }
-        innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
-        innerRef.current.startTimer[type] = setTimeout(() => {
-            // 只要触发过longpress, 全局就不再触发tap
-            globalEventState.needPress = false;
-            handleEmitEvent('longpress', e, type, eventConfig);
-        }, 350);
     }
 }
 function handleTouchmove(e, type, eventConfig) {
     const { innerRef } = eventConfig;
     handleEmitEvent('touchmove', e, type, eventConfig);
-    if (eventConfig.tap) {
+    if (shouldHandleTapEvent(e, eventConfig)) {
         checkIsNeedPress(e, type, innerRef);
     }
 }
@@ -131,7 +144,8 @@ function handleTouchend(e, type, eventConfig) {
     const { innerRef, disableTap } = eventConfig;
     handleEmitEvent('touchend', e, type, eventConfig);
     innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
-    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/dist/mpx-movable-view.jsx

@@ -4,8 +4,8 @@
  * ✔ out-of-bounds
  * ✔ x
  * ✔ y
- * ✘ damping
- * ✘ friction
+ * ✔ damping
+ * ✔ friction
  * ✔ disabled
  * ✘ scale
  * ✘ scale-min
@@ -24,8 +24,96 @@ import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
+// 超出边界处理函数，参考微信小程序的超出边界衰减效果
+const applyBoundaryDecline = (newValue, range) => {
+    'worklet';
+    const decline = (distance) => {
+        '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, dampingParam = 20, callback) => {
+    '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;
+    let easingFunction;
+    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, currentPosition, clampRange, frictionValue = 2, callback) => {
+    '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);
+};
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -41,7 +129,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -106,18 +194,12 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 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) {
@@ -293,7 +375,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         triggerEndOnJS
     });
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
-    // 节流版本的 change 事件触发
+    // 节流版本的change事件触发
     const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
         'worklet';
         const now = Date.now();
@@ -357,7 +439,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     offsetX.value = x;
                 }
                 else {
-                    offsetX.value = newX;
+                    offsetX.value = applyBoundaryDecline(newX, draggableXRange.value);
                 }
             }
             if (direction === 'vertical' || direction === 'all') {
@@ -367,7 +449,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     offsetY.value = y;
                 }
                 else {
-                    offsetY.value = newY;
+                    offsetY.value = applyBoundaryDecline(newY, draggableYRange.value);
                 }
             }
             if (bindchange) {
@@ -397,18 +479,12 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 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) {
@@ -420,14 +496,10 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 }
             }
             else if (inertia) {
-                // 惯性处理
+                // 惯性处理 - 使用微信小程序friction算法
                 if (direction === 'horizontal' || direction === 'all') {
                     xInertialMotion.value = true;
-                    offsetX.value = withDecay({
-                        velocity: e.velocityX / 10,
-                        rubberBandEffect: outOfBounds,
-                        clamp: draggableXRange.value
-                    }, () => {
+                    offsetX.value = withWechatDecay(e.velocityX / 10, offsetX.value, draggableXRange.value, friction, () => {
                         xInertialMotion.value = false;
                         if (bindchange) {
                             runOnJS(runOnJSCallback)('handleTriggerChange', {
@@ -439,11 +511,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 }
                 if (direction === 'vertical' || direction === 'all') {
                     yInertialMotion.value = true;
-                    offsetY.value = withDecay({
-                        velocity: e.velocityY / 10,
-                        rubberBandEffect: outOfBounds,
-                        clamp: draggableYRange.value
-                    }, () => {
+                    offsetY.value = withWechatDecay(e.velocityY / 10, offsetY.value, draggableYRange.value, friction, () => {
                         yInertialMotion.value = false;
                         if (bindchange) {
                             runOnJS(runOnJSCallback)('handleTriggerChange', {

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -1,5 +1,4 @@
-import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { useState, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
 const _PortalManager = forwardRef((props, ref) => {
     const [state, setState] = useState({
         portals: []
@@ -31,10 +30,9 @@ const _PortalManager = forwardRef((props, ref) => {
         portals: state.portals
     }));
     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>))}
     </>);
 });
 export default _PortalManager;