qb-pc-sdk 1.0.9 → 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.9",
-  "description": "趣变广告 SDK 封装器 - 更新正式sdk",
+  "version": "1.1.0",
+  "description": "趣变广告 SDK 封装器 - 添加关闭按钮增加销毁广告选项",
   "main": "index.js",
   "files": [
     "index.js",

package/src/ad-sdk-wrapper.js

@@ -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')) {
@@ -513,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">
@@ -526,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');
@@ -565,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,7 +38,7 @@
             console.log('✅ 封装 SDK 加载成功');
             
             // 初始化广告
-            new window.AdSDK({
+            const adSDK = new window.AdSDK({
                 appId: '1999364640831725629',
                 placementId: '2003009002186760245',
                 container: '#ad-slot-1',
@@ -47,6 +47,10 @@
                 onAdExpose: () => console.log('👀 广告曝光'),
                 onAdClick: () => console.log('🖱️ 用户点击了广告')
             });
+            
+            // 示例：可以通过 destroy 方法销毁广告
+            // 广告右上角会自动显示关闭按钮，点击即可关闭
+            // 也可以手动调用：adSDK.destroy();
         });
     </script>
 </body>