@mpxjs/webpack-plugin 2.9.69-beta.5 → 2.9.69-beta.7

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

@@ -1,8 +1,8 @@
-import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { AppState, View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
 import { GestureDetector, Gesture } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
-import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useCallback, useMemo } from 'react'
+import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
@@ -135,8 +135,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'parent-height': parentHeight,
     'external-var-context': externalVarContext,
     style = {},
-    autoplay,
-    circular
+    autoplay = false,
+    circular = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -160,15 +160,15 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   })
   const { textStyle } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
-  const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0
-  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0
-  const previousMarginShared = useSharedValue(preMargin)
+  const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) as number : 0
+  const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) as number : 0
+  const preMarginShared = useSharedValue(preMargin)
   const nextMarginShared = useSharedValue(nextMargin)
-  const autoplayShared = useSharedValue(autoplay || false)
+  const autoplayShared = useSharedValue(autoplay)
   // 默认前后补位的元素个数
   const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
   const patchElmNumShared = useSharedValue(patchElmNum)
-  const circularShared = useSharedValue(circular || false)
+  const circularShared = useSharedValue(circular)
   const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
   const childrenLength = useSharedValue(children.length)
@@ -195,6 +195,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTime = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  const appState = useRef(AppState.currentState)
   const {
     // 存储layout布局信息
     layoutRef,
@@ -312,9 +313,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     return (<SwiperContext.Provider value={contextValue}>{arrChildren}</SwiperContext.Provider>)
   }
 
-  const { loop, pauseLoop, resumeLoop} = useMemo(() => {
+  const { loop, pauseLoop, resumeLoop } = useMemo(() => {
     function createAutoPlay () {
-      if (!step.value) return
+      if (!step.value || appState.current !== 'active') return
       let targetOffset = 0
       let nextIndex = currentIndex.value
       if (!circularShared.value) {
@@ -324,7 +325,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           return
         }
         nextIndex += 1
-        // targetOffset = -nextIndex * step.value - previousMarginShared.value
+        // targetOffset = -nextIndex * step.value - preMarginShared.value
         targetOffset = -nextIndex * step.value
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
@@ -337,12 +338,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 默认向右, 向下
         if (nextIndex === childrenLength.value - 1) {
           nextIndex = 0
-          targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + previousMarginShared.value
+          targetOffset = -(childrenLength.value + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
           offset.value = withTiming(targetOffset, {
             duration: easeDuration
           }, () => {
-            const initOffset = -step.value * patchElmNumShared.value + previousMarginShared.value
+            const initOffset = -step.value * patchElmNumShared.value + preMarginShared.value
             // 将开始位置设置为真正的位置
             offset.value = initOffset
             currentIndex.value = nextIndex
@@ -350,7 +351,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           })
         } else {
           nextIndex = currentIndex.value + 1
-          targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + previousMarginShared.value
+          targetOffset = -(nextIndex + patchElmNumShared.value) * step.value + preMarginShared.value
           // 执行动画到下一帧
           offset.value = withTiming(targetOffset, {
             duration: easeDuration,
@@ -366,7 +367,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     // loop在JS线程中调用，createAutoPlay + useEffect中
     function loop () {
       timerId.current && clearTimeout(timerId.current)
-      timerId.current = setTimeout(createAutoPlay, intervalTimer)
+      if (appState.current === 'active') {
+        timerId.current = setTimeout(createAutoPlay, intervalTimer)
+      }
     }
 
     function pauseLoop () {
@@ -434,16 +437,30 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       runOnJS(handleSwiperChange)(newIndex)
     }
   })
+  // 监听切换前后台，默认切换到后台JS执行不会立即停止定时器还在
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      appState.current = nextAppState
+      if (nextAppState === 'active' && autoplayShared.value && childrenLength.value > 1) {
+        loop()
+      } else {
+        appState.current = nextAppState
+      }
+    })
+    return () => {
+      subscription.remove()
+    }
+  }, [])
 
   useEffect(() => {
     let patchStep = 0
-    if (preMargin !== previousMarginShared.value) {
-      patchStep += preMargin - previousMarginShared.value
+    if (preMargin !== preMarginShared.value) {
+      patchStep += preMargin - preMarginShared.value
     }
     if (nextMargin !== nextMarginShared.value) {
       patchStep += nextMargin - nextMarginShared.value
     }
-    previousMarginShared.value = preMargin
+    preMarginShared.value = preMargin
     nextMarginShared.value = nextMargin
     const newStep = step.value - patchStep
     if (step.value !== newStep) {
@@ -454,13 +471,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     childrenLength.value = children.length
+    pauseLoop()
     if (children.length - 1 < currentIndex.value) {
-      pauseLoop()
       currentIndex.value = 0
       offset.value = getOffset(0, step.value)
-      if (autoplay && children.length > 1) {
-        loop()
-      }
+    } else {
+      // children变化-其他属性都不变化（比如从1变化到3或者从3变到1， 在circular的情况下offset是需要更新的）
+      currentIndex.value = props.current || 0
+      offset.value = getOffset(props.current || 0, step.value)
+    }
+    if (autoplay && children.length > 1) {
+      loop()
     }
   }, [children.length])
 
@@ -469,7 +490,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [props.current])
 
   useEffect(() => {
-    autoplayShared.value = autoplay || false
+    autoplayShared.value = autoplay
     updateAutoplay()
     return () => {
       if (autoplay) {
@@ -480,7 +501,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     if (circular !== circularShared.value) {
-      circularShared.value = circular || false
+      circularShared.value = circular
       patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0
       offset.value = getOffset(currentIndex.value, step.value)
     }
@@ -497,7 +518,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       let isCriticalItem = false
       // 真实滚动到的偏移量坐标
       let moveToTargetPos = 0
-      const currentOffset = translation < 0 ? offset.value - previousMarginShared.value : offset.value + previousMarginShared.value
+      const currentOffset = translation < 0 ? offset.value - preMarginShared.value : offset.value + preMarginShared.value
       const computedIndex = Math.abs(currentOffset) / step.value
       const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
       // 实际应该定位的索引值
@@ -507,17 +528,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       } else {
         if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
           selectedIndex = moveToIndex - (childrenLength.value + patchElmNumShared.value)
-          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
           isCriticalItem = true
         } else if (moveToIndex <= patchElmNumShared.value - 1) {
           selectedIndex = moveToIndex === 0 ? childrenLength.value - patchElmNumShared.value : childrenLength.value - 1
-          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - previousMarginShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          resetOffsetPos = (selectedIndex + patchElmNumShared.value) * step.value - preMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
           isCriticalItem = true
         } else {
           selectedIndex = moveToIndex - patchElmNumShared.value
-          moveToTargetPos = moveToIndex * step.value - previousMarginShared.value
+          moveToTargetPos = moveToIndex * step.value - preMarginShared.value
         }
       }
       return {
@@ -573,11 +594,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
       let currentOffset = Math.abs(offset.value)
       if (circularShared.value) {
-        currentOffset += translation < 0 ? previousMarginShared.value : -previousMarginShared.value
+        currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value
       }
       const curIndex = currentOffset / step.value
       const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value
-      const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? previousMarginShared.value : 0)
+      const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0)
       offset.value = withTiming(targetOffset, {
         duration: easeDuration,
         easing: easeMap[easeingFunc]
@@ -593,7 +614,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
       if (circularShared.value) {
-        preOffset -= previousMarginShared.value
+        preOffset -= preMarginShared.value
       }
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
@@ -611,7 +632,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 移动的距离
       const { translation } = eventData
       const elementsLength = step.value * childrenLength.value
-  
       let isBoundary = false
       let resetOffset = 0
       // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
@@ -678,7 +698,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       })
       .onTouchesUp((e) => {
         'worklet'
-        if(touchfinish.value) return
+        if (touchfinish.value) return
         const touchEventData = e.changedTouches[0]
         const moveDistance = touchEventData[strAbso] - moveTranstion.value
         touchfinish.value = true

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

@@ -5,8 +5,8 @@ import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage } from './utils'
+import { WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewHttpErrorEvent, WebViewEvent } from 'react-native-webview/lib/WebViewTypes'
 import { useNavigation } from '@react-navigation/native'
 import { RouteContext } from './context'
 import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native'
@@ -99,6 +99,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const [pageLoadErr, setPageLoadErr] = useState<boolean>(false)
   const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
   const webViewRef = useRef<WebView>(null)
+  const isLoaded = useRef<boolean>(false)
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -151,28 +152,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     return null
   }
 
-  const _load = function (res: WebViewNavigationEvent) {
-    const result = {
-      type: 'load',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: res.nativeEvent?.url
-      }
-    }
-    bindload?.(result)
-  }
-  const _error = function (res: WebViewErrorEvent) {
-    setPageLoadErr(true)
-    const result = {
-      type: 'error',
-      timeStamp: res.timeStamp,
-      detail: {
-        src: ''
-      }
-    }
-    binderror && binderror(result)
-  }
-
   const _reload = function () {
     setPageLoadErr(false)
   }
@@ -307,17 +286,51 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       }
     })
   }
-  const events = {}
 
-  if (bindload) {
-    extendObject(events, {
-      onLoad: _load
-    })
+  let isLoadError = false
+  let fristLoaded = false
+  let statusCode: string | number = ''
+  const onLoadEnd = function (res: WebViewEvent) {
+    fristLoaded = true
+    isLoaded.current = true
+    const src = res.nativeEvent?.url
+    if (isLoadError) {
+      isLoadError = false
+      isNavigateBack.current = false
+      const result = {
+        type: 'error',
+        timeStamp: res.timeStamp,
+        detail: {
+          src,
+          statusCode
+        }
+      }
+      binderror && binderror(result)
+    } else {
+      const result = {
+        type: 'load',
+        timeStamp: res.timeStamp,
+        detail: {
+          src
+        }
+      }
+      bindload?.(result)
+    }
+  }
+  const onHttpError = function (res: WebViewHttpErrorEvent) {
+    isLoadError = true
+    statusCode = res.nativeEvent?.statusCode
+  }
+  const onError = function () {
+    statusCode = ''
+    isLoadError = true
+    if (!fristLoaded) {
+      setPageLoadErr(true)
+    }
+  }
+  const onLoadStart = function () {
+    isLoaded.current = false
   }
-
-  extendObject(events, {
-    onError: _error
-  })
 
   return (
       <Portal key={pageLoadErr ? 'error' : 'webview'}>
@@ -329,17 +342,21 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             </View>
             )
           : (<WebView
-        style={defaultWebViewStyle}
-        source={{ uri: src }}
-        ref={webViewRef}
-        javaScriptEnabled={true}
-        onNavigationStateChange={_changeUrl}
-        onMessage={_message}
-        injectedJavaScript={injectedJavaScript}
-        onLoadProgress={_onLoadProgress}
-        allowsBackForwardNavigationGestures={true}
-        {...events}
-      ></WebView>)}
+            style={ defaultWebViewStyle }
+            source={{ uri: src }}
+            pointerEvents={ isLoaded ? 'auto' : 'none' }
+            ref={webViewRef}
+            javaScriptEnabled={true}
+            onNavigationStateChange={_changeUrl}
+            onMessage={_message}
+            injectedJavaScript={injectedJavaScript}
+            onLoadProgress={_onLoadProgress}
+            onLoadEnd={onLoadEnd}
+            onHttpError={onHttpError}
+            onError={onError}
+            onLoadStart={onLoadStart}
+            allowsBackForwardNavigationGestures={true}
+          ></WebView>)}
       </Portal>
   )
 })

package/package.json

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