qb-pc-sdk 1.0.8 → 1.1.0

package/README.md

@@ -139,8 +139,33 @@ new AdSDK(config)
 - `onAdExpose` (function, 可选): 广告曝光回调
 - `onAdClick` (function, 可选): 广告点击回调
 
+### 实例方法
+
+#### destroy()
+
+销毁广告实例，清理 DOM、解绑事件、释放资源。
+
+```javascript
+const adSDK = new AdSDK({
+  appId: 'your-app-id',
+  placementId: 'your-placement-id',
+  container: '#ad-container'
+});
+
+// 销毁广告
+adSDK.destroy();
+```
+
+**说明**：
+- 调用后会清空广告容器内容
+- 会调用底层 SDK 的 `destroy()` 方法释放资源
+- 广告会自动显示关闭按钮（右上角 ×），点击即可关闭
+- 也可以手动调用 `destroy()` 方法销毁广告
+
 ### 示例
 
+#### 基本使用
+
 ```javascript
 const AdSDK = require('qb-pc-sdk');
 
@@ -163,6 +188,41 @@ const adSDK = new AdSDK({
 });
 ```
 
+#### 销毁广告示例
+
+```javascript
+const adSDK = new AdSDK({
+  appId: 'your-app-id',
+  placementId: 'your-placement-id',
+  container: '#ad-container'
+});
+
+// 方式1：点击广告右上角的关闭按钮（自动销毁）
+// 广告渲染时会自动显示关闭按钮
+
+// 方式2：手动调用 destroy 方法
+document.getElementById('close-ad-btn').addEventListener('click', () => {
+  adSDK.destroy();
+});
+
+// 方式3：在组件销毁时调用（Vue/React）
+// Vue
+onBeforeUnmount(() => {
+  if (adSDK) {
+    adSDK.destroy();
+  }
+});
+
+// React
+useEffect(() => {
+  return () => {
+    if (adSDK) {
+      adSDK.destroy();
+    }
+  };
+}, []);
+```
+
 ## 依赖
 
 - `qb-pc-ad-sdk-origin`: 底层广告 SDK（已自动在浏览器环境加载）

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.0.8",
-  "description": "趣变广告 SDK 封装器 - 隐藏自动请求微信sdk",
+  "version": "1.1.0",
+  "description": "趣变广告 SDK 封装器 - 添加关闭按钮增加销毁广告选项",
   "main": "index.js",
   "files": [
     "index.js",

package/src/ad-sdk-wrapper.js

@@ -285,8 +285,8 @@
 
     // 内部常量配置
     const API_CONFIG = {
-        INIT: 'http://test.qubiankeji.com:8084/pc/init',
-        POSITION: 'http://test.qubiankeji.com:8084/pc/position',
+        INIT: 'http://app.qubiankeji.com:8084/pc/init',
+        POSITION: 'http://app.qubiankeji.com:8084/pc/position',
         GDT_SDK_ID: 2 // 标识
     };
 
@@ -300,6 +300,10 @@
         .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-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: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; }
     `;
 
     class AdSDKWrapper {
@@ -316,6 +320,9 @@
             this.gdtPlacementId = null;
             this.currentAd = null;
 
+            // 检测移动端环境并提示
+            this._checkMobileEnvironment();
+
             this._injectStyles();
 
             this.container = typeof this.config.container === 'string'
@@ -329,6 +336,27 @@
             }
         }
 
+        // 检测移动端环境
+        _checkMobileEnvironment() {
+            if (typeof window !== 'undefined' && window.navigator) {
+                const userAgent = window.navigator.userAgent || '';
+                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+                
+                if (isMobile) {
+                    console.warn('[AdSDK] ⚠️ 检测到移动端环境，这是 PC 端 SDK，可能在移动端无法正常工作。建议使用移动端专用 SDK。');
+                    if (this.config.onAdError) {
+                        // 不立即触发错误，让用户决定是否继续
+                        setTimeout(() => {
+                            this.config.onAdError(
+                                new Error('移动端环境警告'),
+                                '这是 PC 端 SDK，移动端可能无法正常加载广告'
+                            );
+                        }, 100);
+                    }
+                }
+            }
+        }
+
         // 注入默认 CSS
         _injectStyles() {
             if (!document.getElementById('q-ad-styles')) {
@@ -347,14 +375,33 @@
                     fetch(`${API_CONFIG.POSITION}?positionId=${this.config.placementId}`).then(r => r.json())
                 ]);
 
+                // 处理返回数据结构：支持 { data: {...} } 或直接返回数据
+                const initData = initRes.data || initRes;
+                const posData = posRes.data || posRes;
+
                 // 2. 提取 AppID
-                this.gdtAppId = initRes.thirdIdMap ? initRes.thirdIdMap[String(API_CONFIG.GDT_SDK_ID)] : null;
+                this.gdtAppId = initData.thirdIdMap ? initData.thirdIdMap[String(API_CONFIG.GDT_SDK_ID)] : null;
 
                 // 3. 执行广告位筛选逻辑
-                this.gdtPlacementId = this._selectPlacementId(posRes);
+                this.gdtPlacementId = this._selectPlacementId(posData);
+
+                // 添加调试日志（始终输出，便于排查问题）
+                console.log('[AdSDK] 初始化数据:', {
+                    initRes: initRes,
+                    posRes: posRes,
+                    initData: initData,
+                    posData: posData,
+                    gdtAppId: this.gdtAppId,
+                    gdtPlacementId: this.gdtPlacementId
+                });
 
                 if (!this.gdtAppId || !this.gdtPlacementId) {
-                    throw new Error('未找到匹配的(sdkId:2)配置信息');
+                    const errorMsg = `未找到匹配的(sdkId:2)配置信息 - AppId: ${this.gdtAppId}, PlacementId: ${this.gdtPlacementId}`;
+                    console.error('[AdSDK]', errorMsg, {
+                        initData: initData,
+                        posData: posData
+                    });
+                    throw new Error(errorMsg);
                 }
 
                 this._checkAndRun();
@@ -368,21 +415,62 @@
          * 规则：headSetList优先；否则选positionSetList中优先级最高的
          */
         _selectPlacementId(data) {
+            if (!data) {
+                console.error('[AdSDK] _selectPlacementId: data 为空');
+                return null;
+            }
+
+            // 添加调试信息
+            console.log('[AdSDK] _selectPlacementId 输入数据:', data);
+            const targetSdkId = API_CONFIG.GDT_SDK_ID;
+            console.log('[AdSDK] 查找 sdkId (类型:', typeof targetSdkId, '值:', targetSdkId, ')');
+
             // A. 优先检查 headSetList
-            if (data.headSetList && data.headSetList.length > 0) {
-                const headAd = data.headSetList.find(item => item.sdkId === API_CONFIG.GDT_SDK_ID);
-                if (headAd) return headAd.positionId;
+            if (data.headSetList && Array.isArray(data.headSetList) && data.headSetList.length > 0) {
+                console.log('[AdSDK] 检查 headSetList:', data.headSetList);
+                const headAd = data.headSetList.find(item => {
+                    // 支持数字和字符串类型的比较
+                    const itemSdkId = Number(item.sdkId);
+                    const match = itemSdkId === targetSdkId || String(item.sdkId) === String(targetSdkId);
+                    if (!match) {
+                        console.log('[AdSDK] headSetList 项不匹配:', item, 'sdkId:', item.sdkId, '类型:', typeof item.sdkId);
+                    }
+                    return match;
+                });
+                if (headAd) {
+                    console.log('[AdSDK] ✅ 在 headSetList 中找到匹配项:', headAd);
+                    return headAd.positionId;
+                }
             }
 
             // B. 检查 positionSetList
-            if (data.positionSetList && data.positionSetList.length > 0) {
+            if (data.positionSetList && Array.isArray(data.positionSetList) && data.positionSetList.length > 0) {
+                console.log('[AdSDK] 检查 positionSetList:', data.positionSetList);
                 const sortedList = data.positionSetList
-                    .filter(item => item.sdkId === API_CONFIG.GDT_SDK_ID)
-                    .sort((a, b) => b.callbackPriority - a.callbackPriority); // 按优先级从大到小排序
-
-                return sortedList.length > 0 ? sortedList[0].positionId : null;
+                    .filter(item => {
+                        // 支持数字和字符串类型的比较
+                        const itemSdkId = Number(item.sdkId);
+                        const match = itemSdkId === targetSdkId || String(item.sdkId) === String(targetSdkId);
+                        console.log('[AdSDK] positionSetList 项检查:', {
+                            item: item,
+                            itemSdkId: item.sdkId,
+                            itemSdkIdType: typeof item.sdkId,
+                            targetSdkId: targetSdkId,
+                            targetSdkIdType: typeof targetSdkId,
+                            match: match
+                        });
+                        return match;
+                    })
+                    .sort((a, b) => (b.callbackPriority || 0) - (a.callbackPriority || 0)); // 按优先级从大到小排序
+
+                console.log('[AdSDK] 筛选后的列表:', sortedList);
+                if (sortedList.length > 0) {
+                    console.log('[AdSDK] ✅ 在 positionSetList 中找到匹配项:', sortedList[0]);
+                    return sortedList[0].positionId;
+                }
             }
 
+            console.error('[AdSDK] ❌ 未找到匹配的 sdkId:', targetSdkId, '数据:', data);
             return null;
         }
 
@@ -453,6 +541,7 @@
             // 构建 HTML 结构
             this.container.innerHTML = `
                 <div class="q-ad-wrapper">
+                    <button class="q-ad-close" title="关闭广告">×</button>
                     <div class="q-media-container">
                         <div class="q-ad-video" style="display:none"></div>
                         <img class="q-ad-img" style="display:none">
@@ -466,6 +555,15 @@
                 </div>
             `;
 
+            // 绑定关闭按钮事件
+            const closeBtn = this.container.querySelector('.q-ad-close');
+            if (closeBtn) {
+                closeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation(); // 阻止事件冒泡，避免触发广告点击
+                    this.destroy();
+                });
+            }
+
             const videoEl = this.container.querySelector('.q-ad-video');
             const imgEl = this.container.querySelector('.q-ad-img');
             const wrapper = this.container.querySelector('.q-ad-wrapper');
@@ -505,6 +603,40 @@
             if (this.config.onAdLoaded) this.config.onAdLoaded(ad);
         }
 
+        /**
+         * 销毁广告实例
+         * 清理 DOM、解绑事件、释放资源，并隐藏容器元素
+         */
+        destroy() {
+            try {
+                // 1. 销毁底层广告实例
+                if (this.currentAd && typeof this.currentAd.destroy === 'function') {
+                    this.currentAd.destroy();
+                    this.currentAd = null;
+                }
+
+                // 2. 清空容器内容
+                if (this.container) {
+                    this.container.innerHTML = '';
+                    // 3. 隐藏容器元素
+                    if (this.container.style) {
+                        this.container.style.display = 'none';
+                    } else {
+                        // 如果 style 不可用，使用 class
+                        this.container.classList.add('q-ad-destroyed');
+                    }
+                }
+
+                // 4. 清理引用
+                this.gdtAppId = null;
+                this.gdtPlacementId = null;
+
+                console.log('[AdSDK] 广告已销毁');
+            } catch (err) {
+                console.error('[AdSDK] 销毁广告时出错:', err);
+            }
+        }
+
         _handleError(error, message) {
             // 内部错误也进行过滤，防止将过滤掉的错误再次打印
             const errStr = String(error).toLowerCase();

package/src/example-simple.html

@@ -38,15 +38,19 @@
             console.log('✅ 封装 SDK 加载成功');
             
             // 初始化广告
-            new window.AdSDK({
-                appId: '1999336062823956569',
-                placementId: '1999381081819709520',
+            const adSDK = new window.AdSDK({
+                appId: '1999364640831725629',
+                placementId: '2003009002186760245',
                 container: '#ad-slot-1',
                 onAdLoaded: () => console.log('✅ 广告加载完成'),
                 onAdError: (err, msg) => console.log('❌ 广告报错:', err, msg),
                 onAdExpose: () => console.log('👀 广告曝光'),
                 onAdClick: () => console.log('🖱️ 用户点击了广告')
             });
+            
+            // 示例：可以通过 destroy 方法销毁广告
+            // 广告右上角会自动显示关闭按钮，点击即可关闭
+            // 也可以手动调用：adSDK.destroy();
         });
     </script>
 </body>