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

package/src/ad/splash/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/ad/splash/index.wxml

@@ -0,0 +1,74 @@
+<view
+  wx:if="{{visible && (isWechatAd || hasCustomMedia)}}"
+  class="bi-splash-ad {{showPiP ? 'bi-splash-ad--pip' : ''}} {{pipAnimating ? 'bi-splash-ad--pip-animating' : ''}}"
+  style="z-index: {{zIndex}};"
+>
+  <!-- 微信模板广告 -->
+  <view wx:if="{{isWechatAd}}" class="bi-splash-ad__popup">
+    <view class="bi-splash-ad__media-wrapper {{showPiP ? 'bi-splash-ad__media-wrapper--pip' : ''}}">
+      <ad-custom
+        wx:if="{{visible}}"
+        class="bi-splash-ad__wechat-unit"
+        unit-id="{{unitId}}"
+        bind:load="handleLoad"
+        bind:error="handleError"
+        bind:close="handleWechatClose"
+      />
+    </view>
+  </view>
+
+  <!-- 自定义广告 -->
+  <view wx:elif="{{mediaUrl}}" class="bi-splash-ad__popup">
+    <view class="bi-splash-ad__media-shell" bindtap="handleAction">
+      <image
+        wx:if="{{isImage}}"
+        class="bi-splash-ad__media bi-splash-ad__media--background"
+        src="{{mediaUrl}}"
+        mode="aspectFill"
+        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' : ''}}"
+          src="{{mediaUrl}}"
+          poster="{{posterUrl}}"
+          autoplay="{{true}}"
+          muted="{{customAd.muted !== false}}"
+          loop="{{true}}"
+          object-fit="cover"
+          show-center-play-btn="{{false}}"
+          show-play-btn="{{false}}"
+          controls="{{false}}"
+          bindloadedmetadata="handleCustomLoad"
+          binderror="handleCustomMediaError"
+        />
+      </block>
+
+      <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>
+    </view>
+  </view>
+
+  <view wx:if="{{showPiP}}" class="bi-splash-ad__pip-close" bindtap="handlePiPClose">
+    <view class="bi-splash-ad__pip-close-text">关闭</view>
+  </view>
+
+  <view wx:if="{{!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>
+  </view>
+</view>

package/src/ad/splash/index.wxss

@@ -0,0 +1,257 @@
+.bi-splash-ad {
+  position: fixed;
+  inset: 0;
+  transform: scale(1);
+  transform-origin: right bottom;
+}
+
+.bi-splash-ad__popup {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
+  background-color: #000000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0;
+  overflow: hidden;
+  transition: all 0.28s ease-in-out;
+}
+
+.bi-splash-ad__media-wrapper {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+.bi-splash-ad__media-wrapper--pip {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bi-splash-ad__wechat-unit {
+  position: relative;
+  display: block;
+  width: 100vw;
+  max-height: 100vh;
+}
+
+.bi-splash-ad__media-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.bi-splash-ad__media {
+  width: 100%;
+  height: 100%;
+}
+
+.bi-splash-ad__media--background {
+  display: block;
+}
+
+.bi-splash-ad__video {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.bi-splash-ad__video--landscape {
+  top: 50%;
+  left: 50%;
+  width: 100vw;
+  max-width: 100vw;
+  height: 500rpx;
+  transform: translate(-50%, -50%);
+}
+
+.bi-splash-ad__content {
+  position: absolute;
+  left: 40rpx;
+  right: 40rpx;
+  bottom: 84rpx;
+  z-index: 3;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.76));
+  color: #ffffff;
+  box-sizing: border-box;
+}
+
+.bi-splash-ad__badge {
+  position: absolute;
+  right: 32rpx;
+  bottom: 130rpx;
+  z-index: 3;
+  min-width: 72rpx;
+  height: 38rpx;
+  padding: 0 12rpx;
+  box-sizing: border-box;
+  border-radius: 19rpx;
+  background: rgba(0, 0, 0, 0.52);
+  color: #ffffff;
+  font-size: 20rpx;
+  line-height: 38rpx;
+  text-align: center;
+}
+
+.bi-splash-ad__title {
+  display: block;
+  margin-bottom: 12rpx;
+  font-size: 36rpx;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.bi-splash-ad__description {
+  display: block;
+  margin-bottom: 20rpx;
+  font-size: 26rpx;
+  line-height: 1.6;
+}
+
+.bi-splash-ad__action {
+  width: 100%;
+  min-height: 0;
+  padding: 18rpx 24rpx;
+  border: none;
+  border-radius: 16rpx;
+  background: linear-gradient(135deg, #1677ff, #0f52ba);
+  color: #ffffff;
+  font-size: 26rpx;
+  line-height: 1.4;
+}
+
+.bi-splash-ad__action::after {
+  display: none;
+}
+
+.bi-splash-ad__skip {
+  z-index: 99;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 22rpx;
+  min-width: 148rpx;
+  height: 64rpx;
+  box-sizing: border-box;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 32rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.bi-splash-ad__skip-divider {
+  width: 1rpx;
+  height: 24rpx;
+  margin: 0 12rpx;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.bi-splash-ad__skip-text {
+  line-height: 24rpx;
+}
+
+.bi-splash-ad--pip {
+  top: auto;
+  left: auto;
+  right: 24rpx;
+  bottom: 24rpx;
+  width: 240rpx;
+  height: 320rpx;
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.28);
+}
+
+.bi-splash-ad--pip-animating {
+  animation: bi-splash-ad-pip-scale 0.28s ease-in-out forwards;
+}
+
+.bi-splash-ad--pip .bi-splash-ad__popup {
+  width: 240rpx;
+  height: 320rpx;
+  border-radius: 24rpx;
+}
+
+.bi-splash-ad--pip .bi-splash-ad__content {
+  left: 16rpx;
+  right: 16rpx;
+  bottom: 16rpx;
+  padding: 16rpx;
+  border-radius: 18rpx;
+}
+
+.bi-splash-ad--pip .bi-splash-ad__badge {
+  display: none;
+}
+
+.bi-splash-ad--pip .bi-splash-ad__title {
+  margin-bottom: 8rpx;
+  font-size: 24rpx;
+}
+
+.bi-splash-ad__pip-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.bi-splash-ad__pip-close {
+  width: 300rpx;
+  height: 250rpx;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+
+.bi-splash-ad__pip-close-text {
+  width: 200rpx;
+  height: 110rpx;
+  line-height: 110rpx;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 60rpx;
+  font-size: 60rpx;
+  color: #222222;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  margin: 20rpx 20rpx 0 0;
+}
+
+@keyframes bi-splash-ad-pip-scale {
+  0% {
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    transform: scale(1);
+    border-radius: 0;
+  }
+
+  100% {
+    right: 24rpx;
+    bottom: 24rpx;
+    width: 240rpx;
+    height: 320rpx;
+    transform: scale(1);
+    border-radius: 24rpx;
+  }
+}

package/src/ad/utils.js

@@ -0,0 +1,139 @@
+/**
+ * @Description Weapp 广告组件公共工具方法
+ * @Author wutao
+ * @Date 2026-04-17
+ * @LastEditors wutao
+ * @LastEditTime 2026-04-17
+ */
+
+/**
+ * 获取跳转目标类型
+ * @param {Record<string, any> | null | undefined} customAd 自定义广告数据
+ * @returns {'miniProgram' | 'internal' | 'web' | 'none'}
+ */
+function getNavigationType(customAd) {
+  if (!customAd) return 'none'
+
+  if (customAd.appId || customAd.miniProgramAppId || customAd.jumpAppId) {
+    return 'miniProgram'
+  }
+
+  if (customAd.path || customAd.pagePath || customAd.jumpPath || customAd.targetUrl) {
+    return 'internal'
+  }
+
+  if (customAd.url || customAd.webUrl || customAd.h5Url) {
+    return 'web'
+  }
+
+  return 'none'
+}
+
+/**
+ * 获取小程序跳转 appId
+ * @param {Record<string, any> | null | undefined} customAd 自定义广告数据
+ * @returns {string}
+ */
+function getNavigationAppId(customAd) {
+  if (!customAd) return ''
+  return customAd.appId || customAd.miniProgramAppId || customAd.jumpAppId || ''
+}
+
+/**
+ * 获取跳转路径
+ * @param {Record<string, any> | null | undefined} customAd 自定义广告数据
+ * @returns {string}
+ */
+function getNavigationPath(customAd) {
+  if (!customAd) return ''
+  return customAd.path || customAd.pagePath || customAd.jumpPath || customAd.targetUrl || ''
+}
+
+/**
+ * 获取 Web 跳转地址
+ * @param {Record<string, any> | null | undefined} customAd 自定义广告数据
+ * @returns {string}
+ */
+function getWebUrl(customAd) {
+  if (!customAd) return ''
+  return customAd.url || customAd.webUrl || customAd.h5Url || ''
+}
+
+/**
+ * 执行自定义广告跳转
+ * @param {Object} options 跳转参数
+ * @param {Record<string, any> | null | undefined} options.customAd 自定义广告数据
+ * @param {Record<string, any>} options.actionDetail 点击事件载荷
+ * @param {(detail: Record<string, any>) => void} options.onOpenWebview 打开 WebView 回调
+ * @param {(detail: Record<string, any>) => void} options.onError 错误回调
+ * @param {(provider: 'wechat' | 'custom', event?: Record<string, any> | null, extraDetail?: Record<string, any>) => Record<string, any>} options.resolveEventDetail 事件合并方法
+ * @param {string} options.miniProgramErrorCode 小程序跳转失败错误码
+ * @param {string} options.navigateErrorCode 内部页面跳转失败错误码
+ * @returns {void}
+ */
+function navigateCustomAd(options) {
+  const {
+    customAd,
+    actionDetail,
+    onOpenWebview,
+    onError,
+    resolveEventDetail,
+    miniProgramErrorCode,
+    navigateErrorCode
+  } = options
+
+  if (!customAd) return
+
+  const targetType = getNavigationType(customAd)
+  const appId = getNavigationAppId(customAd)
+  const path = getNavigationPath(customAd)
+  const webUrl = getWebUrl(customAd)
+
+  if (targetType === 'miniProgram' && appId) {
+    if (typeof wx.navigateToMiniProgram !== 'function') return
+
+    wx.navigateToMiniProgram({
+      appId,
+      path: path || '',
+      fail: (error) => {
+        onError({
+          ...resolveEventDetail(actionDetail.provider, null),
+          errCode: miniProgramErrorCode,
+          errMsg: error.errMsg || '跳转到其他小程序失败'
+        })
+      }
+    })
+    return
+  }
+
+  if (targetType === 'internal' && path) {
+    if (typeof wx.navigateTo !== 'function') return
+
+    wx.navigateTo({
+      url: path,
+      fail: (error) => {
+        onError({
+          ...resolveEventDetail(actionDetail.provider, null),
+          errCode: navigateErrorCode,
+          errMsg: error.errMsg || '页面跳转失败'
+        })
+      }
+    })
+    return
+  }
+
+  if (targetType === 'web' && webUrl) {
+    onOpenWebview({
+      ...actionDetail,
+      url: webUrl
+    })
+  }
+}
+
+module.exports = {
+  getNavigationType,
+  getNavigationAppId,
+  getNavigationPath,
+  getWebUrl,
+  navigateCustomAd
+}

package/src/bi-ad-card/index.js

@@ -0,0 +1,17 @@
+Component({
+  externalClasses: ['bi-ad-card-button-class'],
+  properties: {
+    image: { type: String, value: '' },
+    title: { type: String, value: '广告' },
+    description: { type: String, value: '广告说明文字' },
+    buttonText: { type: String, value: '立即查看' }
+  },
+  methods: {
+    onClose() {
+      this.triggerEvent('close')
+    },
+    onAction() {
+      this.triggerEvent('action')
+    }
+  }
+})

package/src/bi-ad-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "externalClasses": ["bi-ad-card-button-class"]
+}

package/src/bi-ad-card/index.wxml

@@ -0,0 +1,8 @@
+<view class="bi-ad-card">
+  <button class="bi-ad-card__close" aria-label="关闭" bindtap="onClose">&times;</button>
+  <image class="bi-ad-card__image" src="{{image}}" mode="aspectFill" />
+  <view class="bi-ad-card__content">
+    <text class="bi-ad-card__description">{{description}}</text>
+    <button class="bi-ad-card__button bi-ad-card-button-class" bindtap="onAction">{{buttonText}}</button>
+  </view>
+</view>