@dpgradio/创造性

目录 :

• 安装
• CSS: 字体和颜色
• 配置
• 隐私和跟踪
• API 密码
• 套接字
• 混合
• 认证
• 共享生成器
• 公用事业

安装

npm i @dpgradio/creative

CSS: 字体和颜色

注意,本套件第5版提供字体和颜色作为纯cs. 变量和字体不再作为 scs 变量/ 导入而可用.

示例

@import "@dpgradio/creative/styles/colors/qmusic";
@import "@dpgradio/creative/styles/fonts/qmusic";

body, html {
  background-color: rgb(var(--q-green));
  color: rgb(var(--q-grey) / 0.8);
  font-family: 'BlackBones';
}

使用以下内容来导入所有品牌的颜色和字体 :

@import "@dpgradio/creative/styles/all";

配置

使用量

在应用程序的主脚本中添加以下内容以获取配置 . 此配置也将被本套件的其他组件所使用(如隐私,跟踪等).

import { configuration } from '@dpgradio/creative'

// Global config only
await configuration.retrieveConfigForDetectedStation()

// Global and app-specific config
await configuration.retrieveConfigForDetectedStation(appId) // Default, by hostname or query parameter

// Or, if you want to retrieve the config by hostnames only.
await configuration.retrieveConfigByHostname(appId)
// Or, if you want to retrieve the config for a specific station:
await configuration.retrieveConfigForStation(stationId, appId)

// By default the first station ID (stationIdA) is used as the current station of the configuration.
// If you want to use a different station, you can do so by calling setStation:
await configuration.retrieveConfigForStations([stationIdA, stationIdB, stationIdC], appId)
configuration.setStation(stationIdC)

你可以在稍后的任何时候更改车站,而无需再次取回配置. API客户端将自动使用正确的站. 换站后需要恢复隐私和跟踪.

现在的配置可以使用如下:

import { config } from '@dpgradio/creative'

config('api_base_url') // or: config().api_base_url
config('app.default_theme') // or: config().app.default_theme

更新Schema

应用程序可以通过创建包含以下内容的脚本来创建/修改配置计划:

import { api, configuration } from '@dpgradio/creative'

api.setApiKey('<api-token-here>')

await configuration.replaceSchema('greety', [
  {
    name: 'display_language',
    type: 'options',
    default: 'dutch',
    options: ['dutch', 'english'],
  },
  {
    name: 'author_name',
    type: 'string',
  },
])

(假设高层等待和 fetch(中文(简体) )

隐私和跟踪

隐私

初始化

无 配置数字 :

import { privacy } from '@dpgradio/creative'

privacy.initialize(privacyManagerId, websiteUrl, cmpCname)

有配置( 之后) 初始化配置:

import { privacy } from '@dpgradio/creative'

privacy.initialize()

获取同意字符串

import { privacy } from '@dpgradio/creative'

const consent = await privacy.waitForConsent()

// Available properties:
consent.consentString
consent.purposes
consent.allowsTargetedAdvertising()

跟踪

import { dataLayer } from '@dpgradio/creative'

dataLayer.initialize() // Pushes gtmStart and currently authenticated user
dataLayer.pushVirtualPageView(brand) // brand is not required when the config is initialized

dataLayer.pushEvent(event, data)

与 Mixpanel 连接

import { mixpanel } from '@dpgradio/creative'
import Mixpanel from 'mixpanel-browser'

mixpanel.initialize(Mixpanel, {
    mixpanelId: 'MIXPANEL ID',
})

mixpanel.trackEvent(event, data)

API 密码

刚开始 配置数字 :

import { api } from '@dpgradio/creative'

const channels = await api.channels.all()

const globalChannels = await api.global().channels.all()

api.setRadioToken(token)
const profile = await api.members.me() // or await api.setRadioToken(token).members.me()

api.setApiKey(key)
await api.global().config.update(appId, schema)

const oldChannels = await api.onVersion('1.4').channels.all()

没有初始化 配置数字 :

import { Api } from '@dpgradio/creative'

const api = new Api('https://api.qmusic.be')

const channels = await api.channels.all()

套接字

import { socket } from '@dpgradio/creative'

socket.connect(stationId).subscribe('plays').on('play', () => {
  console.log('play')
}, { backlog: 3 }})

// or

socket.join({ station: stationId, entity: 'plays', action: 'play', options: { backlog: 3 } }, (play) => {
  console.log(play)
})

混合

在应用程序中的网页视图中使用的应用程序交互层. 互动取道"贾瓦斯克力特桥". 在iOS上它会使用 信件处理器 它在Android上使用过 Javascript 界面。 。 。 .

import { hyrid } from '@dpgradio/creative'

资料

hybrid.appInfo()

提供该应用的品牌,平台,版本等信息.

hybrid.isNativeApp()

回返 true 如果客户端是本地应用程序.

hybrid.isVersion({ iOS, Android })

回返 true 如果客户端是本地的应用程序,且该版本等于或低于给定平台的给定版本.

倾听事件

该应用程序将释放出能够被倾听的事件. 对于某些事件,例如: appLoad 必须尽快开始倾听. 因为这有时很难做到,因为.. appLoaded 方法可用于等待 appLoad 活动. 如果这个事件在方法被调用之前已经释放出来,它会立即返回.

现有活动如下:

• appLoad:应用程序已装入. 如果用户登录,则提供他们的无线电信号.
• authenticated: 用户已认证 。 它提供了用户的收音机代号.
• didAppear:网页视图可见. 如果用户登录,则提供他们的无线电信号。 ⚠️ 测试此事件何时发射 .
• didHide:网页视图被隐藏. ⚠️ 测试此事件何时发射 .

hybrid.on(event, callback, once)

听为一事. 若为 once 实值 true,召回只使用一次.

hybrid.one(event, callback)

听为一事. 召回将只召回一次.

hybrid.appLoaded()

这种方法返回一个承诺,当 appLoad 事件已释放. 如果该事件在调用方法之前已经发射, 则会立即返回 .

如果用户登录,则返回用户的收音机令牌.

示例用法:

const radioToken = await hybrid.appLoaded()
await api.members.me()

行动

为了启动应用方面的行动,我们提供以下方法.

在头罩下,这些动作被称为使用以下方法,在需要调用一个不能作为方法的动作时,也可以直接使用:

hybrid.call(method, options)

你可能会遇到这个方法 "navigateTo" 在旧代码. 这种方法现已贬值,取而代之的是 hybrid.openUrl 财务报告和审定财务报表 hybrid.openPermalink。 。 。 .

hybrid.openUrl(url, { mode })

在选择模式中打开外部 URL. 这并不意味着在我们自己的域上打开URL,例如. https://qmusic.be/this-is-a-cool-article。 。 。 . 使用这个 hybrid.openPermalink。 。 。 .

支持的模式 :

• segue:在从右侧滑出并推入当前页面的窗口中打开 URL.
• overlay: 以从下方向上滑动的全屏模式打开URL.
• in-app-browser: 在带有导航控制的内应用浏览器中打开URL. 没有支持混合功能 .
• external-browser:在默认浏览器中打开URL. 没有支持混合功能 .

hybrid.openPermalink(permalink)

打开文章等的通路. 文章将以正则显示 segue 样式.

QQ截至2023年10月,尚未获得应用程序支持.

hybrid.showAuthentication()

显示认证对话框 .

在Android上,无论登录状态如何,都会显示此功能,在iOS上,只有在用户没有登录时才会显示.

hybrid.changeHeight(height, { animated })

更改网页视图的高度.

认证

import { authentication } from '@dpgradio/creative'

// Call once, at least before requiring authentication somewhere
authentication.initialize()

// Main usage: prompts for login if needed and sets the token in the API client
await authentication.require()


// Potentially helpful methods (but not required for typical usage)
authentication.isLoggedIn()
authentication.onRadioTokenChange(callback)
authentication.onLogin(callback)
authentication.askForLogin() // Does the same as require(), but does not await the result
authentication.radioToken

共享生成器

示例

import { Shareable, ImageGeneratorProperties } from '@dpgradio/creative/share'

const shareable = new Shareable()
  .withTitle(`${this.name} is mijn seventies match!`)
  .withDescription('Ontdek wie jouw seventies match is in de Generation Quiz van Joe!')
  .withMessageText(`Mijn seventies match is ${this.name}, wat is die van jou?`)
  .redirectTo('https://article_url.com')
  .fromDomain('joe.be')

// Facebook
const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
  .withDimensions(1200, 630)
  .withPayload({ results: this.matches });

(await shareable.generateUsingImage(image)).openFacebookUrl()

// Instagram
const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
  .withDimensions(1080, 1920)
  .withPayload({ results: this.matches });

(await shareable.generateUsingImage(image)).openInstagramUrl()

// Whatsapp
const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-70s-quiz-share-fb/index.html')
  .withDimensions(1200, 630)
  .withPayload({ results: this.matches });

(await shareable.generateUsingImage(image)).openWhatsappUrl()

社区支助方案

有时需要设置严格的内容安全政策(CSP)头. 当情况是这样时,本套件中的一些方法的优美之处在于它们支持一个随机的非ce来传递到额外来源(GTM,隐私门),所以不需要明确列入白名单(因为它们在开发时可能是未知的). 我们的数据显示器和隐私门初始化器可选 nonce 参数可以传递到其中.

import { privacy, dataLayer } from '@dpgradio/creative'

privacy.initialize(privacyManagerId, websiteUrl, cmpCname, { nonce: "abc1234" })
dataLayer.initialize({ nonce: "abc1234" })

这样你就可以在您的 CSP 信头中 将这个非编号白列了

Content-Security-Policy: script-src 'nonce-abc1234'

来了! 注意这个非ce 需要随机的每个请求, 否则这个安全是没用的!

公用事业

这个软件包提供了一些实用功能.