feat: 完成插件

README.md

@@ -10,5 +10,5 @@ npm dev
 ## 插件简介
 
 插件小程序的appid使用的是票圈祝福 `wxf7261ed54f2e450e`
-测试小程序的appid使用的是vlog `wx89e7eb06478361d7`
+测试小程序的appid使用的是老好看 `wx58cb402db1e94bb7`
 开发阶段需要将开发者工具调到插件模式，选择对应的小程序即可

package.json

@@ -10,7 +10,8 @@
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production taro build --plugin weapp",
-    "dev": "cross-env NODE_ENV=development taro build --plugin weapp --watch"
+    "dev": "cross-env NODE_ENV=development taro build --plugin weapp --watch",
+    "open": "npm run dev -- --open"
   },
   "author": "",
   "license": "MIT",

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "miniprogram/",
   "pluginRoot": "plugin/",
   "compileType": "plugin",
-  "appid": "wx89e7eb06478361d7",
+  "appid": "wx58cb402db1e94bb7",
   "projectname": "wx-custom-plugin",
   "description": "",
   "setting": {

src/pages/index/index.tsx

@@ -17,9 +17,16 @@ const Index: React.FC = () => {
     // console.log('answer: ', answer)
   })
 
+  function onClick() {
+    Taro.openEmbeddedMiniProgram({
+      appId: 'wxdd372c87e2fab30b',
+      path: '/pages/msg-center/msg-webview/msg-webview?url=https%3A%2F%2Fm.qianliao.net%2Ffinancial%2Fexperience-plan-sku%3FlaunchId%3D5752452079%26wcl%3D220200_13052693_financing%26appId%3D1&reportData={}&channel=customAd'
+    })
+  }
+
   return (
     <View className='index'>
-      <custom />
+      <custom props={{ onClick }}/>
     </View>
   )
 }

src/plugin/components/custom/index.tsx

@@ -5,7 +5,7 @@ import useGetCustomClient from '@/hooks/useGetCustomClient'
 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_1702267670_1702267670233.mp4'
+const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1708595757_1708595757542.mp4'
 const VIDEO_COVER = 'http://rescdn.yishihui.com/ad/prod/video/material_AD_1702267670_1702267670233.mp4?x-oss-process=video/snapshot,t_5000,f_jpg,w_0,h_0,m_fast'
 
 // 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
@@ -14,13 +14,14 @@ let durationTime = 0
 
 const noop = () => {}
 
-function PqCustom({
-  width, zIndex, onLoad = noop, onView = noop, onClick = noop, onClose = noop, onError = noop
-}: PropsWithChildren<CustomPropsType>) {
+function PqCustom(props: PropsWithChildren<CustomPropsType>) {
+  const {
+    width, zIndex, onLoad = noop, onView = noop, onClick = noop, onClose = noop, onError = noop
+  } = props
   const [show, setShow] = useState(true)
 
   function clickCustom() {
-    onClick()
+    
     closeCustom()
   }
 
@@ -30,6 +31,7 @@ function PqCustom({
   }
 
   function clickMask() {
+    onClick()
     closeCustom()
   }
 
@@ -43,7 +45,7 @@ function PqCustom({
           <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}} onClick={closeCustom}>
           </View>
 
-          <Navigator url={WEB_VIEW_URL}>
+          {/* <Navigator url={WEB_VIEW_URL}> */}
             <Custom
               width={width}
               zIndex={zIndex}
@@ -52,7 +54,7 @@ function PqCustom({
               onView={onView}
               onError={onError}
             />
-          </Navigator>
+          {/* </Navigator> */}
         </View>
       </View>}
     </>
@@ -117,12 +119,11 @@ function Custom({ width, zIndex, onClick, onLoad, onView, onError }) {
   function onTimeUpdate(res) {
     const { detail } = res
     durationTime += (detail?.currentTime || 0)
-    console.log('onTimeUpdate', durationTime)
   }
 
   return (
     <View className='custom' style={style}>
-      <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} objectFit='fill' poster={VIDEO_COVER} />
+      <Video id='pq-custom' className='custom-video' autoplay={true} controls={false} loop src={VIDEO_SRC} onClick={onClick} onLoadedMetaData={onLoadedMetaData} onPlay={onPlay} onTimeUpdate={onTimeUpdate} onError={onError} objectFit='fill' poster={VIDEO_COVER} />
       <View className='custom-bottom'>
         <Image src='http://rescdn.yishihui.com/ad/prod/image/logo_AD_1702267670_1702267670233.png' className='logo' />
         <View className='title'>5天站桩入门课</View>

types/global.d.ts

@@ -19,7 +19,7 @@ declare namespace NodeJS {
 
 declare namespace JSX {
   interface IntrinsicElements {
-    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { width: string }
+    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { width?: string, props: any }
   }
 }