qb-pc-sdk 1.0.0

package/config/ylh-ad-config.js

@@ -0,0 +1,20 @@
+/**
+ * 参考文档: https://ylh.qq.com/help_detail.html?cid=5068&pid=12808
+ */
+
+const YLH_AD_CONFIG = {
+  // 应用ID
+  appId: '1212355090',
+
+  // 广告位ID
+  // 注意：在API调用时使用 placementId 参数名
+  posId: '4204613922235231'
+};
+
+// 导出配置
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = YLH_AD_CONFIG;
+} else if (typeof window !== 'undefined') {
+  window.YLH_AD_CONFIG = YLH_AD_CONFIG;
+}
+

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "qb-pc-sdk",
+  "version": "1.0.0",
+  "description": "PC端广告接入项目",
+  "dependencies": {
+    "qb-pc-ad-sdk-origin": "^1.0.0"
+  }
+}

package/src/ad-sdk-wrapper.js

@@ -0,0 +1,216 @@
+/**
+ * 趣变广告 SDK 封装器
+ * 自动处理多级接口映射与原生渲染逻辑
+ */
+(function(window) {
+    'use strict';
+
+    // 内部常量配置
+    const API_CONFIG = {
+        INIT: 'http://test.qubiankeji.com:8084/pc/init',
+        POSITION: 'http://test.qubiankeji.com:8084/pc/position',
+        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-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; }
+    `;
+
+    class AdSDKWrapper {
+        constructor(config) {
+            this.config = Object.assign({
+                appId: '',
+                placementId: '',
+                container: null,
+                onAdLoaded: null,
+                onAdError: null
+            }, config);
+
+            this.gdtAppId = null;
+            this.gdtPlacementId = null;
+            this.currentAd = null;
+
+            this._injectStyles();
+
+            this.container = typeof this.config.container === 'string'
+                ? document.querySelector(this.config.container)
+                : this.config.container;
+
+            if (this.container) {
+                this._initWorkflow();
+            } else {
+                console.error('[AdSDK] 找不到容器元素');
+            }
+        }
+
+        // 注入默认 CSS
+        _injectStyles() {
+            if (!document.getElementById('q-ad-styles')) {
+                const style = document.createElement('style');
+                style.id = 'q-ad-styles';
+                style.textContent = INJECT_CSS;
+                document.head.appendChild(style);
+            }
+        }
+
+        async _initWorkflow() {
+            try {
+                // 1. 获取 ID 映射及广告位配置
+                const [initRes, posRes] = await Promise.all([
+                    fetch(`${API_CONFIG.INIT}?appId=${this.config.appId}`).then(r => r.json()),
+                    fetch(`${API_CONFIG.POSITION}?positionId=${this.config.placementId}`).then(r => r.json())
+                ]);
+
+                // 2. 提取 AppID
+                this.gdtAppId = initRes.thirdIdMap ? initRes.thirdIdMap[String(API_CONFIG.GDT_SDK_ID)] : null;
+
+                // 3. 执行广告位筛选逻辑
+                this.gdtPlacementId = this._selectPlacementId(posRes);
+
+                if (!this.gdtAppId || !this.gdtPlacementId) {
+                    throw new Error('未找到匹配的(sdkId:2)配置信息');
+                }
+
+                this._checkAndRun();
+            } catch (e) {
+                this._handleError(e, '初始化配置失败');
+            }
+        }
+
+        /**
+         * 核心逻辑：选择广告位 ID
+         * 规则：headSetList优先；否则选positionSetList中优先级最高的
+         */
+        _selectPlacementId(data) {
+            // 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;
+            }
+
+            // B. 检查 positionSetList
+            if (data.positionSetList && data.positionSetList.length > 0) {
+                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;
+            }
+
+            return null;
+        }
+
+        _checkAndRun() {
+            let attempts = 0;
+            const check = () => {
+                if (window.GDTAdSDK) {
+                    this._loadAd();
+                } else if (attempts++ < 50) {
+                    setTimeout(check, 100);
+                } else {
+                    this._handleError('SDK Load Timeout', '底层SDK加载超时');
+                }
+            };
+            check();
+        }
+
+        async _loadAd() {
+            try {
+                // 初始化底层 SDK
+                await window.GDTAdSDK.init({ appId: this.gdtAppId });
+
+                // 加载数据
+                const ads = await window.GDTAdSDK.loadNativeAdData({
+                    placementId: this.gdtPlacementId,
+                    count: 1
+                });
+
+                if (ads && ads.length > 0) {
+                    this.renderAd(ads[0]);
+                } else {
+                    this._handleError('No Ad Fill', '当前没有广告填充');
+                }
+            } catch (err) {
+                this._handleError(err, '拉取广告数据失败');
+            }
+        }
+
+        /**
+         * 渲染广告 DOM 并绑定事件
+         */
+        renderAd(ad) {
+            this.currentAd = ad;
+
+            // 构建 HTML 结构
+            this.container.innerHTML = `
+                <div class="q-ad-wrapper">
+                    <div class="q-media-container">
+                        <div class="q-ad-video" style="display:none"></div>
+                        <img class="q-ad-img" style="display:none">
+                        <span class="q-ad-tag">广告</span>
+                    </div>
+                    <div class="q-content-container">
+                        <h3 class="q-ad-title">${ad.getTitle()}</h3>
+                        <p class="q-ad-desc">${ad.getDescription()}</p>
+                        <button class="q-cta-btn">${ad.getBtnText() || '查看详情'}</button>
+                    </div>
+                </div>
+            `;
+
+            const videoEl = this.container.querySelector('.q-ad-video');
+            const imgEl = this.container.querySelector('.q-ad-img');
+            const wrapper = this.container.querySelector('.q-ad-wrapper');
+            const clickable = [
+                this.container.querySelector('.q-ad-title'),
+                this.container.querySelector('.q-cta-btn'),
+                imgEl,
+                videoEl
+            ];
+
+            // 绑定曝光和点击
+            ad.bindAdToView({
+                containerView: wrapper,
+                clickableElements: clickable,
+                adEventListener: {
+                    onExpose: () => {
+                        if (this.config.onAdExpose) this.config.onAdExpose();
+                    },
+                    onClick: () => {
+                        if (this.config.onAdClick) this.config.onAdClick();
+                    }
+                }
+            });
+
+            // 处理视频或图片素材
+            if (ad.hasVideo()) {
+                videoEl.style.display = 'block';
+                ad.bindMediaView({
+                    mediaView: videoEl,
+                    videoOption: { muted: true, autoplay: true }
+                });
+            } else {
+                imgEl.style.display = 'block';
+                imgEl.src = ad.getImageUrl();
+            }
+
+            if (this.config.onAdLoaded) this.config.onAdLoaded(ad);
+        }
+
+        _handleError(error, message) {
+            console.error(`[AdSDK Error] ${message}:`, error);
+            if (this.config.onAdError) {
+                this.config.onAdError(error, message);
+            }
+        }
+    }
+
+    window.AdSDK = AdSDKWrapper;
+})(window);

package/src/example-simple.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Native广告接入示例</title>
+    <style>
+        body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
+        #ad-slot-1 {
+            width: 400px;
+            height: 300px;
+            margin: 0 auto;
+            background: #fff;
+        }
+    </style>
+</head>
+<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>
+    <script src="ad-sdk-wrapper.js"></script>
+
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            new AdSDK({
+                appId: '1999336062823956569',
+                placementId: '1999381081819709520',
+                container: '#ad-slot-1',
+                onAdLoaded: () => console.log('✅ 广告加载完成'),
+                onAdError: (err) => console.log('❌ 广告报错:', err),
+                onAdClick: () => console.log('🖱️ 用户点击了广告')
+            });
+        });
+    </script>
+</body>
+</html>

package//345/220/257/345/212/250/346/234/215/345/212/241/345/231/250.bat

@@ -0,0 +1,34 @@
+@echo off
+chcp 65001 >nul
+echo ========================================
+echo 广告接入 - 启动本地服务器
+echo ========================================
+echo.
+
+REM 检查是否安装了Node.js
+where node >nul 2>&1
+if %ERRORLEVEL% NEQ 0 (
+    echo [错误] 未检测到Node.js
+    echo 请先安装Node.js: https://nodejs.org/
+    echo.
+    pause
+    exit /b 1
+)
+
+echo [信息] 检测到Node.js
+node --version
+echo.
+
+echo [信息] 正在启动HTTP服务器（已启用CORS）...
+echo [信息] 服务器地址: http://localhost:8080
+echo [信息] 访问地址: http://localhost:8080/src/example-simple.html
+echo.
+echo [提示] 按 Ctrl+C 停止服务器
+echo ========================================
+echo.
+
+REM 启动服务器（启用CORS）
+npx http-server -p 8080 --cors
+
+pause
+