@bi-nova/ui-weapp 1.1.3 → 1.2.0-beta.202608131817

package/src/ad/splash/index.js

@@ -3,7 +3,7 @@
  * @Author wutao
  * @Date 2026-04-10
  * @LastEditors wutao
- * @LastEditTime 2026-05-13
+ * @LastEditTime 2026-08-12 14:49:58
  */
 const {
   navigateCustomAd
@@ -13,6 +13,7 @@ Component({
   properties: {
     unitId: { type: String, value: '' },
     customAd: { type: Object, value: null },
+    priority: { type: String, value: 'wechat-first' },
     show: { type: Boolean, value: true },
     zIndex: { type: Number, value: 999 },
     pictureInPicture: { type: Boolean, value: false },
@@ -27,13 +28,14 @@ Component({
     mediaUrl: '',
     posterUrl: '',
     isImage: true,
-    adSpec: 2,
+    mediaFitMode: 'contain',
     hasCustomMedia: false,
     customLoaded: false,
+    isFullScreen: false,
     skipStyle: '',
+    disclosureStyle: '',
+    combinedControlStyle: '',
     adBadgeText: '广告',
-    contentStyle: '',
-    badgeStyle: '',
     pipAnimating: false,
     nativeSplashActive: false
   },
@@ -42,8 +44,7 @@ Component({
       /** 系统开屏状态重试次数 */
       this.checkSplashNum = 0
       this.initSkipStyle()
-      this.initSafeAreaStyle()
-      this.syncAdSource(this.properties.unitId, this.properties.customAd)
+      this.syncAdSource(this.properties.unitId, this.properties.customAd, this.properties.priority)
       this.syncVisible(this.properties.show)
     },
     detached() {
@@ -51,8 +52,8 @@ Component({
     }
   },
   observers: {
-    'unitId, customAd'(nextUnitId, nextCustomAd) {
-      this.syncAdSource(nextUnitId, nextCustomAd)
+    'unitId, customAd, priority'(nextUnitId, nextCustomAd, nextPriority) {
+      this.syncAdSource(nextUnitId, nextCustomAd, nextPriority)
       this.syncVisible(this.properties.show)
     },
     show(nextShow) {
@@ -125,21 +126,22 @@ Component({
      * 同步广告来源与媒体数据
      * @param {string} unitId 微信广告位 ID
      * @param {Record<string, any> | null} customAd 自定义广告数据
+     * @param {string} priority 广告展示优先级
      * @returns {void}
      */
-    syncAdSource(unitId, customAd) {
-      /** 是否为微信原生广告 */
-      const isWechatAd = Boolean(unitId)
+    syncAdSource(unitId, customAd, priority) {
       /** 主媒体地址 */
       const mediaUrl = this.getMediaUrl(customAd)
       /** 视频封面地址 */
       const posterUrl = this.getPosterUrl(customAd, mediaUrl)
       /** 是否存在自定义媒体 */
       const hasCustomMedia = Boolean(mediaUrl)
+      /** 是否优先展示微信广告 */
+      const isWechatAd = this.shouldStartWechatAd(unitId, hasCustomMedia, priority)
       /** 是否为图片媒体 */
       const isImage = this.getIsImage(customAd, mediaUrl)
-      /** 广告规格，1 横版，2 竖版 */
-      const adSpec = this.getAdSpec(customAd)
+      /** 自定义素材填充模式 */
+      const mediaFitMode = this.getMediaFitMode(customAd)
       /** 广告角标文案 */
       const adBadgeText = this.getAdBadgeText(customAd)
 
@@ -149,11 +151,54 @@ Component({
         posterUrl,
         hasCustomMedia,
         isImage,
-        adSpec,
+        mediaFitMode,
         adBadgeText
       })
     },
 
+    /**
+     * 根据广告配置和优先级判断是否首发微信广告
+     * @param {string} unitId 微信广告位 ID
+     * @param {boolean} hasCustomMedia 是否存在自研素材
+     * @param {string} priority 广告展示优先级
+     * @returns {boolean}
+     */
+    shouldStartWechatAd(unitId, hasCustomMedia, priority) {
+      if (!unitId) return false
+      if (!hasCustomMedia) return true
+      return !['custom-first', 'custom-only'].includes(priority)
+    },
+
+    /**
+     * 重置当前展示周期的广告来源失败记录
+     * @returns {void}
+     */
+    resetProviderFailures() {
+      this.failedProviders = {
+        wechat: false,
+        custom: false
+      }
+    },
+
+    /**
+     * 记录指定广告来源加载失败
+     * @param {'wechat' | 'custom'} provider 广告来源
+     * @returns {void}
+     */
+    markProviderFailed(provider) {
+      if (!this.failedProviders) this.resetProviderFailures()
+      this.failedProviders[provider] = true
+    },
+
+    /**
+     * 判断指定广告来源是否已经失败
+     * @param {'wechat' | 'custom'} provider 广告来源
+     * @returns {boolean}
+     */
+    hasProviderFailed(provider) {
+      return Boolean(this.failedProviders && this.failedProviders[provider])
+    },
+
     /**
      * 同步组件显隐状态
      * @param {boolean} nextShow 是否展示
@@ -162,6 +207,7 @@ Component({
     syncVisible(nextShow) {
       if (!nextShow) {
         this.clearAllTimers()
+        this.resetProviderFailures()
         this.setData({
           visible: false,
           showPiP: false,
@@ -173,6 +219,7 @@ Component({
         return
       }
 
+      this.resetProviderFailures()
       this.checkSplashNum = 0
       this.resetVisibleState()
       this.checkSplashAdStatus()
@@ -201,7 +248,7 @@ Component({
         this.startWechatCountDownIfNeeded()
       })
 
-      if (visible && !this.properties.unitId && this.data.hasCustomMedia) {
+      if (visible && !this.data.isWechatAd && this.data.hasCustomMedia) {
         this.startCustomLoadTimeout()
       }
     },
@@ -225,7 +272,13 @@ Component({
      */
     getMediaUrl(customAd) {
       if (!customAd) return ''
-      return customAd.image || customAd.video || ''
+
+      const mediaType = String(customAd.mediaType || '').trim().toLowerCase()
+
+      if (mediaType === 'video') return customAd.video || ''
+      if (mediaType === 'image') return customAd.image || ''
+
+      return customAd.video || customAd.image || ''
     },
 
     /**
@@ -247,33 +300,25 @@ Component({
      */
     getIsImage(customAd, mediaUrl) {
       if (!customAd) return true
+
+      const mediaType = String(customAd.mediaType || '').trim().toLowerCase()
+
+      if (mediaType === 'video') return false
+      if (mediaType === 'image') return true
       if (customAd.video) return false
       if (customAd.image) return true
       return /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(String(mediaUrl || '').trim())
     },
 
     /**
-     * 获取广告规格
+     * 获取自定义素材填充模式
      * @param {Record<string, any> | null} customAd 自定义广告数据
-     * @returns {number}
+     * @returns {'contain' | 'cover'}
      */
-    getAdSpec(customAd) {
-      if (!customAd) return 2
-
-      /** 显式传入的广告规格 */
-      const adSpec = Number(customAd.adSpec || customAd.spec || 0)
-      if (adSpec === 1 || adSpec === 2) return adSpec
-
-      /** 媒体宽度 */
-      const width = Number(customAd.videoWidth || customAd.width || 0)
-      /** 媒体高度 */
-      const height = Number(customAd.videoHeight || customAd.height || 0)
-
-      if (width > 0 && height > 0) {
-        return width > height ? 1 : 2
-      }
-
-      return customAd.video ? 1 : 2
+    getMediaFitMode(customAd) {
+      return customAd && String(customAd.fitMode || '').trim().toLowerCase() === 'cover'
+        ? 'cover'
+        : 'contain'
     },
 
     /**
@@ -287,7 +332,7 @@ Component({
     },
 
     /**
-     * 初始化跳过按钮位置样式
+     * 初始化开屏顶部控件位置样式
      * @returns {void}
      */
     initSkipStyle() {
@@ -296,7 +341,7 @@ Component({
         typeof wx.getMenuButtonBoundingClientRect === 'function'
           ? wx.getMenuButtonBoundingClientRect()
           : {}
-      /** @type {{windowWidth?: number, windowHeight?: number, screenHeight?: number}} */
+      /** @type {{windowWidth?: number, windowHeight?: number, screenHeight?: number, safeArea?: {left?: number}}} */
       const windowInfo =
         typeof wx.getWindowInfo === 'function'
           ? wx.getWindowInfo()
@@ -305,7 +350,11 @@ Component({
             : {}
 
       /** 是否可按原生菜单胶囊对齐 */
-      const isFullScreen = windowInfo.windowHeight === windowInfo.screenHeight
+      const isFullScreen = Boolean(
+        windowInfo.windowHeight
+        && windowInfo.screenHeight
+        && windowInfo.windowHeight === windowInfo.screenHeight
+      )
       /** 默认顶部距离 */
       const defaultTop = 16
       /** 默认右侧距离 */
@@ -320,46 +369,32 @@ Component({
       const height = isFullScreen && menuButtonRect.height ? menuButtonRect.height : defaultHeight
       /** 跳过按钮水平定位样式 */
       const horizontalStyle = isFullScreen ? `left:${defaultLeft}px` : `right:${defaultRight}px`
+      /** 广告标识顶部偏移 */
+      const disclosureTop = top
+      /** 广告标识左侧偏移，兼容安全区域可能存在的水平边距 */
+      const disclosureLeft = Math.max(defaultLeft, Number(windowInfo.safeArea && windowInfo.safeArea.left || 0) + defaultLeft)
 
       this.setData({
+        isFullScreen,
         skipStyle: [
           `top:${top}px`,
           horizontalStyle,
           `height:${height}px`,
           `line-height:${height}px`,
           `border-radius:${Math.round(height / 2)}px`
+        ].join(';'),
+        disclosureStyle: [
+          `top:${disclosureTop}px`,
+          `left:${disclosureLeft}px`
+        ].join(';'),
+        combinedControlStyle: [
+          `top:${top}px`,
+          `left:${disclosureLeft}px`,
+          `height:${height}px`
         ].join(';')
       })
     },
 
-    /**
-     * 初始化安全区相关样式
-     * @returns {void}
-     */
-    initSafeAreaStyle() {
-      /** @type {{safeArea?: {bottom?: number}, screenHeight?: number, windowHeight?: number}} */
-      const systemInfo =
-        typeof wx.getWindowInfo === 'function'
-          ? wx.getWindowInfo()
-          : typeof wx.getSystemInfoSync === 'function'
-            ? wx.getSystemInfoSync()
-            : {}
-      /** 底部安全区高度 */
-      const safeBottom = Math.max(
-        0,
-        Number(systemInfo.screenHeight || 0) - Number(systemInfo.safeArea && systemInfo.safeArea.bottom || systemInfo.windowHeight || 0)
-      )
-      /** 内容区底部间距 */
-      const contentBottom = safeBottom > 0 ? safeBottom + 42 : 84
-      /** 角标底部间距 */
-      const badgeBottom = safeBottom > 0 ? safeBottom + 88 : 130
-
-      this.setData({
-        contentStyle: `bottom:${contentBottom}px;`,
-        badgeStyle: `bottom:${badgeBottom}px;`
-      })
-    },
-
     /**
      * 启动广告倒计时
      * @returns {void}
@@ -473,11 +508,68 @@ Component({
      */
     startWechatCountDownIfNeeded() {
       // 微信原生广告 load 回调在重新编译、缓存恢复等场景下可能不稳定；只要原生广告容器已展示，就允许兜底启动倒计时。
-      if (!this.properties.show || !this.properties.unitId || !this.data.visible || this.data.showPiP) return
+      if (!this.properties.show || !this.properties.unitId || !this.data.isWechatAd || !this.data.visible || this.data.showPiP) return
 
       this.startCountDown()
     },
 
+    /**
+     * 切换当前展示的广告来源
+     * @param {'wechat' | 'custom'} provider 目标广告来源
+     * @returns {void}
+     */
+    switchProvider(provider) {
+      const isWechatAd = provider === 'wechat'
+
+      this.clearAllTimers()
+      this.setData({
+        isWechatAd,
+        visible: true,
+        showPiP: false,
+        remainingSeconds: this.getJumpSeconds(),
+        customLoaded: false,
+        pipAnimating: false
+      }, () => {
+        if (isWechatAd) {
+          this.startWechatCountDownIfNeeded()
+          return
+        }
+
+        this.startCustomLoadTimeout()
+      })
+    },
+
+    /**
+     * 所有可用广告来源均失败后结束当前开屏流程
+     * @param {'wechat' | 'custom'} provider 最后失败的广告来源
+     * @param {Record<string, any>} errorDetail 错误详情
+     * @returns {void}
+     */
+    finishProviderFailure(provider, errorDetail) {
+      const hasWechatAd = Boolean(this.properties.unitId)
+      const hasCustomAd = Boolean(this.data.hasCustomMedia)
+      const reason = hasWechatAd && hasCustomAd
+        ? 'allProvidersFailed'
+        : provider === 'wechat'
+          ? 'wechatAdLoadFail'
+          : 'customMediaLoadFail'
+
+      this.clearAllTimers()
+      this.setData({
+        visible: false,
+        showPiP: false,
+        remainingSeconds: 0,
+        customLoaded: false,
+        pipAnimating: false
+      })
+      this.triggerEvent('close', {
+        provider,
+        type: 'splash',
+        reason,
+        error: errorDetail
+      })
+    },
+
     /**
      * 设置开屏广告可见状态并按需启动微信原生广告倒计时
      * @param {boolean} visible 是否展示开屏广告
@@ -554,6 +646,8 @@ Component({
      * @returns {void}
      */
     handleLoad(event) {
+      if (!this.data.isWechatAd) return
+
       this.startCountDown()
       this.triggerEvent('load', this.resolveEventDetail('wechat', event))
     },
@@ -564,6 +658,8 @@ Component({
      * @returns {void}
      */
     handleError(event) {
+      if (!this.data.isWechatAd) return
+
       const rawDetail = event && event.detail && typeof event.detail === 'object' ? event.detail : {}
       const errorDetail = this.resolveEventDetail('wechat', event, {
         errCode: 'BI_SPLASH_WECHAT_AD_LOAD_FAIL',
@@ -584,34 +680,14 @@ Component({
     fallbackFromWechatAd(errorDetail) {
       if (!this.data.isWechatAd) return
 
-      this.clearAllTimers()
+      this.markProviderFailed('wechat')
 
-      if (this.data.hasCustomMedia) {
-        this.setData({
-          isWechatAd: false,
-          visible: true,
-          showPiP: false,
-          remainingSeconds: this.getJumpSeconds(),
-          customLoaded: false,
-          pipAnimating: false
-        })
-        this.startCustomLoadTimeout()
+      if (this.data.hasCustomMedia && !this.hasProviderFailed('custom')) {
+        this.switchProvider('custom')
         return
       }
 
-      this.setData({
-        visible: false,
-        showPiP: false,
-        remainingSeconds: 0,
-        customLoaded: false,
-        pipAnimating: false
-      })
-      this.triggerEvent('close', {
-        provider: 'wechat',
-        type: 'splash',
-        reason: 'wechatAdLoadFail',
-        error: errorDetail
-      })
+      this.finishProviderFailure('wechat', errorDetail)
     },
 
     /**
@@ -619,7 +695,7 @@ Component({
      * @returns {void}
      */
     handleCustomLoad() {
-      if (this.data.customLoaded) return
+      if (this.data.isWechatAd || this.data.customLoaded) return
 
       this.clearCustomLoadTimeout()
       this.setData({ customLoaded: true })
@@ -647,15 +723,19 @@ Component({
      * @returns {void}
      */
     handleCustomMediaFail(event, detail) {
-      this.clearAllTimers()
-      this.setData({
-        visible: false,
-        showPiP: false,
-        remainingSeconds: 0,
-        customLoaded: false,
-        pipAnimating: false
-      })
-      this.triggerEvent('error', this.resolveEventDetail('custom', event, detail))
+      if (this.data.isWechatAd) return
+
+      const errorDetail = this.resolveEventDetail('custom', event, detail)
+
+      this.triggerEvent('error', errorDetail)
+      this.markProviderFailed('custom')
+
+      if (this.properties.unitId && !this.hasProviderFailed('wechat')) {
+        this.switchProvider('wechat')
+        return
+      }
+
+      this.finishProviderFailure('custom', errorDetail)
     },
 
     /**

package/src/ad/splash/index.wxml

@@ -18,30 +18,25 @@
   </view>
 
   <!-- 自定义广告 -->
-  <view wx:elif="{{mediaUrl}}" class="bi-splash-ad__popup">
+  <view wx:elif="{{mediaUrl}}" class="bi-splash-ad__popup bi-splash-ad__custom">
     <view class="bi-splash-ad__media-shell" bindtap="handleAction">
       <image
         wx:if="{{isImage}}"
-        class="bi-splash-ad__media bi-splash-ad__media--background"
+        class="bi-splash-ad__media"
         src="{{mediaUrl}}"
-        mode="aspectFill"
+        mode="{{mediaFitMode === 'cover' ? 'aspectFill' : 'aspectFit'}}"
         bindload="handleCustomLoad"
         binderror="handleCustomMediaError"
       />
       <block wx:else>
-        <image
-          class="bi-splash-ad__media bi-splash-ad__media--background"
-          src="{{posterUrl}}"
-          mode="aspectFill"
-        />
         <video
-          class="bi-splash-ad__video {{adSpec === 1 ? 'bi-splash-ad__video--landscape' : ''}}"
+          class="bi-splash-ad__video"
           src="{{mediaUrl}}"
           poster="{{posterUrl}}"
           autoplay="{{true}}"
           muted="{{customAd.muted !== false}}"
           loop="{{true}}"
-          object-fit="cover"
+          object-fit="{{mediaFitMode}}"
           show-center-play-btn="{{false}}"
           show-play-btn="{{false}}"
           controls="{{false}}"
@@ -52,13 +47,17 @@
 
       <view wx:if="{{showPiP}}" class="bi-splash-ad__pip-mask"></view>
 
-      <view wx:if="{{!showPiP}}" class="bi-splash-ad__badge" style="{{badgeStyle}}">{{adBadgeText}}</view>
-
-      <view wx:if="{{customAd && (customAd.title || (!showPiP && (customAd.description || customAd.buttonText)))}}" class="bi-splash-ad__content" style="{{contentStyle}}">
-        <text wx:if="{{customAd.title}}" class="bi-splash-ad__title">{{customAd.title}}</text>
-        <text wx:if="{{!showPiP && customAd.description}}" class="bi-splash-ad__description">{{customAd.description}}</text>
-        <button wx:if="{{!showPiP && customAd.buttonText}}" class="bi-splash-ad__action">{{customAd.buttonText}}</button>
+      <view wx:if="{{!showPiP && !isFullScreen}}" class="bi-splash-ad__disclosure" style="{{disclosureStyle}}">
+        <text>{{adBadgeText}}</text>
+        <view class="bi-splash-ad__disclosure-arrow"></view>
       </view>
+
+      <image
+        wx:if="{{!showPiP && customAd.bottomImage}}"
+        class="bi-splash-ad__bottom-image"
+        src="{{customAd.bottomImage}}"
+        mode="widthFix"
+      />
     </view>
   </view>
 
@@ -66,7 +65,23 @@
     <view class="bi-splash-ad__pip-close-text">关闭</view>
   </view>
 
-  <view wx:if="{{!showPiP}}" class="bi-splash-ad__skip" style="{{skipStyle}}" bindtap="handleSkip">
+  <view
+    wx:if="{{!showPiP && isFullScreen && !isWechatAd}}"
+    class="bi-splash-ad__combined-control"
+    style="{{combinedControlStyle}}"
+  >
+    <view class="bi-splash-ad__combined-capsule">
+      <view class="bi-splash-ad__combined-disclosure">
+        <text>{{adBadgeText}}</text>
+        <view class="bi-splash-ad__disclosure-arrow"></view>
+      </view>
+      <view class="bi-splash-ad__combined-divider"></view>
+      <view class="bi-splash-ad__combined-skip" catchtap="handleSkip">跳过</view>
+    </view>
+    <text class="bi-splash-ad__combined-countdown">{{remainingSeconds}} 秒</text>
+  </view>
+
+  <view wx:elif="{{!showPiP}}" class="bi-splash-ad__skip" style="{{skipStyle}}" bindtap="handleSkip">
     <text>{{remainingSeconds}}s</text>
     <view class="bi-splash-ad__skip-divider"></view>
     <text class="bi-splash-ad__skip-text">跳过</text>