介绍

TRON ads Javascript Software Development Kit（Tron-Ads-sdk）

如何使用

// ad render box
<div id="wrapper"></div>

import { initAds } from 'tron-ads-sdk';

const adObj = new initAds({
    env: 1,
    wrapper: "wrapper",
    pid: "001-0-001",
    is_mock: 1,
    lang: 'cn',
    loadSuccessCallback: successFun,
    loadFailCallback: errorFun,
    clickEventCallback: clickFun,
});

API

| 参数 | 是否必填 | 描述 | 类型 | 示例 | | :-------------------- | :--------- | :----------------------------------------- | :--------- | :--------------------------------------------------------------------------------------- | | env | 是 | 生效环境 | number | 1-测试环境 2-线上环境 | | wrapper | 是 | 广告渲染容器 ID | string | 'wrapper' | | pid | 是 | 广告位 ID | string | '000-1-001' | | is_mock | 是 | 是否为 mock 模式。测试环境 1，线上需传 0 | number | 0 | | lang | 否 | 语言 | string | 'en','zh_Hant','cn','ja','ko','ar','ru','es','tr' | | loadSuccessCallback | 否 | 加载成功回调 | function | function successFun(){...} | | loadFailCallback | 否 | 加载失败回调 | function | function errorFun(){...} | | clickEventCallback | 否 | 广告点击回调 | function | function clickFun(data){...} | | unbindMessage | 否 | 清除 message 事件监听 | - | adObj.unbindMessage() | | expand | 否 | 拓展信息字段 | object | {uuid: 'string', waddr: 'string', tokenlist: 'string,string,string...',txid:'string', themeStyle: ThemeStyle} | | updateTheme | 否 | 更新主题 | - | adObj.updateTheme() |

主题配置 (expand.themeStyle)

通过 expand.themeStyle 对象可以自定义文字链广告组件的主题样式:

interface ThemeStyle {
  theme?: 'light' | 'dark' | 'auto';  // 主题模式，默认自动
  color?: {
    textPrimary?: string;     // 主要文本颜色
    textSecondary?: string;   // 次要文本颜色
    ctaColor?: string;        // CTA按钮颜色
  }
}

配置项说明

| 参数 | 类型 | 必填 | 说明 | 默认值 | |------|------|------|------|--------| | theme | string | 否 | 主题模式,支持 'light'/'dark'/'auto'，忽略大小写 | 'auto' | | color.textPrimary | string | 否 | 主要文本颜色 | #333333(light)/#e0e4e8(dark) | | color.textSecondary | string | 否 | 次要文本颜色 | #666666(light)/#c2c9d1(dark) | | color.ctaColor | string | 否 | CTA链接颜色 | #c23631(light)/#c14c48(dark) |

color 优先级高于 theme，如果同时配置了 color 和 theme，则 color 生效，color 未配置部分则使用 theme 的默认值

颜色值支持格式

Hex格式: '#FF0000', '#ff0000'

示例

// 初始化SDK
const adObj = new initAds({
    env: 1,
    wrapper: "wrapper",
    pid: "001-0-001",
    expand: {
        themeStyle: {
            theme: 'dark' // 使用预设主题
        }
    }
    // ...其他配置
});

// themeStyle 不传，则自动跟随系统主题

// 使用预设主题 + 自定义颜色
expand: {
  themeStyle: {
    theme: 'dark',
    color: {
      ctaColor: '#0000ff'
    }
  }
}

// 使用自定义主题
expand: {
  themeStyle: {
    color: {
      textPrimary: '#333333',
      textSecondary: '#666666',
      ctaColor: '#0000ff'
    }
  }
}

动态切换主题

type ThemeOptions = ThemeStyle
updateTheme(options: ThemeOptions): Promise<void>

示例

// 初始化SDK
const adObj = new initAds({
    env: 1,
    wrapper: "wrapper",
    pid: "001-0-001",
    // ...其他配置
});

// 切换主题回调处理
adObj.updateTheme({
    theme: 'dark',
}).then(() => {
    console.log('主题更新成功');
}).catch(error => {
    console.error('主题更新失败:', error); // 例如颜色值错误
});

// 跟随系统主题
adObj.updateTheme({
    theme: 'auto'
});

// 切换到暗色主题
adObj.updateTheme({
    theme: 'dark'
});

// 更新部分颜色
adObj.updateTheme({
    theme: 'dark',
    color: {
        ctaColor: '#0000ff'
    }
});

// 切换自定义主题
adObj.updateTheme({
    color: {
        textPrimary: '#333333',
        textSecondary: '#666666',
        ctaColor: '#0000ff'
    }
});