qb-pc-sdk 1.0.1 → 1.0.3

package/README.md

@@ -1,8 +1,9 @@
 # qb-pc-sdk
 
-趣变广告 SDK 封装器 - PC端广告接入工具
-
-自动处理多级接口映射与原生渲染逻辑，简化广告接入流程。
+趣变广告 SDK 封装器 - PC端广告接入工具  
+目前PC SDK仅支持Windows系统接入，接入Mac会报错，接入时请注意。
+自动处理多级接口映射与原生渲染逻辑，简化广告接入流程。  
+从 1.0.1 起，浏览器环境会自动加载底层依赖 `qb-pc-ad-sdk-origin`，常规打包场景开箱即用。
 
 ## 安装
 
@@ -12,7 +13,7 @@ npm install qb-pc-sdk
 
 ## 使用方法
 
-### ES6 模块方式
+### ES6 模块方式（开箱即用）
 
 #### 方式一：默认导入
 
@@ -64,11 +65,45 @@ const adSDK = new AdSDKWrapper({
 });
 ```
 
-> **注意**：两种引入方式引入的都是同一个类，使用方式完全相同。`AdSDK` 和 `AdSDKWrapper` 是同一个类的不同名称。
+> **注意**：`AdSDK` / `AdSDKWrapper` 是同一个类。  
+> 在浏览器打包场景（webpack/Vite 等）无需再单独 `import 'qb-pc-ad-sdk-origin'`，入口已在有 `window` 时自动 `require` 底层 SDK。若在极端沙箱/SSR 场景下未能挂载 `window.GDTAdSDK`，可手动在入口补充 `import 'qb-pc-ad-sdk-origin';` 作为兜底。
+
+#### Vue2 / Vue3 / React 等模块化环境（推荐方式）
+
+在某些模块化打包环境中（如 Vue2），如果自动加载失败，需要手动引入底层 SDK 并挂载到 `window`：
+
+```javascript
+// main.js 或入口文件
+import 'qb-pc-ad-sdk-origin/dist/qb-pc-ad-sdk.v1.0.0.js';
+import AdSDK from 'qb-pc-sdk';
+import OriginSDK from 'qb-pc-ad-sdk-origin';
 
-### 浏览器直接引入
+// 确保 GDTAdSDK 挂载到 window（模块化环境可能需要手动挂载）
+if (typeof window !== 'undefined' && !window.GDTAdSDK) {
+    window.GDTAdSDK = OriginSDK.default || OriginSDK.GDTAdSDK || OriginSDK;
+}
+
+// 之后在组件中使用
+new AdSDK({
+    appId: 'your-app-id',
+    placementId: 'your-placement-id',
+    container: '#ad-container',
+    onAdLoaded: (ad) => console.log('广告加载成功', ad),
+    onAdError: (error, message) => console.error('广告加载失败', error, message)
+});
+```
+
+> **提示**：如果遇到 "SDK Load Timeout" 错误，通常是 `window.GDTAdSDK` 未正确挂载，请按照上述方式手动挂载。
+
+### 浏览器直接引入（不经打包）
 
 ```html
+<!-- 先引入底层 SDK（本地或 CDN 其一） -->
+<script src="/qb-pc-ad-sdk.v1.0.0.js"></script>
+<!-- 或 CDN 示例： -->
+<!-- <script src="https://unpkg.com/qb-pc-ad-sdk-origin/dist/qb-pc-ad-sdk.v1.0.0.js"></script> -->
+
+<!-- 再引入封装后的 qb-pc-sdk（UMD，本仓库 src/ad-sdk-wrapper.js） -->
 <script src="./src/ad-sdk-wrapper.js"></script>
 <script>
   // 使用 window.AdSDK
@@ -130,7 +165,7 @@ const adSDK = new AdSDK({
 
 ## 依赖
 
-- `qb-pc-ad-sdk-origin`: 底层广告 SDK
+- `qb-pc-ad-sdk-origin`: 底层广告 SDK（已自动在浏览器环境加载）
 
 ## License
 

package/index.js

@@ -1,13 +1,36 @@
 /**
  * qb-pc-sdk 入口文件
- * 导出 AdSDKWrapper 类供用户使用
+ * 1) 浏览器环境下预加载底层 SDK（qb-pc-ad-sdk-origin），确保 window.GDTAdSDK 可用
+ * 2) 导出封装器 AdSDKWrapper
  */
 
-// 导入 AdSDKWrapper 类
+const isBrowser = typeof window !== 'undefined';
+
+// 浏览器中预加载底层 SDK（仅 side-effect，挂载 window.GDTAdSDK）
+if (isBrowser) {
+    try {
+        const OriginSDK = require('qb-pc-ad-sdk-origin');
+        // 如果模块导出了对象但未挂载到 window，手动挂载
+        if (OriginSDK && !window.GDTAdSDK) {
+            window.GDTAdSDK = OriginSDK.default || OriginSDK.GDTAdSDK || OriginSDK;
+        }
+    } catch (err) {
+        // 这里不抛出，保持封装层逻辑可继续运行并给出错误回调
+        // 在 Vue/React 等环境中，用户可能需要手动引入并挂载
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[AdSDK] 底层 SDK 自动加载失败，若在模块化环境中，请手动引入：', 
+                'import \'qb-pc-ad-sdk-origin/dist/qb-pc-ad-sdk.v1.0.0.js\';', err);
+        }
+    }
+}
+
+// 导入封装器
 const AdSDKWrapper = require('./src/ad-sdk-wrapper.js');
 
 // 导出（支持多种导入方式）
 module.exports = AdSDKWrapper;
 module.exports.default = AdSDKWrapper;
 module.exports.AdSDKWrapper = AdSDKWrapper;
+// 可选：透出底层 SDK（若已加载）
+module.exports.GDTAdSDK = isBrowser ? window.GDTAdSDK : undefined;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qb-pc-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "趣变广告 SDK 封装器 - PC端广告接入工具，自动处理多级接口映射与原生渲染逻辑",
   "main": "index.js",
   "files": [

package/src/ad-sdk-wrapper.js

@@ -114,12 +114,35 @@
         _checkAndRun() {
             let attempts = 0;
             const check = () => {
+                // 优先检查 window.GDTAdSDK
                 if (window.GDTAdSDK) {
                     this._loadAd();
-                } else if (attempts++ < 50) {
+                    return;
+                }
+                
+                // 尝试从可能的模块导出中获取（适用于 Vue/React 等模块化环境）
+                // 检查是否有通过 require/import 导入的模块
+                if (typeof require !== 'undefined') {
+                    try {
+                        const OriginSDK = require('qb-pc-ad-sdk-origin');
+                        // 如果模块导出了 GDTAdSDK 或 default，尝试挂载到 window
+                        if (OriginSDK && !window.GDTAdSDK) {
+                            window.GDTAdSDK = OriginSDK.default || OriginSDK.GDTAdSDK || OriginSDK;
+                            if (window.GDTAdSDK) {
+                                this._loadAd();
+                                return;
+                            }
+                        }
+                    } catch (e) {
+                        // require 失败，继续轮询
+                    }
+                }
+                
+                // 轮询等待
+                if (attempts++ < 50) {
                     setTimeout(check, 100);
                 } else {
-                    this._handleError('SDK Load Timeout', '底层SDK加载超时');
+                    this._handleError('SDK Load Timeout', '底层SDK加载超时，请确保已正确引入 qb-pc-ad-sdk-origin');
                 }
             };
             check();

package/src/example-simple.html

@@ -17,20 +17,38 @@
 <body>
     <div id="ad-slot-1"></div>
 
-    <script src="https://qzs.gdtimg.com/union/res/pc/ylh-pc-ad-sdk.v1.25.25.js"></script>
+    <!-- 先加载底层广告 SDK（CDN 方式，避免本地路径 404） -->
+    <script src="https://unpkg.com/qb-pc-ad-sdk-origin/dist/qb-pc-ad-sdk.v1.0.0.js"></script>
+    <!-- 再加载封装后的 qb-pc-sdk（本地源码版，直接挂载 window.AdSDK） -->
     <script src="ad-sdk-wrapper.js"></script>
-    AdSDK
     <script>
         window.addEventListener('DOMContentLoaded', () => {
-            new ({
+            // 检查底层 SDK 是否加载
+            if (!window.GDTAdSDK) {
+                console.error('❌ 底层 SDK (GDTAdSDK) 未加载，请检查脚本路径');
+                return;
+            }
+            console.log('✅ 底层 SDK 加载成功');
+            
+            // 检查封装 SDK 是否加载
+            if (!window.AdSDK) {
+                console.error('❌ 封装 SDK (AdSDK) 未加载，请检查 ad-sdk-wrapper.js 路径');
+                return;
+            }
+            console.log('✅ 封装 SDK 加载成功');
+            
+            // 初始化广告
+            new window.AdSDK({
                 appId: '1999336062823956569',
                 placementId: '1999381081819709520',
                 container: '#ad-slot-1',
                 onAdLoaded: () => console.log('✅ 广告加载完成'),
-                onAdError: (err) => console.log('❌ 广告报错:', err),
+                onAdError: (err, msg) => console.log('❌ 广告报错:', err, msg),
+                onAdExpose: () => console.log('👀 广告曝光'),
                 onAdClick: () => console.log('🖱️ 用户点击了广告')
             });
         });
     </script>
 </body>
 </html>
+