feat: 错误参数定义

README.md

@@ -10,5 +10,5 @@ npm dev
 ## 插件简介
 
 插件小程序的appid使用的是 **票圈好视界** `wx5ef216d1caf4a0ea`
-测试小程序的appid使用的是 **票圈好视界** `wx5ef216d1caf4a0ea`
+测试小程序的appid使用的是 **票圈短视频** `wxdd372c87e2fab30b`
 开发阶段需要将开发者工具调到插件模式，选择对应的小程序即可

project.config.json

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

src/pages/index/data.json

@@ -1,36 +0,0 @@
-{
-  "code": 0,
-  "msg": "success",
-  "data": {
-      "ownPlatformAlliance": {
-          "adType": "ownPlatformAlliance",
-          "platformCreativeInfo": {
-              "id": 3392,
-              "creativeCode": "CREATIVE_17086709080881163",
-              "adId": 1129,
-              "adCode": "AD_17086709079461991",
-              "campaignId": 172,
-              "campaignCode": "CAMPAIGN_17024525411821220",
-              "advertiserId": 332,
-              "advertiserCode": "ADA_17024523941341815",
-              "creativePattern": 2,
-              "creativeTitle": "联盟广告测试",
-              "copywriting": "111",
-              "materialType": "PICTURE",
-              "materialAddress": "http://rescdn.yishihui.com/ad/prod/image/material_CREATIVE_17086709080881163_1708670908088.png",
-              "creativeLogoAddress": "http://rescdn.yishihui.com/ad/prod/image/logo_1708670908043.png",
-              "clickButtonText": "按钮文案",
-              "clickButtonColor": "#00C25D",
-              "clickButtonEffects": 0,
-              "landingPageType": 2,
-              "landingPageAddress": "https://www.baidu.com",
-              "positionId": 13,
-              "adpId":"xxxxxx",
-              "trafficCode":"ATP182138123",
-              "bidType": 1
-          },
-          "ownInAb": true
-      }
-  },
-  "success": true
-}

src/pages/index/index.tsx

@@ -9,16 +9,17 @@ const Index: React.FC = () => {
   useLoad(() => {
   })
 
-  function onClick() {
+  function openEmbeddedMiniProgram(appId, path) {
     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'
+      appId,
+      path,
+      envVersion: 'trial'
     })
   }
 
   return (
     <View className='index'>
-      <custom />
+      <custom props={{ openEmbeddedMiniProgram, adpId: 'uh2321awe1' }}/>
     </View>
   )
 }

src/plugin/components/custom/index.tsx

@@ -1,4 +1,4 @@
-import Taro, { useLoad, useReady, useUnload } from '@tarojs/taro'
+import Taro, { useLoad, useReady } from '@tarojs/taro'
 import { PropsWithChildren, useState } from 'react'
 import { View, Video, Image } from '@tarojs/components'
 import useGetCustomClient from '@/hooks/useGetCustomClient'
@@ -8,14 +8,15 @@ import http from '@/http/index'
 import { adSelfPredict } from '@/http/api/index'
 import { adActionLog } from '@/logCenter/index'
 import { reportBusinessType } from '@/plugin/share/const'
+import { queryURLParams } from '@/plugin/share'
 
 // 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
 let loadedMetaFiredInOnce = 0
+let pqtId
 
 function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   let {
     adpId,
-    zIndex,
     openEmbeddedMiniProgram,
     onError,
     onLoad,
@@ -25,9 +26,21 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   const [adData, setAdData] = useState<any>({})
 
   useReady(() => {
+    init()
+    pqtId = generateUUID()
     getAdConfig()
   })
 
+  function init() {
+    if (
+        typeof adpId !== 'string' ||
+        typeof openEmbeddedMiniProgram !== 'function'
+      ) {
+      catchError('参数错误', 1031)
+      return
+    }
+  }
+
   function getAdConfig() {
     http.post(`${adSelfPredict}?adpId=uh2321awe1`, {
       baseInfo: {},
@@ -39,23 +52,36 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
       header: { 'content-type': 'application/json;' }
     }).then((res: RequestType) => {
       const { code, data } = res
-      // TODO: onError、logUpload
-      if(code !== 0) {
-        onError()
-        // logUpload()
+      if(code === 10001) {
+        catchError('广告资源加载失败', 1022)
+        return
+      }
+
+      if(code === 10002) {
+        catchError('adpId 无效', 1021)
+        return
+      }
+
+      if(code === 10003) {
+        catchError('初始化失败', 1011)
         return
       }
 
       const { ownPlatformAlliance } = data || {}
       const { adType, platformCreativeInfo } = ownPlatformAlliance || {}
+      const { landingPageAddress } = platformCreativeInfo
+
+      if (!landingPageAddress) {
+        catchError('数据异常', 1013)
+        return
+      }
+
       setAdData({
         adType,
         ...platformCreativeInfo
       })
-
-      console.log(data)
-    }).catch(err => {
-      console.log(err)
+    }).catch(() => {
+      catchError('初始化失败', 1011)
     })
   }
 
@@ -64,30 +90,41 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   }
   
   function videoClick() {
-    adActionReport(reportBusinessType.adPlay, 'adClick')
-    adActionReport(reportBusinessType.adPlay, 'adOpen')
-    openEmbeddedMiniProgram()
+    adActionReport(reportBusinessType.adClick, 'adClick')
+    videoOpenMiniProgram()
     closeCustom()
   }
 
+  function videoOpenMiniProgram() {
+    const { landingPageAddress } = adData
+    const query = queryURLParams(createAdActionReportData())
+
+    adActionReport(reportBusinessType.adPlay, 'adOpen')
+    openEmbeddedMiniProgram(
+      'wx5ef216d1caf4a0ea',
+      `/pages/ad-launch-page/index?path=${encodeURIComponent(landingPageAddress)}&${query}`
+    )
+
+    console.log(`/pages/ad-launch-page/index?path=${encodeURIComponent(landingPageAddress)}&${query}`)
+  }
+
   function videoLoad() {
-    adActionReport(reportBusinessType.adPlay, 'adLoad')
+    adActionReport(reportBusinessType.adLoad, 'adLoad')
     onLoad()
   }
 
   function videoError() {
-    adActionReport(reportBusinessType.adPlay, 'adError')
-    onError()
+    catchError('广告加载失败', 1012)
   }
 
   function videoView() {
-    adActionReport(reportBusinessType.adPlay, 'adView')
+    adActionReport(reportBusinessType.adView, 'adView')
   }
 
   function videoTimeUpdate() {}
 
   function closeCustom() {
-    adActionReport(reportBusinessType.adPlay, 'adClose')
+    adActionReport(reportBusinessType.adClose, 'adClose')
     onClose()
     setShow(false)
   }
@@ -96,42 +133,75 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
     closeCustom()
   }
 
-  function adActionReport(eventId, businessType) {
-    const {
-      adCode,
-      adPosition,
-      advertiserId,
-      ownAdDetailId,
-      ownAdPositionId,
-      ownAdSystemType,
-      planId,
-    } = adData
+  function adActionReport(eventId, businessType, extParams = {}) {
+    const data = createAdActionReportData
 
     adActionLog([{
-      adCode,
-      adPosition,
-      advertiserId,
       businessType,
       eventId,
-      ownAdDetailId,
-      ownAdPositionId,
-      ownAdSystemType,
-      pageSource: 'plugin',
-      planId,
-      pqtId: generateUUID(),
-      videoId: '000',
-      adpId
+      ...data,
+      ...extParams
     }])
   }
 
+  function createAdActionReportData() {
+    const {
+      trafficCode, // 流量主code
+      // 广告主
+      advertiserCode,
+      advertiserId,
+      // 广告计划
+      campaignCode,
+      campaignId,
+      // 广告
+      adCode,
+      adId,
+      // 创意
+      creativeCode,
+      id,
+      // 广告位
+      positionId,
+      // 竞价
+      bidType = '',
+      unitPrice = '', // 单价
+      bidCreativeParam = {}, // {}
+    } = adData
+
+    return {
+      adpCode: trafficCode,
+      advertiserCode,
+      advertiserId,
+      campaignCode,
+      campaignId,
+      adCode,
+      adId,
+      creativeCode,
+      id,
+      positionId,
+      bidType,
+      unitPrice, // 单价
+      bidCreativeParam: JSON.stringify(bidCreativeParam || {}), // {}
+      adpId,
+      pqtId
+    }
+  }
+
+  function catchError(message, code) {
+    onError({ message, code })
+    setShow(false)
+    adActionReport(reportBusinessType.adError, 'adError', {
+      errorCode: code
+    })
+  }
+
   return (
     <>
       {show && <View className='pq-custom' onClick={clickMask}>
         <View className='custom-container'>
-          <View className='icon' style={{zIndex: (zIndex || 1) + 1}}>
+          <View className='icon'>
             广告
           </View>
-          <View className='close-icon'style={{zIndex: (zIndex || 1) + 1}} onClick={closeCustom}>
+          <View className='close-icon' onClick={closeCustom}>
           </View>
             <Custom
               adData={adData}
@@ -152,7 +222,7 @@ function Custom({
   adData, onPlay, // 播放事件
   onClick, onLoad, onView, onError, onTimeUpdate
 }) {
-  const [style, setStyle] = useState({ width: '0px', height: 'px' })
+  const [style, setStyle] = useState({ width: '0px', height: '0px' })
 
   useReady(() => {
     loadedMetaFiredInOnce = 0
@@ -161,7 +231,6 @@ function Custom({
   useGetCustomClient((customClient) => {
     let clientWidth = customClient.width
     let clientHeight = customClient.height
-
     setStyle({
       width: `${clientWidth}px`,
       height: `${clientHeight}px`
@@ -172,7 +241,6 @@ function Custom({
     if (loadedMetaFiredInOnce++ < 1) {
       // 上报load
       onLoad()
-      console.log('load')
     }
   }
 

src/plugin/share/index.ts

@@ -5,21 +5,10 @@ export const noop = () => {}
 export function wrapProps(props: PropsWithChildren<CustomPropsType>) {
   let {
     adpId,
-    autoplay,
-    loop = true,
-    muted = false,
-    showMusk,
     zIndex = 1,
     openEmbeddedMiniProgram = noop,
-    onPlay = noop,
-    onPause = noop,
-    onEnded = noop,
-    onTimeUpdate = noop,
-    onStop = noop,
     onError = noop,
     onLoad = noop,
-    onView = noop,
-    onClick = noop,
     onClose = noop
   } = props
 
@@ -28,21 +17,10 @@ export function wrapProps(props: PropsWithChildren<CustomPropsType>) {
 
   return {
     adpId,
-    autoplay,
-    loop,
-    muted,
-    showMusk,
     zIndex,
     openEmbeddedMiniProgram,
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onStop,
     onError,
     onLoad,
-    onView,
-    onClick,
     onClose
   }
 }
@@ -55,4 +33,30 @@ export function generateUUID () {
       return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
   });
   return uuid;
-}
+}
+
+export function parseURLParams(url) {
+  const search = {}
+  let hash = ''
+  let href = ''
+  url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => search[key] = value)
+  url.replace(/#([^?=&#]+)/g, (_, h) => hash = h)
+
+  href = url.split(/[\?|#]/)[0]
+
+  return {
+      href,
+      search,
+      hash
+  }
+}
+
+export function queryURLParams(params) {
+  let search = Object.entries(params).reduce((cac, cur) => {
+      const [key, val] = cur
+      return cac += `${key}=${val}&`
+  }, '')
+
+
+  return search.slice(0, -1)
+}

types/global.d.ts

@@ -35,23 +35,10 @@ declare namespace Taro {
 
 type CustomPropsType = {
   adpId: number
-  autoplay?: boolean
-  loop?: boolean
-  muted?: boolean
-  showMusk?: boolean
   zIndex?: number
-  openEmbeddedMiniProgram(): void
-
-  onPlay?():void
-  onPause?():void
-  onEnded?():void
-  onTimeUpdate?():void
-  onStop?():void
-  onError?(): void
-
+  openEmbeddedMiniProgram(appId: string, path: string): void
+  onError?(params: { message: string, code: number}): void
   onLoad?(): void
-  onView?(): void
-  onClick?(): void
   onClose?(): void
 }