@mpxjs/webpack-plugin 2.10.3-beta.1 → 2.10.3-beta.10

package/lib/index.js

@@ -1806,72 +1806,92 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
-        if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
-          const type = queryObj.type
+        const type = queryObj.type
+        const mpxProcessFlag = queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG
+        const vueProcessFlag = queryObj.vue && queryObj.mpx !== MPX_PROCESSED_FLAG
+        if (mpxProcessFlag || vueProcessFlag) {
           const extract = queryObj.extract
-
-          if (type === 'styles') {
-            let insertBeforeIndex = -1
-            // 单次遍历收集所有索引
+          if (type === 'styles' || type === 'style') {
+            const loaderTypes = {
+              'node_modules/stylus-loader': -1,
+              'node_modules/sass-loader': -1,
+              'node_modules/less-loader': -1,
+              'node_modules/css-loader': -1
+            }
             loaders.forEach((loader, index) => {
               const currentLoader = toPosix(loader.loader)
-              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
-                insertBeforeIndex = index
+              for (const key in loaderTypes) {
+                if (currentLoader.includes(key)) {
+                  loaderTypes[key] = index
+                  break
+                }
               }
             })
+            const insertStripLoaders = (index) => {
+              if (index !== -1) {
+                loaders.splice(index, 0, { loader: styleStripConditionalPath, options: {id: 0} })
+                loaders.splice(index + 2, 0, { loader: styleStripConditionalPath, options: {id: 1} })
+                return true
+              }
+              return false
+            }
 
-            if (insertBeforeIndex !== -1) {
-              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
+            const priorities = ['node_modules/stylus-loader', 'node_modules/less-loader', 'node_modules/sass-loader', 'node_modules/css-loader']
+            for (const loaderKey of priorities) {
+              if (insertStripLoaders(loaderTypes[loaderKey])) {
+                break
+              }
             }
-            loaders.push({ loader: styleStripConditionalPath })
           }
 
-          switch (type) {
-            case 'styles':
-            case 'template': {
-              let insertBeforeIndex = -1
-              const info = typeLoaderProcessInfo[type]
-              loaders.forEach((loader, index) => {
-                const currentLoader = toPosix(loader.loader)
-                if (currentLoader.includes(info[0])) {
-                  loader.loader = info[1]
-                  insertBeforeIndex = index
-                } else if (currentLoader.includes(info[1])) {
-                  insertBeforeIndex = index
-                }
-              })
-              if (insertBeforeIndex > -1) {
-                loaders.splice(insertBeforeIndex + 1, 0, {
-                  loader: info[2]
+          if (mpxProcessFlag) {
+            switch (type) {
+              case 'styles':
+              case 'template': {
+                let insertBeforeIndex = -1
+                const info = typeLoaderProcessInfo[type]
+                loaders.forEach((loader, index) => {
+                  const currentLoader = toPosix(loader.loader)
+                  if (currentLoader.includes(info[0])) {
+                    loader.loader = info[1]
+                    insertBeforeIndex = index
+                  } else if (currentLoader.includes(info[1])) {
+                    insertBeforeIndex = index
+                  }
                 })
+                if (insertBeforeIndex > -1) {
+                  loaders.splice(insertBeforeIndex + 1, 0, {
+                    loader: info[2]
+                  })
+                }
+                break
               }
-              break
-            }
-            case 'json':
-              if (queryObj.isTheme) {
-                loaders.unshift({
-                  loader: jsonThemeCompilerPath
-                })
-              } else if (queryObj.isPlugin) {
-                loaders.unshift({
-                  loader: jsonPluginCompilerPath
-                })
-              } else {
+              case 'json':
+                if (queryObj.isTheme) {
+                  loaders.unshift({
+                    loader: jsonThemeCompilerPath
+                  })
+                } else if (queryObj.isPlugin) {
+                  loaders.unshift({
+                    loader: jsonPluginCompilerPath
+                  })
+                } else {
+                  loaders.unshift({
+                    loader: jsonCompilerPath
+                  })
+                }
+                break
+              case 'wxs':
                 loaders.unshift({
-                  loader: jsonCompilerPath
+                  loader: wxsLoaderPath
                 })
-              }
-              break
-            case 'wxs':
+                break
+            }
+            if (extract) {
               loaders.unshift({
-                loader: wxsLoaderPath
+                loader: extractorPath
               })
-              break
-          }
-          if (extract) {
-            loaders.unshift({
-              loader: extractorPath
-            })
+            }
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }

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

@@ -82,7 +82,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
-    const [selection, setSelection] = useState({ start: -1, end: -1 });
+    const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -94,15 +94,17 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(parseValue(value));
+            const parsed = parseValue(value);
+            tmpValue.current = parsed;
+            setInputValue(parsed);
         }
     }, [value]);
     useEffect(() => {
-        if (typeof cursor === 'number') {
-            setSelection({ start: cursor, end: cursor });
+        if (selectionStart > -1) {
+            setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd });
         }
-        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-            setSelection({ start: selectionStart, end: selectionEnd });
+        else if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
     }, [cursor, selectionStart, selectionEnd]);
     // have not selection on the Android platformg
@@ -152,6 +154,9 @@ const Input = forwardRef((props, ref) => {
         // sometimes the focus event occurs later than the keyboardWillShow event
         setKeyboardAvoidContext();
     };
+    const onTouchEnd = (evt) => {
+        evt.nativeEvent.origin = 'input';
+    };
     const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
@@ -211,6 +216,7 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const resetValue = () => {
+        tmpValue.current = '';
         setInputValue('');
     };
     const getValue = () => {
@@ -255,7 +261,7 @@ const Input = forwardRef((props, ref) => {
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
@@ -264,6 +270,7 @@ const Input = forwardRef((props, ref) => {
         multiline: !!multiline
     }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,

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

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { Keyboard, View, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const isIOS = Platform.OS === 'ios';
@@ -10,20 +9,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    const dismiss = () => {
-        Keyboard.isVisible() && Keyboard.dismiss();
-    };
-    const gesture = useMemo(() => {
-        return Gesture.Tap()
-            .onEnd(() => {
-            dismiss();
-        }).runOnJS(true);
-    }, []);
-    const animatedStyle = useAnimatedStyle(() => {
-        return Object.assign({
-            transform: [{ translateY: -offset.value }]
-        }, isIOS ? {} : { flexBasis: basic.value });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = ({ nativeEvent }) => {
+        if (nativeEvent.origin !== 'input') {
+            Keyboard.isVisible() && Keyboard.dismiss();
+        }
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +40,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing });
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +67,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
+                                // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
@@ -85,16 +80,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

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

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -30,7 +30,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'style'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];

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

@@ -70,7 +70,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -658,7 +658,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         {showsPagination && renderPagination()}
     </View>);
     }
-    if (children.length === 1) {
+    if (children.length === 1 || disableGesture) {
         return renderSwiper();
     }
     else {

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

@@ -75,7 +75,10 @@ const _WebView = forwardRef((props, ref) => {
     };
     const navigation = useNavigation();
     useEffect(() => {
-        const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        let beforeRemoveSubscription;
+        if (__mpx_mode__ !== 'ios') {
+            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        }
         return () => {
             if (isFunction(beforeRemoveSubscription)) {
                 beforeRemoveSubscription();

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

@@ -51,7 +51,8 @@ import {
   TextInputSelectionChangeEventData,
   TextInputFocusEventData,
   TextInputChangeEventData,
-  TextInputSubmitEditingEventData
+  TextInputSubmitEditingEventData,
+  NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
@@ -195,7 +196,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
-  const [selection, setSelection] = useState({ start: -1, end: -1 })
+  const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length })
 
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
@@ -221,15 +222,17 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   useEffect(() => {
     if (inputValue !== value) {
-      setInputValue(parseValue(value))
+      const parsed = parseValue(value)
+      tmpValue.current = parsed
+      setInputValue(parsed)
     }
   }, [value])
 
   useEffect(() => {
-    if (typeof cursor === 'number') {
+    if (selectionStart > -1) {
+      setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd })
+    } else if (typeof cursor === 'number') {
       setSelection({ start: cursor, end: cursor })
-    } else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-      setSelection({ start: selectionStart, end: selectionEnd })
     }
   }, [cursor, selectionStart, selectionEnd])
 
@@ -290,6 +293,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
+  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    evt.nativeEvent.origin = 'input'
+  }
+
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
@@ -388,6 +395,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const resetValue = () => {
+    tmpValue.current = ''
     setInputValue('')
   }
 
@@ -440,7 +448,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
@@ -452,6 +460,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutProps,
       {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -1,7 +1,6 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
-import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, Platform, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 
 type KeyboardAvoidViewProps = {
@@ -19,25 +18,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  const dismiss = () => {
-    Keyboard.isVisible() && Keyboard.dismiss()
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Tap()
-      .onEnd(() => {
-        dismiss()
-      }).runOnJS(true)
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return Object.assign(
-      {
-        transform: [{ translateY: -offset.value }]
-      },
-      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
-    )
-  })
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+    flexBasis: basic.value as DimensionValue
+  }))
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
@@ -47,6 +31,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     basic.value = 'auto'
   }
 
+  const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    if (nativeEvent.origin !== 'input') {
+      Keyboard.isVisible() && Keyboard.dismiss()
+    }
+  }
+
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
@@ -62,7 +52,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing })
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
           })
         }),
@@ -82,11 +77,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
             const value = aboveOffset > 0 ? belowValue : aboveValue
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
-                /**
-                 * In the Android environment, the layout information is not synchronized after the animation,
-                 * which results in the inability to correctly trigger element events.
-                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                 */
+                // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
@@ -102,18 +93,16 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View
-          style={[
-            contentContainerStyle,
-            animatedStyle
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
   )
 }
 

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -3,7 +3,7 @@ import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-nati
 import { ReactNode, forwardRef, useRef, useContext } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, isHarmony } from './utils'
 import { SwiperContext } from './context'
 
 interface SwiperItemProps {
@@ -73,7 +73,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     'style'
   ], { layoutRef })
   const itemAnimatedStyle = useAnimatedStyle(() => {
-    if (!step.value) return {}
+    if (!step.value && !isHarmony) return {}
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
     // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现

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

@@ -55,6 +55,7 @@ interface SwiperProps {
   'parent-width'?: number;
   'parent-height'?: number;
   'external-var-context'?: Record<string, any>;
+  disableGesture?: boolean;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 
@@ -136,7 +137,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'external-var-context': externalVarContext,
     style = {},
     autoplay = false,
-    circular = false
+    circular = false,
+    disableGesture = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -730,7 +732,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     </View>)
   }
 
-  if (children.length === 1) {
+  if (children.length === 1 || disableGesture) {
     return renderSwiper()
   } else {
     return (<GestureDetector gesture={gestureHandler}>

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

@@ -123,7 +123,10 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const navigation = useNavigation()
 
   useEffect(() => {
-    const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    let beforeRemoveSubscription:any
+    if (__mpx_mode__ !== 'ios') {
+      beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    }
     return () => {
       if (isFunction(beforeRemoveSubscription)) {
         beforeRemoveSubscription()

package/lib/runtime/components/web/mpx-titlebar.vue

@@ -0,0 +1,243 @@
+<script>
+import mpx from '@mpxjs/core'
+export default {
+  name: 'mpx-titlebar',
+  props: {
+    // 来自 app.json 中 window 的 titlebar 相关配置
+    windowConfig: {
+      type: Object,
+      default: () => global.__mpxPageConfig
+    },
+    // 来自 页面 json 中的 titlebar 相关配置，会覆盖 windowConfig
+    pageConfig: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
+    cfg () {
+      return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
+    },
+    // 标题文本（兼容常见字段名）
+    titleText () {
+      return this.cfg.navigationBarTitleText || this.cfg.title || ''
+    },
+    // 背景色（兼容常见字段）
+    backgroundColor () {
+      return this.cfg.navigationBarBackgroundColor || '#ffffff'
+    },
+    // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
+    textColor () {
+      const style = this.cfg.navigationBarTextStyle || 'black'
+      return style === 'white' ? '#ffffff' : '#000000'
+    },
+    // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
+    navigationStyle () {
+      return this.cfg.navigationStyle || 'default'
+    },
+    // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
+    hidden () {
+      return mpx.config?.webConfig?.enableTitleBar !== true || this.navigationStyle === 'custom'
+    },
+    // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
+    showBack () {
+      console.log('showBack', this.$router.stack.length)
+      try {
+        return this.$router.stack.length > 1
+      } catch (e) {
+        return false
+      }
+    },
+    // safe area 顶部 padding，使用 env(safe-area-inset-top)
+    safeStyle () {
+      // 多数浏览器支持 env(), 为兼容也使用 constant() 备选（旧 iOS Safari）
+      return {
+        paddingTop: 'env(safe-area-inset-top, 0px)'
+      }
+    },
+    // 内部标题栏高度（遵循小程序常见平台差异）
+    innerHeight () {
+      const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
+      return (isIOS ? 44 : 48) + 'px'
+    },
+    rootStyle () {
+      return {
+        background: this.backgroundColor,
+        color: this.textColor
+      }
+    },
+    innerStyle () {
+      return {
+        height: this.innerHeight
+      }
+    }
+    ,
+    // content wrapper style: padding-top to avoid being covered by fixed titlebar
+    contentStyle () {
+      // use calc to combine innerHeight and safe-area inset
+      return {
+        paddingTop: this.hidden ? '0px' : `calc(${this.innerHeight} + env(safe-area-inset-top, 0px))`,
+        // create its own layer to avoid overlapping issues
+        transform: 'translateZ(0)',
+        willChange: 'transform'
+      }
+    }
+  },
+  methods: {
+    // 左侧点击：派发事件并在可回退时回退
+    onLeftClick (e) {
+      this.$emit('click-left', e)
+      if (this.showBack) {
+        try { window.history.back() } catch (err) {}
+      }
+    }
+  },
+  render (h) {
+    const leftChildren = []
+
+    // default back button (SVG) — no left slot support
+    if (this.showBack) {
+      leftChildren.push(
+        h('button', {
+          class: 'mpx-titlebar__back',
+          attrs: { 'aria-label': 'back', type: 'button' }
+        }, [
+          h('svg', {
+            attrs: {
+              viewBox: '0 0 24 24',
+              width: '20',
+              height: '20',
+              fill: 'none',
+              xmlns: 'http://www.w3.org/2000/svg',
+              focusable: 'false',
+              'aria-hidden': 'true'
+            }
+          }, [
+            h('path', {
+              attrs: {
+                d: 'M15 18l-6-6 6-6',
+                stroke: 'currentColor',
+                'stroke-width': '2',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round'
+              }
+            })
+          ])
+        ])
+      )
+    }
+
+    // center shows title; only default slot (page content) is supported
+    const centerChildren = [
+      h('div', { class: 'mpx-titlebar__title', style: { color: this.textColor } }, [this.titleText])
+    ]
+
+  // top-level wrapper: contains fixed titlebar and page content wrapper
+  return h('page', { class: 'mpx-titlebar-wrapper' }, [
+      // fixed titlebar
+      h('div', {
+        class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
+        style: this.rootStyle
+      }, [
+        h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
+          h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
+              h('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
+              h('div', { class: 'mpx-titlebar__center' }, centerChildren),
+              h('div', { class: 'mpx-titlebar__right' }, [])
+          ])
+        ])
+      ]),
+
+      // page content wrapper: default slot is page content
+      h('div', { class: 'mpx-titlebar__content', style: this.contentStyle }, this.$slots.default || [])
+    ])
+  }
+}
+</script>
+
+<style scoped>
+.mpx-titlebar {
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+.mpx-titlebar--hidden {
+  display: none;
+}
+.mpx-titlebar__safe {
+  /* safe area handled by padding-top; include both env and constant for broader iOS support */
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-top: constant(safe-area-inset-top, 0px);
+}
+.mpx-titlebar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+.mpx-titlebar__left,
+.mpx-titlebar__right {
+  flex: 0 0 auto;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+}
+.mpx-titlebar__center {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 8px;
+}
+.mpx-titlebar__title {
+  font-size: 17px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
+.mpx-titlebar__back {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: inherit;
+  padding: 6px;
+  cursor: pointer;
+}
+
+/* wrapper and content layout */
+.mpx-titlebar-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.mpx-titlebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000; /* ensure above page content */
+}
+
+.mpx-titlebar__content {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+/* SVG icon sizing and inherit color */
+.mpx-titlebar__back svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.mpx-titlebar__back path {
+  stroke: currentColor;
+}
+</style>

package/lib/template-compiler/compiler.js

@@ -2476,7 +2476,14 @@ function getVirtualHostRoot (options, meta) {
       }
     }
     if (isWeb(mode) && ctorType === 'page') {
-      return createASTElement('page')
+      const rootView = createASTElement('mpx-titlebar', [
+        {
+          name: 'pageConfig',
+          value: '{{ this.$options.__mpxPageConfig }}'
+        }
+      ])
+      processElement(rootView, rootView, options, meta)
+      return rootView
     }
   }
   return getTempNode()

package/lib/web/processMainScript.js

@@ -60,7 +60,9 @@ Vue.use(VueRouter)\n`
     globalTabBar
   })
 
-  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
+  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default;\n`
+
+  output += `Vue.component('mpx-titlebar', require(${stringifyRequest(loaderContext, normalize.lib('runtime/components/web/mpx-titlebar.vue'))}).default);\n`
 
   output += `
 export default processAppOption({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.3-beta.1",
+  "version": "2.10.3-beta.10",
   "description": "mpx compile core",
   "keywords": [
     "mpx"