@conecli/cone-render 0.8.19-beta.0 → 0.8.19-beta.2

package/dist/common/index.weapp.ts

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    public config: object | null 
        this.config = {}
        console.log('=================>', 'updateBusinessDomainAndApi')
+import Taro from '@tarojs/taro'
  public config: {
    [key: string]: any
  } 
    this.config = {}
        console.log('=================>', 'updateBusinessDomainAndApi')
  
        setTimeout(() => {
          console.log("微信app登录返回成功后，后台会写入cookie，有延迟，这里延迟500ms去获取最新cookie")
          this.getLoginCookie(`${Date.now()}`)
        },500)
        this.getLoginCookie(`${Date.now()}`)
      setTimeout(() => {
        console.log("微信强制登录后，后台会写入cookie，有延迟，这里延迟500ms去获取最新cookie")
        this.getLoginCookie(`${Date.now()}`)
      },500)
    return new Promise((resolve) => {
      console.log("开始获取更新wxapp中的cookie信息", updateKey)
      if(this.config.wqCookie && this.config.wqCookieStr && this.config.getWqCookieKey === updateKey){
        console.log("已有存储wxapp中的cookie信息，直接返回",this.config)
        resolve({
          wqCookie: this.config.wqCookie,
          wqCookieStr: this.config.wqCookieStr,
        })
      }else {
        if (isPublishToWxapp) {
          const getWxappCookieObj = getTaroStorageKeyValue('cookies') || null
          if (getWxappCookieObj) {
            const getCookieObj = getWxappCookieObj['_data']
            const { wqCookie, wqCookieStr } = getWxAppCookieStr(getCookieObj)
            const { pin = '', visitkey = '-1', wq_unionid = '', wxapp_openid = '' } = wqCookie
            this.info.loginState = true
            this.info.userInfo.wqCookie = wqCookieStr
            this.info.userInfo.wqVisitkey = visitkey
            console.log('获取用户完整cookie信息', getCookieObj)
            const getUserAddress = this.wxAppUserInfoInstance.getAddress()
            console.log('获取微信用户地址信息', getUserAddress)
            if (getUserAddress) {
              this.info.pageInfo.address = getUserAddress?.areaId
              this.info.pageInfo.addressCommaStr = this.info.pageInfo
                .address
                ? this.info.pageInfo.address.replace(/_/g, ',')
                : ''
              this.info.pageInfo.un_area = this.info.pageInfo.address
              Taro.eventCenter.trigger(
                TaroEventType.USER_AREA_UPDATE,
                this.info.pageInfo.address,
              )
            }
            if(this.miniAppLogInstance){
              this.miniAppLogInstance.set({
                account: pin,
                unionid: wq_unionid,
                openid: wxapp_openid,
              })
            }
            this.config.wqCookie = wqCookie
            this.config.wqCookieStr = wqCookieStr
            this.config.getWqCookieKey = updateKey
            console.log("解析wxapp中的cookie信息成功，返回后存储",this.config)
            resolve({
              wqCookie,
              wqCookieStr,
            })
          }else {
            console.log("解析wxapp中的cookie信息异常，返回异常结果",this.config)
            resolve({
              wqCookie: false,
              wqCookieStr: false,
            })
          }
        }else {
          resolve({
            wqCookie: false,
            wqCookieStr: false,
          })
        }
      }
    })

package/dist/components/base/CustomVideo/index.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
      if (!isH5 || !ref.current) return
      playVideo()
      manualPauseStateRef.current = false
    }
      if (!isH5 || !ref.current) return
      pauseVideo()
      manualPauseStateRef.current = true
    }
    if (!isH5 || !ref.current) return
  }, [])
+import React, { useCallback, useEffect, useRef, useState } from 'react'
      if (!isH5 || !ref.current) return
      playVideo()
      manualPauseStateRef.current = false
    }
      if (!isH5 || !ref.current) return
      pauseVideo()
      manualPauseStateRef.current = true
    }
    if (!isH5 || !ref.current) return
  }, [])

package/dist/components/base/InOrOutViewObserver/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    const {
        children,
        inViewCallback,
        outViewCallback,
        threshold = 0
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const componentObserverRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                dealPageScrollInfo(res)
            })
            Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
                state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
            })
            return function cleanup() {
                Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
                    dealPageScrollInfo(res)
                })
                
                Taro.eventCenter.off(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
                    state === WEBVIEW_STATE.NOT_VISIBLE &&
                    handleInOrOutView(false)
                })
            }
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('app=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('app=>out可视区域')
            }
        }, [componentShowState])
        
        const handleInOrOutView = (type: boolean) => {
            componentShowStateRef.current = type
            setComponentShowState(type)
        }
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = res
            if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            if (componentObserverRef.current) {
                const eleClientRect =
                    componentObserverRef.current.getBoundingClientRect()
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                const eleHeight = Math.ceil(eleClientRect.height)
                console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
                if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
                    const isOutView = offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
                    handleInOrOutView(!isOutView)
                } else {
                    const isInView = (offSetY > eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold)) && (offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)))
                    handleInOrOutView(isInView)
                }
            }
        }
        return (
            <View ref={componentObserverRef}>
                {children}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold, 
            triggerOnce: false, 
            root: rootDom || null, 
            rootMargin: `0px 0px 0px 0px`, 
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('其他h5=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('其他h5=>out可视区域')
            }
        }, [inView])
        return (
            <View ref={ref}>
                {children}
            </View>
        )
    }
    children: null, 
    className: '',
    inViewCallback: null, 
    outViewCallback: null, 
    threshold: 0 
+import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const { children, inViewCallback, outViewCallback, threshold = 0 } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  if (isH5AndJdShopView) {
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('app=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('app=>out可视区域')
      }
    }, [componentShowState])
    
    const handleInOrOutView = (type: boolean) => {
      componentShowStateRef.current = type
      setComponentShowState(type)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      if (componentObserverRef.current) {
        const eleClientRect =
          componentObserverRef.current.getBoundingClientRect()
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        const eleHeight = Math.ceil(eleClientRect.height)
        console.log(
          '==========================eleOffsetTop, eleHeight',
          eleOffsetTop,
          eleHeight,
        )
        if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
          const isOutView =
            offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return <View ref={componentObserverRef}>{children}</View>
  } else {
    const rootDom = document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
    const { ref, inView } = useInView({
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('其他h5=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('其他h5=>out可视区域')
      }
    }, [inView])
    return <View ref={ref}>{children}</View>
  }
  children: null, 
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 

package/dist/components/base/InViewRender/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            if (componentLazyRef.current) {
                const eleClientRect =
                    componentLazyRef.current.getBoundingClientRect()
                const getContainerHeightOffSetY = res.displayHeight + res.offSetY
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold: 0,
            triggerOnce: true,
            root: rootDom || null,    
            rootMargin: `0px 0px 0px 0px`,  
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 其它H5 展示啦!')
            }
        }, [inView])
        return (
            <View
                ref={ref}
                style={{
                    minHeight: `${inView ? 'auto' : height + 'px'}`,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        placeholder,
        height,
        inViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const [componentRenderShowState, setComponentRenderShowState] =
        useState(false)
    const componentLazyRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                !componentShowStateRef.current && dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 店铺H5 展示啦!')
            }
        }, [componentShowState])
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
            if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            if (componentLazyRef.current) {
                const eleClientRect =
                    componentLazyRef.current.getBoundingClientRect()
                const getContainerHeightOffSetY = displayHeight + offSetY
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                if (!componentShowStateRef.current) {
                    if (getContainerHeightOffSetY > eleOffsetTop) {
                        componentShowStateRef.current = true
                        setComponentShowState(true)
                        Taro.nextTick(() => {
                            setComponentRenderShowState(true)
                        })
                    }
                }
            }
        }
        return (
            <View
                ref={componentLazyRef}
                className={classNames(
                    lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
                    'd-app-floor-lazy-load',
                )}
                style={{
                    minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
                        }`,
                    backgroundColor: componentRenderShowState
                        ? 'transparent'
                        : '#ffffff',
                }}
            >
                {componentShowState ? children : placeholder}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold: 0,
            triggerOnce: true,
            root: rootDom || null,    
            rootMargin: `0px 0px 0px 0px`,  
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('InViewRender -- 其它H5 展示啦!')
            }
        }, [inView])
        return (
            <View
                ref={ref}
                style={{
                    minHeight: `${inView ? 'auto' : height + 'px'}`,
                    backgroundColor: 'transparent',
                }}
            >
                {inView ? children : placeholder}
            </View>
        )
    }
    children: null, 
    placeholder: null, 
    height: 1, 
    className: '',
    lazyNodeClassName: '',
    inViewCallback: null,

package/dist/components/base/LazyLayoutLoad/index.tsx

@@ -1 +1 @@
-import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
    const rootDom = document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    useEffect(() => {
        if(componentShowState === true){
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState])
            ref={ref}
+import Taro, { useRouter } from '@tarojs/taro'
        floorData = {},
    const rootDom = document.querySelector('#J_shopHomeRoot')
        root: rootDom,    
        rootMargin: `0px 0px ${window.innerHeight}px 0px`,  
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    useEffect(() => {
        if(componentShowState === true){
            console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染！')
            const modularPackResult = floorData?.floorExtInfo?.modularPackResult
                nativePageRegisterMessage(
                    Message_Type.NATIVE_INJECT_JS_FILE,
                    {
                        data: {
                            "bundleUrl": [bundleUrl]
                        },
                    },
                )
            }
        }
    }, [componentShowState])
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
            ref={ref}