feat: 定义事件回调

src/plugin/components/custom/index.tsx

@@ -1,3 +1,4 @@
+import Taro, { useLoad, useReady, useUnload } from '@tarojs/taro'
 import { PropsWithChildren, useState } from 'react'
 import { View, Video, Navigator } from '@tarojs/components'
 import useGetCustomClient from '@/hooks/useGetCustomClient'
@@ -6,30 +7,67 @@ import './index.less'
 const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
 const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4'
 
-function PqCustom({ width, zIndex }: PropsWithChildren<CustomPropsType>) {
-  function onClick() {
+// 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
+let loadedMetaFiredInOnce = 0
+let durationTime = 0
+
+const noop = () => {}
+
+function PqCustom({
+  width, zIndex, onLoad = noop, onView = noop, onClick = noop, onClose = noop, onError = noop
+}: PropsWithChildren<CustomPropsType>) {
+  const [show, setShow] = useState(true)
+
+  function clickCustom() {
+    onClick()
+    closeCustom()
+  }
+
+  function closeCustom() {
+    onClose()
+    // setShow(false)
+  }
+
+  function clickMask() {
+    closeCustom()
   }
 
   return (
-    <View className='pq-custom' onClick={onClick}>
-      <View className='custom-container'>
-        <View className='icon' style={{zIndex: (zIndex || 1) + 1}}>
-          广告
-        </View>
-        <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}}>
-        </View>
+    <>
+      {show && <View className='pq-custom' onClick={clickMask}>
+        <View className='custom-container'>
+          <View className='icon' style={{zIndex: (zIndex || 1) + 1}}>
+            广告
+          </View>
+          <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}} onClick={closeCustom}>
+          </View>
 
-        <Navigator url={WEB_VIEW_URL}>
-          <Custom width={width} zIndex={zIndex} />
-        </Navigator>
-      </View>
-    </View>
+          <Navigator url={WEB_VIEW_URL}>
+            <Custom
+              width={width}
+              zIndex={zIndex}
+              onClick={clickCustom}
+              onLoad={onLoad}
+              onView={onView}
+              onError={onError}
+            />
+          </Navigator>
+        </View>
+      </View>}
+    </>
   )
 }
 
-function Custom({ width, zIndex }) {
+function Custom({ width, zIndex, onClick, onLoad, onView, onError }) {
   const [style, setStyle] = useState({ width: '0px', height: 'px', zIndex })
 
+  useReady(() => {
+    loadedMetaFiredInOnce = 0
+    durationTime = 0
+
+    observerAdCustom()
+  })
+
   useGetCustomClient((customClient) => {
     let clientWidth = customClient.width
     let clientHeight = customClient.height
@@ -44,9 +82,46 @@ function Custom({ width, zIndex }) {
       height: `${clientHeight}px`
     })
   })
+
+  // TODO: 监听无效 需要再想别的办法
+  function observerAdCustom() {
+    const viewObserver = Taro.createIntersectionObserver(PqCustom, { 
+      thresholds: [0, 0.5]
+    }).relativeToViewport()
+
+    console.log(viewObserver)
+
+    viewObserver.observe('#pq-custom', res => {
+        const { intersectionRatio } = res
+        if (intersectionRatio >= 0.5) {
+          console.log('onView')
+            onView()
+            viewObserver.disconnect()
+        }
+    })
+  }
+
+  function onLoadedMetaData() {
+    if (loadedMetaFiredInOnce++ < 1) {
+      // 上报load
+      onLoad()
+    }
+  }
+  // 播放上报
+  function onPlay() {
+    console.log('onPlay')
+  }
+
+  // 播放进度，广告的整个生命周期中需要记录视频播放的进度
+  function onTimeUpdate(res) {
+    const { detail } = res
+    durationTime += (detail?.currentTime || 0)
+    console.log('onTimeUpdate', durationTime)
+  }
+
   return (
     <View className='custom' style={style}>
-      <Video className='custom-video' autoplay={false} controls={false} loop src={VIDEO_SRC} />
+      <Video id='pq-custom' className='custom-video' autoplay={false} controls={false} loop src={VIDEO_SRC} onClick={onClick} onLoadedMetaData={onLoadedMetaData} onPlay={onPlay} onTimeUpdate={onTimeUpdate} onError={onError}/>
     </View>
   )
 }

src/plugin/pages/customPage/index.tsx

@@ -27,7 +27,7 @@ function CustomPage() {
 
   const adInfo = {
     title: '添加官方客服微信',
-    image: 'http://rescdn.yishihui.com/ad/prod/image/logo_AD_1701757825_1701757825567.png'
+    image: 'https://img.jianyufu.com/uploadfile/20231208/591615452983762944.jpg'
   }
 
   const [isCustom, setIsCustom] = useState(false)
@@ -60,11 +60,11 @@ function CustomPage() {
   return (
     <View className='custom-page'>
       {/* 状态栏 */}
-      {/* {isCustom && <View className='status-bar' style={{ height: `${statusBarHeight}px`}}></View>} */}
+      {isCustom && <View className='status-bar' style={{ height: `${statusBarHeight}px`}}></View>}
       {/* 导航栏 */}
-      {/* {isCustom && <View className='nav-bar' style={navBarStyle} >
+      {isCustom && <View className='nav-bar' style={navBarStyle} >
         <View className='left-icon' onClick={navigateBack}></View>  
-      </View>} */}
+      </View>}
       {/* 页面 */}
       <Page styleSheet={styleSheet} adInfo={adInfo} />
     </View>
@@ -74,7 +74,7 @@ function CustomPage() {
 function Page({ styleSheet, adInfo }) {
   const pageStyle = {
     width: '100vw',
-    height: `calc(100vh)`,
+    height: `calc(100vh - ${getTopSafeHeight()}px)`,
     background: styleSheet.page.background,
     color: styleSheet.page.color
   }
@@ -85,7 +85,7 @@ function Page({ styleSheet, adInfo }) {
         <Text>{adInfo.title}</Text>
       </View>
       <View className='page-content' style={styleSheet.content}>
-        <Image className='page-image' src={adInfo.image} />
+        <Image className='page-image' src={adInfo.image} 	show-menu-by-longpress />
       </View>
       <View className='page-guide' style={styleSheet.guide}>