feat: 完成插件部分定义

src/hooks/useGetCustomClient.ts

@@ -0,0 +1,40 @@
+import Taro, { useReady } from '@tarojs/taro'
+
+// 可视区域定义 安全距离 减去 头部状态栏 和 导航栏的高度
+async function useGetCustomClient(cb) {
+  useReady(() => {
+    const topSpaceHeight = getTopSafeHeight()
+    const systemInfo = Taro.getSystemInfoSync()
+    const { safeArea = { height: 0 }, windowHeight } = systemInfo
+    let height = 0
+
+    if (safeArea.height) {
+      height = safeArea.height - topSpaceHeight
+    } else {
+      height = windowHeight - topSpaceHeight
+    }
+
+    height *= 0.75
+
+    const width = height * 375 / 667
+
+    cb({ width, height})
+    
+  })
+}
+
+function getTopSafeHeight() {
+    // 状态栏 刘海屏
+    const systemInfo = Taro.getSystemInfoSync()
+    const { statusBarHeight = 0 } = systemInfo
+    // 胶囊信息
+    const menuInfo = Taro.getMenuButtonBoundingClientRect()
+    // 导航高度固定 44px
+    let navigationBarHeight = (menuInfo.top - statusBarHeight) * 2 + menuInfo.height
+
+    navigationBarHeight = Math.min(44, navigationBarHeight)
+
+    return navigationBarHeight + statusBarHeight
+}
+
+export default useGetCustomClient

src/plugin/components/custom/index.less

@@ -1,5 +1,5 @@
 .pq-custom {
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, .6);
   position: fixed;
   top: 0;
   bottom: 0;
@@ -9,15 +9,59 @@
   justify-content: center;
   align-items: center;
 
-  .icon {
-    position: absolute;
-  }
+  .custom-container {
+    position: relative;
 
-  .close-icon {
-    position: absolute;
-  }
+    .icon {
+      position: absolute;
+      top: 38rpx;
+      left: 24rpx;
+      width: 64rpx;
+      height: 32rpx;
+      background: rgba(0, 0, 0, .4);
+      color: #fff;
+      font-size: 20rpx;
+      text-align: center;
+      line-height: 32rpx;
+    }
+  
+    .close-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      top: 24rpx;
+      right: 24rpx;
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, .4);
+
+    }
 
-  .custom-video {
+    .close-icon::before,
+    .close-icon::after {
+        position: absolute;
+        content: ' ';
+        background-color: #eee;
+        left: 45%;
+        top: 25%;
+        width: 4rpx;
+        height: 30rpx;
+    }
 
+    .close-icon::before {
+        transform: rotate(45deg);
+    }
+
+    .close-icon::after {
+        transform: rotate(-45deg);
+    }
+  
+    .custom-video {
+      width: 100%;
+      height: 100%
+    }
   }
+
+
 }

src/plugin/components/custom/index.tsx

@@ -1,48 +1,54 @@
-import React, { PropsWithChildren } from 'react'
-import Taro, { useLoad, useReady } from '@tarojs/taro'
-import { View, Video, Navigator, AdCustom } from '@tarojs/components'
+import { PropsWithChildren, useState } from 'react'
+import { View, Video, Navigator } from '@tarojs/components'
+import useGetCustomClient from '@/hooks/useGetCustomClient'
 import './index.less'
 
-const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/webview/index'
+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(props: PropsWithChildren<CustomPropsType>) {
-  const customWidth = props.width || 100
+function PqCustom({ width, zIndex }: PropsWithChildren<CustomPropsType>) {
   function onClick() {
-    console.log(props)
   }
 
   return (
     <View className='pq-custom' onClick={onClick}>
-      <View className='icon'>广告</View>
-      <View className='close-icon'>❌</View>
-      <Navigator url={WEB_VIEW_URL}>
-        <Custom width={customWidth}/>
-      </Navigator>
+      <View className='custom-container'>
+        <View className='icon' style={{zIndex: (zIndex || 1) + 1}}>
+          广告
+        </View>
+        <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}}>
+        </View>
+
+        <Navigator url={WEB_VIEW_URL}>
+          <Custom width={width} zIndex={zIndex} />
+        </Navigator>
+      </View>
     </View>
   )
 }
 
 function Custom({ width, zIndex }) {
-  useReady(() => {
-    const res = Taro.getSystemInfoSync()
-    console.log(res)
-    const clientRect = Taro.getMenuButtonBoundingClientRect()
-    console.log(clientRect)
-  })
+  const [style, setStyle] = useState({ width: '0px', height: 'px', zIndex })
 
-  const style = {
-    width: `${width || 100}px`,
-    zIndex: zIndex || 1,
-    height: `${(width || 100) * 16 / 9}px`
-  }
+  useGetCustomClient((customClient) => {
+    let clientWidth = customClient.width
+    let clientHeight = customClient.height
+    if (width) {
+      clientWidth = width
+      clientHeight = width / 375 * 667
+    }
+
+    setStyle({
+      zIndex: zIndex || 1,
+      width: `${clientWidth}px`,
+      height: `${clientHeight}px`
+    })
+  })
   return (
-    <View className='custom'>
-      <Video className='custom-video' style={style} autoplay={false} controls={false} loop src={VIDEO_SRC} />
+    <View className='custom' style={style}>
+      <Video className='custom-video' autoplay={false} controls={false} loop src={VIDEO_SRC} />
     </View>
   )
 }
 
-// 计算可视区
-
 export default PqCustom

src/plugin/plugin.json

@@ -5,7 +5,7 @@
   "pages": {
     "webview": "pages/webview/index",
     "miniWeb": "pages/miniWeb/index",
-    "h5": "pages/h5/index"
+    "customPage": "pages/customPage/index"
   },
   "main": "index.ts"
 }