@bi-nova/ui-weapp 1.1.1-beta.202605161224

package/src/ad/banner/index.wxss

@@ -0,0 +1,132 @@
+.bi-banner-ad {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.08);
+}
+
+.bi-banner-ad__surface {
+  display: flex;
+  align-items: stretch;
+  min-height: 156rpx;
+}
+
+.bi-banner-ad__media {
+  position: relative;
+  flex: 0 0 132rpx;
+  width: 132rpx;
+  height: 156rpx;
+  overflow: hidden;
+}
+
+.bi-banner-ad__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.bi-banner-ad__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 18rpx 20rpx 18rpx 18rpx;
+}
+
+.bi-banner-ad__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10rpx;
+  height: 30rpx;
+  border-radius: 6rpx;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  font-size: 18rpx;
+  line-height: 30rpx;
+}
+
+.bi-banner-ad__badge--overlay {
+  position: absolute;
+  top: 8rpx;
+  left: 8rpx;
+  z-index: 1;
+}
+
+.bi-banner-ad__body {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.bi-banner-ad__title {
+  display: -webkit-box;
+  color: #0f172a;
+  font-size: 30rpx;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.bi-banner-ad__description {
+  flex: 1;
+  min-width: 0;
+  margin-right: 16rpx;
+  color: #8c8c8c;
+  font-size: 22rpx;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bi-banner-ad__footer {
+  display: flex;
+  align-items: center;
+  margin-top: 14rpx;
+}
+
+.bi-banner-ad__button {
+  flex: 0 0 auto;
+  min-width: 144rpx;
+  min-height: 0;
+  padding: 0 20rpx;
+  border: none;
+  border-radius: 12rpx;
+  background: #18b566;
+  color: #ffffff;
+  font-size: 24rpx;
+  font-weight: 500;
+  line-height: 54rpx;
+}
+
+.bi-banner-ad__button::after {
+  display: none;
+}
+
+.bi-banner-ad__close {
+  position: absolute;
+  top: 10rpx;
+  right: 10rpx;
+  width: 36rpx;
+  height: 36rpx;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  border-radius: 999rpx;
+  background: rgba(15, 23, 42, 0.35);
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  text-align: center;
+  z-index: 1;
+}
+
+.bi-banner-ad__close::after {
+  display: none;
+}

package/src/ad/display/index.js

@@ -0,0 +1,496 @@
+/**
+ * @Description 展示广告顶层分发组件
+ * @Author wutao
+ * @Date 2026-04-10
+ * @LastEditors wutao
+ * @LastEditTime 2026-05-08
+ */
+const SUPPORTED_TYPES = ['banner', 'splash']
+/** 微信系统开屏广告承接记录的本地缓存键前缀，用于按 appId 和广告位隔离缓存 */
+const NATIVE_SPLASH_CONSUMED_STORAGE_PREFIX = 'BI_DISPLAY_NATIVE_SPLASH_CONSUMED'
+/** 微信系统开屏广告承接记录有效期，超过5分钟后重新允许微信封面优先检查 */
+const NATIVE_SPLASH_CONSUMED_CACHE_DURATION = 5 * 60 * 1000
+
+Component({
+  properties: {
+    adId: { type: String, value: '' },
+    unitId: { type: String, value: '' },
+    type: { type: String, value: 'banner' },
+    customAd: { type: Object, value: null },
+    adOptions: { type: Object, value: null },
+    sdkKey: { type: String, value: 'biNova' },
+    autoLoad: { type: Boolean, value: true },
+    adIntervals: { type: Number, value: 30 },
+    show: { type: Boolean, value: true },
+    zIndex: { type: Number, value: 999 },
+    pictureInPicture: { type: Boolean, value: false },
+    checkNativeSplash: { type: Boolean, value: true },
+    nativeSplashCache: { type: Boolean, value: true },
+    jumpSeconds: { type: Number, value: 5 }
+  },
+  data: {
+    resolvedType: 'banner',
+    resolvedUnitId: '',
+    resolvedCustomAd: null,
+    resolvedShow: true,
+    remoteLoading: false,
+    remoteLoaded: false,
+    remoteAdData: null,
+    resolvedCheckNativeSplash: true
+  },
+  lifetimes: {
+    attached() {
+      this.syncType(this.properties.type)
+      this.syncNativeSplashCheck()
+      this.syncResolvedAdData()
+      this.refreshRemoteConfig('attached')
+    },
+    detached() {
+      this.requestToken = 0
+    }
+  },
+  observers: {
+    type(nextType) {
+      this.syncType(nextType)
+      this.syncResolvedAdData()
+    },
+    'unitId, customAd, show'(nextUnitId, nextCustomAd, nextShow) {
+      this.syncResolvedAdData({
+        unitId: nextUnitId,
+        customAd: nextCustomAd,
+        show: nextShow
+      })
+    },
+    'adId, adOptions, sdkKey, autoLoad'(nextAdId) {
+      this.syncNativeSplashCheck()
+
+      if (!nextAdId) {
+        this.clearRemoteState()
+        this.syncResolvedAdData()
+        return
+      }
+
+      this.refreshRemoteConfig('observer')
+    },
+    checkNativeSplash() {
+      this.syncNativeSplashCheck()
+    },
+    nativeSplashCache() {
+      this.syncNativeSplashCheck()
+    }
+  },
+  methods: {
+    /**
+     * 获取微信系统开屏广告承接缓存键
+     * @param {string} adId 广告位 ID
+     * @returns {string}
+     */
+    getNativeSplashConsumedStorageKey(adId) {
+      const appId = this.getMiniProgramAppId()
+      return `${NATIVE_SPLASH_CONSUMED_STORAGE_PREFIX}_${appId || 'unknown'}_${adId || 'empty'}`
+    },
+
+    /**
+     * 读取微信系统开屏广告是否已经承接过当前广告位
+     * @param {string} adId 广告位 ID
+     * @returns {boolean}
+     */
+    getNativeSplashConsumed(adId) {
+      if (!this.properties.nativeSplashCache) return false
+      if (!adId || typeof wx === 'undefined' || typeof wx.getStorageSync !== 'function') return false
+
+      try {
+        const consumedTime = Number(wx.getStorageSync(this.getNativeSplashConsumedStorageKey(adId)) || 0)
+        return consumedTime > 0 && Date.now() - consumedTime <= NATIVE_SPLASH_CONSUMED_CACHE_DURATION
+      } catch (error) {
+        return false
+      }
+    },
+
+    /**
+     * 记录微信系统开屏广告已经承接过当前广告位
+     * @returns {void}
+     */
+    setNativeSplashConsumed() {
+      if (!this.properties.nativeSplashCache) return
+      if (!this.properties.adId || typeof wx === 'undefined' || typeof wx.setStorageSync !== 'function') return
+
+      try {
+        wx.setStorageSync(this.getNativeSplashConsumedStorageKey(this.properties.adId), Date.now())
+      } catch (error) {}
+    },
+
+    /**
+     * 同步是否需要检查微信系统开屏广告
+     * @returns {void}
+     */
+    syncNativeSplashCheck() {
+      this.setData({
+        resolvedCheckNativeSplash: Boolean(this.properties.checkNativeSplash && !this.getNativeSplashConsumed(this.properties.adId))
+      })
+    },
+
+    /**
+     * 判断是否启用远程广告配置
+     * @returns {boolean}
+     */
+    shouldUseRemoteConfig() {
+      return Boolean(this.properties.autoLoad && this.properties.adId)
+    },
+
+    /**
+     * 获取全局 SDK 实例
+     * @returns {Record<string, any> | null}
+     */
+    getSdkInstance() {
+      const app = typeof getApp === 'function' ? getApp() : null
+
+      if (!app) return null
+
+      const sdkKey = this.properties.sdkKey || 'biNova'
+      return app[sdkKey] || app.globalData && app.globalData[sdkKey] || null
+    },
+
+    /**
+     * 获取当前小程序 appId
+     * @returns {string}
+     */
+    getMiniProgramAppId() {
+      try {
+        if (typeof wx.getAccountInfoSync === 'function') {
+          const accountInfo = wx.getAccountInfoSync()
+          return accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId || ''
+        }
+      } catch (error) {
+        return ''
+      }
+
+      return ''
+    },
+
+    /**
+     * 清理远程广告状态
+     * @returns {void}
+     */
+    clearRemoteState() {
+      /** 把请求版本号往前推进一位，让之前未完成的异步请求全部过期，避免旧请求回来后误更新组件状态 */
+      this.requestToken = (this.requestToken || 0) + 1
+      this.lastRemoteRequestKey = ''
+      this.setData({
+        remoteLoading: false,
+        remoteLoaded: false,
+        remoteAdData: null
+      })
+    },
+
+    /**
+     * 构建远程广告请求参数
+     * @returns {Record<string, any>}
+     */
+    buildRemoteRequestOptions() {
+      const adOptions = this.properties.adOptions && typeof this.properties.adOptions === 'object'
+        ? this.properties.adOptions
+        : {}
+      const appId = this.getMiniProgramAppId()
+
+      return {
+        ...adOptions,
+        adId: this.properties.adId,
+        placementId: adOptions.placementId || this.properties.adId,
+        appId: adOptions.appId || appId,
+        type: this.data.resolvedType
+      }
+    },
+
+    /**
+     * 获取远程广告请求去重键
+     * @param {Record<string, any>} requestOptions 请求参数
+     * @returns {string}
+     */
+    getRemoteRequestKey(requestOptions) {
+      try {
+        return JSON.stringify(requestOptions || {})
+      } catch (error) {
+        return `${requestOptions && requestOptions.appId || ''}_${requestOptions && requestOptions.placementId || ''}`
+      }
+    },
+
+    /**
+     * 解析远程广告数据
+     * @param {Record<string, any>} remoteData 远程广告配置
+     * @returns {{unitId: string, customAd: Record<string, any> | null, show: boolean}}
+     */
+    resolveRemoteAdData(remoteData) {
+      const unitId = remoteData && remoteData.unitId || ''
+      const customAd = remoteData && (remoteData.customAd || remoteData.custom) || null
+      const show = remoteData && typeof remoteData.show === 'boolean'
+        ? remoteData.show
+        : Boolean(unitId || customAd)
+
+      return {
+        unitId,
+        customAd,
+        show
+      }
+    },
+
+    /**
+     * 同步组件最终消费的广告数据
+     * @param {{unitId?: string, customAd?: Record<string, any> | null, show?: boolean}} [options] 可选覆盖参数
+     * @returns {void}
+     */
+    syncResolvedAdData(options) {
+      const nextOptions = options || {}
+      const remoteEnabled = this.shouldUseRemoteConfig()
+      const remoteAdData = remoteEnabled ? this.data.remoteAdData : null
+      const remoteResolved = remoteAdData ? this.resolveRemoteAdData(remoteAdData) : null
+      const unitId = remoteResolved ? remoteResolved.unitId : (nextOptions.unitId !== undefined ? nextOptions.unitId : this.properties.unitId)
+      const customAd = remoteResolved ? remoteResolved.customAd : (nextOptions.customAd !== undefined ? nextOptions.customAd : this.properties.customAd)
+      const show = nextOptions.show !== undefined ? nextOptions.show : this.properties.show
+      const resolvedShow = Boolean(show && (!remoteEnabled || !this.properties.adId || !this.data.remoteLoaded || remoteResolved && remoteResolved.show))
+
+      this.setData({
+        resolvedUnitId: unitId || '',
+        resolvedCustomAd: customAd || null,
+        resolvedShow
+      })
+    },
+
+    /**
+     * 触发配置错误事件
+     * @param {Record<string, any>} detail 错误详情
+     * @returns {void}
+     */
+    triggerConfigError(detail) {
+      this.triggerEvent('configerror', detail)
+      this.triggerEvent('error', detail)
+    },
+
+    /**
+     * 拉取远程广告配置
+     * @param {string} reason 触发原因
+     * @returns {Promise<void>}
+     */
+    async refreshRemoteConfig(reason) {
+      if (!this.shouldUseRemoteConfig()) {
+        this.syncResolvedAdData()
+        return
+      }
+
+      const requestOptions = this.buildRemoteRequestOptions()
+      const requestKey = this.getRemoteRequestKey(requestOptions)
+
+      if (this.lastRemoteRequestKey === requestKey && (this.data.remoteLoading || this.data.remoteLoaded)) {
+        // console.info('[BiDisplayAd] 跳过重复广告配置请求', {
+        //   reason,
+        //   requestOptions
+        // })
+        return
+      }
+
+      const sdk = this.getSdkInstance()
+
+      if (!sdk || !sdk.ads || typeof sdk.ads.getDisplayAdConfig !== 'function') {
+        this.clearRemoteState()
+        this.syncResolvedAdData({
+          unitId: '',
+          customAd: null,
+          show: false
+        })
+        this.triggerConfigError({
+          type: this.data.resolvedType,
+          adId: this.properties.adId,
+          errCode: 'DISPLAY_AD_SDK_NOT_READY',
+          errMsg: '未获取到可用的广告服务 SDK，请先注入全局 biNova 实例'
+        })
+        return
+      }
+
+      const requestToken = (this.requestToken || 0) + 1
+      this.requestToken = requestToken
+      this.lastRemoteRequestKey = requestKey
+
+      // console.info('[BiDisplayAd] 开始获取广告配置', {
+      //   reason,
+      //   requestOptions
+      // })
+
+      this.setData({
+        remoteLoading: true,
+        remoteLoaded: false,
+        remoteAdData: null
+      })
+      this.syncResolvedAdData({
+        unitId: '',
+        customAd: null,
+        show: false
+      })
+
+      try {
+        const result = await sdk.ads.getDisplayAdConfig(requestOptions)
+
+        if (requestToken !== this.requestToken) return
+
+        // console.info('[BiDisplayAd] 广告配置接口返回', result)
+
+        if (!result || result.code !== 0 || !result.data) {
+          this.setData({
+            remoteLoading: false,
+            remoteLoaded: true,
+            remoteAdData: null
+          })
+          this.syncResolvedAdData({
+            unitId: '',
+            customAd: null,
+            show: false
+          })
+          this.triggerConfigError({
+            type: this.data.resolvedType,
+            adId: this.properties.adId,
+            errCode: 'DISPLAY_AD_REMOTE_CONFIG_FAIL',
+            errMsg: result && result.message || '获取展示广告配置失败',
+            rawResult: result || null
+          })
+          return
+        }
+
+        this.setData({
+          remoteLoading: false,
+          remoteLoaded: true,
+          remoteAdData: result.data
+        })
+        this.syncResolvedAdData()
+        this.triggerEvent('configload', {
+          type: this.data.resolvedType,
+          adId: this.properties.adId,
+          requestOptions,
+          data: result.data
+        })
+      } catch (error) {
+        if (requestToken !== this.requestToken) return
+
+        console.error('[BiDisplayAd] 广告配置请求异常', error)
+
+        this.setData({
+          remoteLoading: false,
+          remoteLoaded: true,
+          remoteAdData: null
+        })
+        this.syncResolvedAdData({
+          unitId: '',
+          customAd: null,
+          show: false
+        })
+        this.triggerConfigError({
+          type: this.data.resolvedType,
+          adId: this.properties.adId,
+          errCode: 'DISPLAY_AD_REMOTE_CONFIG_EXCEPTION',
+          errMsg: error && error.message || '获取展示广告配置异常',
+          error
+        })
+      }
+    },
+
+    /**
+     * 统一透传子组件事件
+     * @param {'load' | 'error' | 'close' | 'action' | 'hide' | 'openWebview'} eventName 事件名称
+     * @param {Record<string, any>} event 原始事件对象
+     * @returns {void}
+     */
+    forwardEvent(eventName, event) {
+      const detail = event && event.detail && typeof event.detail === 'object'
+        ? event.detail
+        : event && typeof event === 'object'
+          ? event
+          : {}
+
+      this.triggerEvent(eventName, {
+        adId: this.properties.adId || this.data.remoteAdData && this.data.remoteAdData.adId || '',
+        ...detail
+      })
+    },
+
+    /**
+     * 同步广告类型
+     * @param {string} nextType 广告类型
+     * @returns {void}
+     */
+    syncType(nextType) {
+      if (SUPPORTED_TYPES.includes(nextType)) {
+        this.setData({ resolvedType: nextType })
+        return
+      }
+
+      this.setData({ resolvedType: 'banner' })
+      this.triggerEvent('error', {
+        type: 'banner',
+        errCode: 'UNSUPPORTED_DISPLAY_AD_TYPE',
+        errMsg: `不支持的展示广告类型：${nextType}，请使用 "banner" 或 "splash"`
+      })
+    },
+
+    /**
+     * 处理广告加载完成事件
+     * @param {Record<string, any>} event 广告加载事件
+     * @returns {void}
+     */
+    handleLoad(event) {
+      const detail = event && event.detail && typeof event.detail === 'object'
+        ? event.detail
+        : event && typeof event === 'object'
+          ? event
+          : {}
+
+      if (detail.nativeSplash) {
+        this.setNativeSplashConsumed()
+      }
+
+      this.forwardEvent('load', event)
+    },
+
+    /**
+     * 处理广告错误事件
+     * @param {Record<string, any>} event 广告错误事件
+     * @returns {void}
+     */
+    handleError(event) {
+      this.forwardEvent('error', event)
+    },
+
+    /**
+     * 处理广告关闭事件
+     * @param {Record<string, any>} event 广告关闭事件
+     * @returns {void}
+     */
+    handleClose(event) {
+      this.forwardEvent('close', event)
+    },
+
+    /**
+     * 处理广告点击事件
+     * @param {Record<string, any>} event 广告点击事件
+     * @returns {void}
+     */
+    handleAction(event) {
+      this.forwardEvent('action', event)
+    },
+
+    /**
+     * 处理广告隐藏事件
+     * @param {Record<string, any>} event 广告隐藏事件
+     * @returns {void}
+     */
+    handleHide(event) {
+      this.forwardEvent('hide', event)
+    },
+
+    /**
+     * 处理打开 WebView 事件
+     * @param {Record<string, any>} event WebView 打开事件
+     * @returns {void}
+     */
+    handleOpenWebview(event) {
+      this.forwardEvent('openWebview', event)
+    }
+  }
+})

package/src/ad/display/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bi-banner-ad": "../banner/index",
+    "bi-splash-ad": "../splash/index"
+  }
+}

package/src/ad/display/index.wxml

@@ -0,0 +1,30 @@
+<!-- Banner 广告组件 -->
+<bi-banner-ad
+  wx:if="{{resolvedType === 'banner'}}"
+  unit-id="{{resolvedUnitId}}"
+  custom-ad="{{resolvedCustomAd}}"
+  ad-intervals="{{adIntervals}}"
+  bind:load="handleLoad"
+  bind:error="handleError"
+  bind:close="handleClose"
+  bind:action="handleAction"
+  bind:openWebview="handleOpenWebview"
+/>
+
+<!-- 开屏广告组件 -->
+<bi-splash-ad
+  wx:elif="{{resolvedType === 'splash'}}"
+  unit-id="{{resolvedUnitId}}"
+  custom-ad="{{resolvedCustomAd}}"
+  show="{{resolvedShow}}"
+  z-index="{{zIndex}}"
+  picture-in-picture="{{pictureInPicture}}"
+  check-native-splash="{{resolvedCheckNativeSplash}}"
+  jump-seconds="{{jumpSeconds}}"
+  bind:load="handleLoad"
+  bind:error="handleError"
+  bind:close="handleClose"
+  bind:action="handleAction"
+  bind:hide="handleHide"
+  bind:openWebview="handleOpenWebview"
+/>

package/src/ad/display/index.wxss

@@ -0,0 +1 @@
+/* bi-display-ad styles are delegated to bi-banner-ad and bi-splash-ad */