qb-pc-sdk 1.1.0 → 1.1.1

package/README.md

@@ -141,6 +141,31 @@ new AdSDK(config)
 
 ### 实例方法
 
+#### getAdSize()
+
+获取广告尺寸信息。
+
+```javascript
+const adSDK = new AdSDK({
+  appId: 'your-app-id',
+  placementId: 'your-placement-id',
+  container: '#ad-container'
+});
+
+// 在广告加载成功后获取尺寸
+adSDK.onAdLoaded = (ad) => {
+  const size = adSDK.getAdSize();
+  console.log('广告尺寸:', size);
+  // 输出: { imageWidth: 640, imageHeight: 360, hasVideo: false, videoUrl: undefined }
+};
+```
+
+**返回值**：
+- `imageWidth` (number): 广告图片宽度（像素）
+- `imageHeight` (number): 广告图片高度（像素）
+- `hasVideo` (boolean): 是否有视频
+- `videoUrl` (string | undefined): 视频URL（如果有）
+
 #### destroy()
 
 销毁广告实例，清理 DOM、解绑事件、释放资源。
@@ -162,6 +187,23 @@ adSDK.destroy();
 - 广告会自动显示关闭按钮（右上角 ×），点击即可关闭
 - 也可以手动调用 `destroy()` 方法销毁广告
 
+### 广告尺寸自适应
+
+广告会自动适应容器大小。建议在 CSS 中为容器设置明确的宽高：
+
+```css
+#ad-container {
+  width: 200px;
+  height: 120px;
+}
+```
+
+**自适应规则**：
+- 广告会完全填充容器，不会超出
+- 图片使用 `object-fit: contain` 模式，完整显示不裁剪
+- 小尺寸容器（宽度<300px 或高度<200px）会自动应用优化样式
+- 文字和按钮会根据容器大小自动调整
+
 ### 示例
 
 #### 基本使用

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.1.0",
-  "description": "趣变广告 SDK 封装器 - 添加关闭按钮增加销毁广告选项",
+  "version": "1.1.1",
+  "description": "趣变广告 SDK 封装器 - 修复广告自适应问题",
   "main": "index.js",
   "files": [
     "index.js",

package/src/ad-sdk-wrapper.js

@@ -290,20 +290,26 @@
         GDT_SDK_ID: 2 // 标识
     };
 
-    // 内部样式，确保广告一定有默认样式，不会塌缩
+    // 内部样式，确保广告一定有默认样式，不会塌缩，并支持自适应容器大小
     const INJECT_CSS = `
-        .q-ad-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border: 1px solid #eee; overflow: hidden; font-family: sans-serif; position: relative; }
-        .q-media-container { width: 100%; height: 200px; background: #000; position: relative; display: flex; align-items: center; justify-content: center; }
-        .q-ad-img, .q-ad-video { width: 100%; height: 100%; object-fit: cover; display: block; }
-        .q-content-container { padding: 12px; flex: 1; display: flex; flex-direction: column; }
-        .q-ad-title { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .q-ad-desc { font-size: 12px; color: #666; margin: 0 0 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-        .q-cta-btn { background: #007bff; color: #fff; border: none; padding: 6px 15px; border-radius: 4px; font-size: 12px; cursor: pointer; align-self: flex-start; }
+        .q-ad-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border: 1px solid #eee; overflow: hidden; font-family: sans-serif; position: relative; box-sizing: border-box; }
+        .q-media-container { width: 100%; flex: 1; min-height: 0; background: #000; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+        .q-ad-img, .q-ad-video { width: 100%; height: 100%; object-fit: contain; display: block; }
+        .q-content-container { padding: 8px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
+        .q-ad-title { font-size: 14px; font-weight: bold; color: #333; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
+        .q-ad-desc { font-size: 11px; color: #666; margin: 0 0 6px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; flex-shrink: 0; }
+        .q-cta-btn { background: #007bff; color: #fff; border: none; padding: 4px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; align-self: flex-start; flex-shrink: 0; }
         .q-ad-tag { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,0.3); color: #fff; font-size: 10px; padding: 2px 4px; border-radius: 2px; }
-        .q-ad-close { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; z-index: 10; transition: background 0.2s; }
+        .q-ad-close { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 10; transition: background 0.2s; flex-shrink: 0; }
         .q-ad-close:hover { background: rgba(0,0,0,0.7); }
         .q-ad-close:active { background: rgba(0,0,0,0.9); }
         .q-ad-destroyed { display: none !important; }
+        /* 小尺寸广告优化 */
+        .q-ad-wrapper.q-ad-small .q-media-container { flex: 1.2; }
+        .q-ad-wrapper.q-ad-small .q-content-container { padding: 6px; }
+        .q-ad-wrapper.q-ad-small .q-ad-title { font-size: 12px; }
+        .q-ad-wrapper.q-ad-small .q-ad-desc { font-size: 10px; margin-bottom: 4px; }
+        .q-ad-wrapper.q-ad-small .q-cta-btn { padding: 3px 10px; font-size: 10px; }
     `;
 
     class AdSDKWrapper {
@@ -538,9 +544,22 @@
         renderAd(ad) {
             this.currentAd = ad;
 
+            // 获取广告尺寸信息
+            const adImageWidth = ad.getImageWidth ? ad.getImageWidth() : 0;
+            const adImageHeight = ad.getImageHeight ? ad.getImageHeight() : 0;
+            
+            // 获取容器尺寸
+            const containerRect = this.container.getBoundingClientRect();
+            const containerWidth = containerRect.width || this.container.offsetWidth || 200;
+            const containerHeight = containerRect.height || this.container.offsetHeight || 120;
+            
+            // 判断是否为小尺寸广告（宽度或高度小于300px）
+            const isSmallAd = containerWidth < 300 || containerHeight < 200;
+            const wrapperClass = isSmallAd ? 'q-ad-wrapper q-ad-small' : 'q-ad-wrapper';
+
             // 构建 HTML 结构
             this.container.innerHTML = `
-                <div class="q-ad-wrapper">
+                <div class="${wrapperClass}">
                     <button class="q-ad-close" title="关闭广告">×</button>
                     <div class="q-media-container">
                         <div class="q-ad-video" style="display:none"></div>
@@ -554,6 +573,15 @@
                     </div>
                 </div>
             `;
+            
+            // 输出广告尺寸信息（调试用）
+            if (process.env.NODE_ENV !== 'production') {
+                console.log('[AdSDK] 广告尺寸信息:', {
+                    '广告图片尺寸': `${adImageWidth}x${adImageHeight}`,
+                    '容器尺寸': `${containerWidth}x${containerHeight}`,
+                    '是否小尺寸': isSmallAd
+                });
+            }
 
             // 绑定关闭按钮事件
             const closeBtn = this.container.querySelector('.q-ad-close');
@@ -600,7 +628,33 @@
                 imgEl.src = ad.getImageUrl();
             }
 
-            if (this.config.onAdLoaded) this.config.onAdLoaded(ad);
+            // 调用 onAdLoaded 回调，传入广告实例和当前 AdSDK 实例
+            if (this.config.onAdLoaded) {
+                // 使用箭头函数或 bind 确保 this 指向正确
+                try {
+                    this.config.onAdLoaded.call(this, ad, this);
+                } catch (e) {
+                    // 如果回调中出错，不影响广告显示
+                    console.warn('[AdSDK] onAdLoaded 回调执行出错:', e);
+                }
+            }
+        }
+
+        /**
+         * 获取广告尺寸信息
+         * @returns {Object} 包含广告图片宽度、高度等信息
+         */
+        getAdSize() {
+            if (!this.currentAd) {
+                return null;
+            }
+            
+            return {
+                imageWidth: this.currentAd.getImageWidth ? this.currentAd.getImageWidth() : 0,
+                imageHeight: this.currentAd.getImageHeight ? this.currentAd.getImageHeight() : 0,
+                hasVideo: this.currentAd.hasVideo ? this.currentAd.hasVideo() : false,
+                videoUrl: this.currentAd.getVideoUrl ? this.currentAd.getVideoUrl() : undefined
+            };
         }
 
         /**

package/src/example-simple.html

@@ -8,9 +8,9 @@
         body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
         #ad-slot-1 {
             width: 400px;
-            height: 300px;
-            margin: 0 auto;
-            background: #fff;
+            height: 220px;
+            margin: 20px auto;
+            box-sizing: border-box;
         }
     </style>
 </head>
@@ -42,7 +42,24 @@
                 appId: '1999364640831725629',
                 placementId: '2003009002186760245',
                 container: '#ad-slot-1',
-                onAdLoaded: () => console.log('✅ 广告加载完成'),
+                onAdLoaded: (ad, adSDKInstance) => {
+                    console.log('✅ 广告加载完成');
+                    // 获取广告尺寸信息（使用传入的 adSDKInstance 或外部的 adSDK 都可以）
+                    try {
+                        const instance = adSDKInstance || adSDK;
+                        if (instance && typeof instance.getAdSize === 'function') {
+                            const size = instance.getAdSize();
+                            if (size) {
+                                console.log('📐 广告尺寸:', {
+                                    '图片尺寸': `${size.imageWidth}x${size.imageHeight}`,
+                                    '是否有视频': size.hasVideo
+                                });
+                            }
+                        }
+                    } catch (e) {
+                        console.warn('获取广告尺寸失败:', e);
+                    }
+                },
                 onAdError: (err, msg) => console.log('❌ 广告报错:', err, msg),
                 onAdExpose: () => console.log('👀 广告曝光'),
                 onAdClick: () => console.log('🖱️ 用户点击了广告')