@mpxjs/webpack-plugin 2.10.15-5 → 2.10.15

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

@@ -194,6 +194,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
+  const isContentSizeChange = useRef(false)
+
   const { refresherContent, otherContent } = getRefresherContent(props.children)
   const hasRefresher = refresherContent && refresherEnabled
 
@@ -379,7 +381,22 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }
 
   function onContentSizeChange (width: number, height: number) {
-    scrollOptions.current.contentLength = selectLength({ height, width })
+    isContentSizeChange.current = true
+    const newContentLength = selectLength({ height, width })
+    const oldContentLength = scrollOptions.current.contentLength
+    scrollOptions.current.contentLength = newContentLength
+    // 内容高度变化时，Animated.event 的映射可能会有不生效的场景，所以需要手动设置一下 scrollOffset 的值
+    if (enableSticky && (__mpx_mode__ === 'android' || __mpx_mode__ === 'ios')) {
+      // 当内容变少时，检查当前滚动位置是否超出新的内容范围
+      if (newContentLength < oldContentLength) {
+        const { visibleLength, offset } = scrollOptions.current
+        const maxOffset = Math.max(0, newContentLength - visibleLength)
+        // 如果当前滚动位置超出了新的内容范围，调整滚动offset
+        if (offset > maxOffset && scrollY) {
+          scrollOffset.setValue(maxOffset)
+        }
+      }
+    }
   }
 
   function onLayout (e: LayoutChangeEvent) {
@@ -402,8 +419,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscroll } = props
-    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
-    const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent
+    const { x: scrollLeft, y: scrollTop } = contentOffset
+    const { width: scrollWidth, height: scrollHeight } = contentSize
     isAtTop.value = scrollTop <= 0
     bindscroll &&
       bindscroll(
@@ -414,7 +432,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollHeight,
             scrollWidth,
             deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-            deltaY: scrollTop - scrollOptions.current.scrollTop
+            deltaY: scrollTop - scrollOptions.current.scrollTop,
+            layoutMeasurement
           },
           layoutRef
         }, props)
@@ -429,8 +448,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscrollend } = props
-    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
-    const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent
+    const { x: scrollLeft, y: scrollTop } = contentOffset
+    const { width: scrollWidth, height: scrollHeight } = contentSize
     isAtTop.value = scrollTop <= 0
     bindscrollend &&
       bindscrollend(
@@ -439,7 +459,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
             scrollLeft,
             scrollTop,
             scrollHeight,
-            scrollWidth
+            scrollWidth,
+            layoutMeasurement
           },
           layoutRef
         }, props)
@@ -494,6 +515,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     {
       useNativeDriver: true,
       listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const y = event.nativeEvent.contentOffset.y || 0
+        // 内容高度变化时，鸿蒙中 listener 回调通过scrollOffset.__getValue获取值一直等于event.nativeEvent.contentOffset.y，值是正确的，但是无法触发 sticky 动画执行，所以需要手动再 set 一次
+        if (__mpx_mode__ === 'harmony') {
+          if (isContentSizeChange.current) {
+            scrollOffset.setValue(y)
+            setTimeout(() => {
+              isContentSizeChange.current = false
+            }, 100)
+          }
+        }
         onScroll(event)
       }
     }
@@ -702,6 +733,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       showsVerticalScrollIndicator: scrollY && showScrollbar,
       scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
       bounces: false,
+      overScrollMode: 'never',
       ref: scrollViewRef,
       onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,

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

@@ -207,8 +207,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
   const touchfinish = useSharedValue(true)
-  // 记录onUpdate时的方向，用于进行onFinalize中的值修正
-  const preUpdateTransDir = useSharedValue(0)
   // 记录上一帧的绝对定位坐标
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -431,9 +429,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [])
 
-  function handleSwiperChange (current: number) {
-    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-    bindchange && bindchange(eventData)
+  function handleSwiperChange (current: number, pCurrent: number) {
+    if (pCurrent !== currentIndex.value) {
+      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+      bindchange && bindchange(eventData)
+    }
   }
 
   const runOnJSCallbackRef = useRef({
@@ -482,7 +482,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
+    if (newIndex !== preIndex && bindchange) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
@@ -517,9 +517,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [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])
@@ -757,7 +757,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           translation: moveDistance,
           transdir: moveDistance
         }
-        preUpdateTransDir.value = moveDistance
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
         const { half } = computeHalf(eventData)
         if (childrenLength.value > 1 && half) {
@@ -795,17 +794,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         'worklet'
         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/mpx-web-view.tsx

@@ -76,6 +76,7 @@ const styles = StyleSheet.create({
     borderRadius: 10
   }
 })
+
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
@@ -126,10 +127,27 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     style: defaultWebViewStyle
   })
 
+  const hostValidate = (url: string) => {
+    const host = url && new URL(url).host
+    const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || []
+    if (hostWhitelists.length) {
+      return hostWhitelists.some((item: string) => {
+        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 // 安卓需要重新设置
@@ -182,6 +200,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
   }
   const _message = function (res: WebViewMessageEvent) {
+    if (!hostValidate(res.nativeEvent?.url)) {
+      return
+    }
     let data: MessageData = {}
     let asyncCallback
     const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
@@ -232,7 +253,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         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))
           } else {

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

@@ -84,12 +84,16 @@ interface ExtendedNativeTouchEvent extends NativeTouchEvent {
   _stoppedEventTypes?: Set<string>
 }
 
+interface GlobalEventState {
+  needPress: boolean
+  identifier: null | number
+}
+
 export {
   NativeTouchEvent,
   Props,
   AdditionalProps,
   RemoveProps,
-  UseInnerPropsConfig,
   InnerRef,
   LayoutRef,
   PropsRef,
@@ -98,5 +102,6 @@ export {
   ExtendedNativeTouchEvent,
   EventConfig,
   RawConfig,
-  EventType
+  EventType,
+  GlobalEventState
 }

package/lib/runtime/components/web/mpx-movable-area.vue

@@ -1,21 +1,23 @@
 <template>
-    <div class="mpx-movable-area-container" ref="movableArea">
-        <div class="mpx-movable-scroll-wrapper" ref="scroll">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-area-container" ref="movableArea">
+    <div class="mpx-movable-scroll-wrapper" ref="scroll">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
   export default {
-    data () {
-      return {}
+    data() {
+      return {
+        isInited: false,
+      }
     },
-    mounted () {
+    mounted() {
       this.computedStyle()
-    },
-    beforeDestroy () {
-
+      if (!this.closeResizeObserver) {
+        this.createResizeObserver()
+      }
     },
     methods: {
       computedStyle() {
@@ -26,17 +28,39 @@
         if (!style.height) {
           this.$refs.movableArea.style.height = '10px'
         }
+      },
+      createResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.isInited) {
+              this.isInited = true
+              return
+            }
+            this.$children.forEach(child => {
+              if (child && child.refresh) {
+                child.refresh()
+              }
+            })
+          })
+          this.resizeObserver.observe(this.$refs.movableArea)
+        }
+      },
+    },
+    beforeDestroy () {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
       }
-    }
+    },
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-area-container
-        position: absolute
-        .mpx-movable-scroll-wrapper
-            position: absolute
-            top: 0
-            left: 0
-            bottom: 0
-            right: 0
+  .mpx-movable-area-container
+      position: relative
+      .mpx-movable-scroll-wrapper
+          position: absolute
+          top: 0
+          left: 0
+          bottom: 0
+          right: 0
 </style>

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -38,7 +38,13 @@ export default {
       touchEvent: '',
       isInited: false,
       deactivatedX: 0,
-      deactivatedY: 0
+      deactivatedY: 0,
+      // 缓存高度，用于检测变化
+      cachedContentHeight: 0,
+      cachedWrapperHeight: 0,
+      // 缓存宽度，用于检测变化
+      cachedContentWidth: 0,
+      cachedWrapperWidth: 0
     }
   },
   props: {
@@ -107,7 +113,24 @@ export default {
   },
   watch: {
     x (newVal) {
+      if (this.direction === 'vertical' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查宽度是否发生变化，只有在变化时才调用 refresh
+      const widthChanged = this.checkWidthChange()
+      let currentX = this.bs.x
+      
+      if (widthChanged) {
+        // 兼容容器尺寸变化且同时改变x的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollX, maxScrollX 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器宽度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.x !== currentX) {
+          this.bs.scrollTo(currentX, this.bs.y, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollX) {
         newVal = this.bs.minScrollX
       }
@@ -118,7 +141,24 @@ export default {
       this.bs.scrollTo(newVal, this.bs.y, this.speed)
     },
     y (newVal) {
+      if (this.direction === 'horizontal' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查高度是否发生变化，只有在变化时才调用 refresh
+      const heightChanged = this.checkHeightChange()
+      let currentY = this.bs.y
+      
+      if (heightChanged) {
+        // 兼容容器尺寸变化且同时改变y的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollY, maxScrollY 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器高度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.y !== currentY) {
+          this.bs.scrollTo(this.bs.x, currentY, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollY) {
         newVal = this.bs.minScrollY
       }
@@ -146,6 +186,10 @@ export default {
     if (!this.scrollOptions.closeResizeObserver) {
       this.createResizeObserver()
     }
+    // 初始化尺寸缓存
+    this.$nextTick(() => {
+      this.initSizeCache()
+    })
     this.init()
   },
   activated () {
@@ -178,13 +222,50 @@ export default {
           }
           this.refresh()
         })
-        const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-        elementToObserve && this.resizeObserver.observe(elementToObserve)
+        this.resizeObserver.observe(this.$refs.scrollContent)
       }
     },
     refresh () {
       this.bs && this.bs.refresh()
     },
+    // 检查高度是否发生变化
+    checkHeightChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentHeight = this.$refs.scrollContent.clientHeight
+      const currentWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+      
+      const heightChanged = 
+        currentContentHeight !== this.cachedContentHeight || 
+        currentWrapperHeight !== this.cachedWrapperHeight
+      
+      // 更新缓存的高度
+      this.cachedContentHeight = currentContentHeight
+      this.cachedWrapperHeight = currentWrapperHeight
+      
+      return heightChanged
+    },
+    // 检查宽度是否发生变化
+    checkWidthChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentWidth = this.$refs.scrollContent.clientWidth
+      const currentWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      
+      const widthChanged = 
+        currentContentWidth !== this.cachedContentWidth || 
+        currentWrapperWidth !== this.cachedWrapperWidth
+      
+      // 更新缓存的宽度
+      this.cachedContentWidth = currentContentWidth
+      this.cachedWrapperWidth = currentWrapperWidth
+      
+      return widthChanged
+    },
     destroyBs () {
       if (!this.bs) return
       this.bs.destroy()
@@ -364,6 +445,15 @@ export default {
       }
       extend(this.bsOptions, this.scrollOptions)
     },
+    // 初始化尺寸缓存
+    initSizeCache () {
+      if (this.$refs.scrollContent && this.$parent.$refs.movableArea) {
+        this.cachedContentHeight = this.$refs.scrollContent.clientHeight
+        this.cachedWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+        this.cachedContentWidth = this.$refs.scrollContent.clientWidth
+        this.cachedWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      }
+    },
     // 处理小数点，四舍五入，默认保留一位小数
     roundFun (value, n = 1) {
       return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)

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

@@ -256,8 +256,7 @@
             }
             this.initBs()
           })
-          const elementToObserve = document.querySelector('.mpx-swiper');
-          this.resizeObserver.observe(elementToObserve);
+          this.resizeObserver.observe(this.$refs.wrapper);
         }
       },
       refresh () {

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

@@ -124,7 +124,7 @@ export default {
         case 'postMessage':
           let data = {
             type: 'message',
-            data: params[0]?.data
+            data: params[0]?.data || params[0] // 补充兜底逻辑
           }
           this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
           asyncCallback = Promise.resolve({
@@ -148,7 +148,7 @@ export default {
           break
         default:
           if (type) {
-            const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+            const implement = mpx.config.webConfig?.webviewConfig?.apiImplementations?.[type]
             if (isFunction(implement)) {
               asyncCallback = Promise.resolve(implement(...params))
             } else {
@@ -174,7 +174,7 @@ export default {
       })
     },
     hostValidate (host) {
-      const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
+      const hostWhitelists = mpx.config.webConfig?.webviewConfig?.hostWhitelists || []
       if (hostWhitelists.length) {
         return hostWhitelists.some((item) => {
           return host.endsWith(item)

package/lib/template-compiler/compiler.js

@@ -1333,8 +1333,35 @@ function processEventReact (el, options) {
   // }
 }
 
+function isNeedBind (configs, isProxy) {
+  if (isProxy) return true
+  if (configs.length > 1) return true
+  if (configs.length === 1) return configs[0].hasArgs
+  return false
+}
+
+function processEventBinding (el, configs) {
+  let resultName
+  configs.forEach(({ name }) => {
+    if (name) {
+      // 清空原始事件绑定
+      let has
+      do {
+        has = getAndRemoveAttr(el, name).has
+      } while (has)
+
+      if (!resultName) {
+        // 清除修饰符
+        resultName = name.replace(/\..*/, '')
+      }
+    }
+  })
+  return { resultName }
+}
+
 function processEvent (el, options) {
   const eventConfigMap = {}
+  const finalEventsMap = {}
   el.attrsList.forEach(function ({ name, value }) {
     const parsedEvent = config[mode].event.parseEvent(name)
 
@@ -1346,12 +1373,15 @@ function processEvent (el, options) {
       const extraStr = runtimeCompile && prefix === 'catch' ? `, "__mpx_${prefix}"` : ''
       const parsedFunc = parseFuncStr(value, extraStr)
       if (parsedFunc) {
+        const isCapture = /^capture/.test(prefix)
         if (!eventConfigMap[type]) {
           eventConfigMap[type] = {
-            configs: []
+            configs: [],
+            captureConfigs: []
           }
         }
-        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
+        const targetConfigs = isCapture ? eventConfigMap[type].captureConfigs : eventConfigMap[type].configs
+        targetConfigs.push(Object.assign({ name }, parsedFunc))
         if (modifiers.indexOf('proxy') > -1 || options.forceProxyEvent) {
           eventConfigMap[type].proxy = true
         }
@@ -1393,57 +1423,57 @@ function processEvent (el, options) {
   }
 
   for (const type in eventConfigMap) {
-    let needBind = false
-    const { configs, proxy } = eventConfigMap[type]
-    delete eventConfigMap[type]
-    if (proxy) {
-      needBind = true
-    } else if (configs.length > 1) {
-      needBind = true
-    } else if (configs.length === 1) {
-      needBind = !!configs[0].hasArgs
-    }
+    const { configs = [], captureConfigs = [], proxy } = eventConfigMap[type]
+
+    let needBubblingBind = isNeedBind(configs, proxy)
+    let needCaptureBind = isNeedBind(captureConfigs, proxy)
 
     const escapedType = dash2hump(type)
     // 排除特殊情况
     if (!isValidIdentifierStr(escapedType)) {
       warn$1(`EventName ${type} which need be framework proxy processed must be a valid identifier!`)
-      needBind = false
+      needBubblingBind = false
+      needCaptureBind = false
     }
 
-    if (needBind) {
-      let resultName
-      configs.forEach(({ name }) => {
-        if (name) {
-          // 清空原始事件绑定
-          let has
-          do {
-            has = getAndRemoveAttr(el, name).has
-          } while (has)
+    if (needBubblingBind) {
+      const { resultName } = processEventBinding(el, configs)
 
-          if (!resultName) {
-            // 清除修饰符
-            resultName = name.replace(/\..*/, '')
-          }
+      addAttrs(el, [
+        {
+          name: resultName || config[mode].event.getEvent(type),
+          value: '__invoke'
         }
+      ])
+      if (!finalEventsMap.bubble) {
+        finalEventsMap.bubble = {}
+      }
+      finalEventsMap.bubble[escapedType] = configs.map((item) => {
+        return item.expStr
       })
+    }
 
+    if (needCaptureBind) {
+      const { resultName } = processEventBinding(el, captureConfigs)
       addAttrs(el, [
         {
           name: resultName || config[mode].event.getEvent(type),
-          value: '__invoke'
+          value: '__captureInvoke'
         }
       ])
-      eventConfigMap[escapedType] = configs.map((item) => {
+      if (!finalEventsMap.capture) {
+        finalEventsMap.capture = {}
+      }
+      finalEventsMap.capture[escapedType] = captureConfigs.map((item) => {
         return item.expStr
       })
     }
   }
 
-  if (!isEmptyObject(eventConfigMap)) {
+  if (!isEmptyObject(finalEventsMap)) {
     addAttrs(el, [{
       name: 'data-eventconfigs',
-      value: `{{${shallowStringify(eventConfigMap, true)}}}`
+      value: `{{${shallowStringify(finalEventsMap, true)}}}`
     }])
   }
 }
@@ -2737,8 +2767,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
+    processStyleReact(el, options)
     if (!pass) {
-      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

package/lib/wxss/utils.js

@@ -1052,7 +1052,7 @@ function getModuleCode (
         `@import url(${url});`
       )}${printedParam.length > 0 ? `, ${printedParam}` : ''}]);\n`
     } else {
-      // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止使用 WebPack 的默认解析规则，此时 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
+      // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止使用 webpack 的默认解析规则，此时 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
       const printedParam = printParams(media, dedupe, supports, layer)
       const otherParams = printedParam.length > 0 ? printedParam : ''
       beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, '@import "' + ${item.importName} + '";', ${JSON.stringify(otherParams)} ]);\n`