想自定義廣告-

場景： app冷啟動/熱啟動-有廣告需求，就打開廣告頁，沒有的話就去登錄或者主頁

• 有的app有的需要廣告頁，有的不需要，搞個(gè)配置唄！！！

1. 通過首選項(xiàng)配置存儲我們的一些常用配置，比如要不要廣告頁，還有廣告頁的路由地址，點(diǎn)擊廣告頁跳轉(zhuǎn)的鏈接，廣告頁倒計(jì)時(shí)的秒數(shù)
2. 在入口處進(jìn)行判斷是否需要廣告頁，需要的話，跳轉(zhuǎn)廣告頁-廣告頁根據(jù)設(shè)置的參數(shù)進(jìn)行渲染
3. 廣告頁能不能設(shè)置？？？--- 因?yàn)檫\(yùn)營人員肯定不能每次都去改我們底層的代碼-這里我還可以設(shè)置成動態(tài)的-就是初始化的時(shí)候通過請求去讀一下云端的請求，然后把我們的圖片和一些參數(shù)配置下來，這樣每次你啟動app就是運(yùn)營人員給你配置的廣告和設(shè)置了

1.新建一個(gè)關(guān)于廣告類的數(shù)據(jù)模型

export class AdvertClass {showAd: boolean = false // 是否展示廣告isFull: boolean = true // 是否全屏adTime: number = 5 // 倒計(jì)時(shí)數(shù)據(jù)adUrl?: string = "" // 要跳轉(zhuǎn)的連接adImg?: ResourceStr = "" // 圖片連接
}// 全屏廣告 半屏廣告

2.在utils中新建一個(gè)關(guān)于讀取首選項(xiàng)的類，用來讀取和設(shè)置首選項(xiàng)的廣告設(shè)置- utils/setting.ets

export const defaultAd: AdvertClass = {showAd: true,isFull: true,adTime: 5,adImg: $r('[basic].media.start')
}export const USER_SETTING = 'fast_driver_setting' // 用來存儲用戶設(shè)置的首選項(xiàng)的keyexport const USER_SETTING_AD = 'fast_driver_setting_ad' // 用來存儲用戶設(shè)置廣告首選項(xiàng)的key// 負(fù)責(zé)首選項(xiàng)的讀取
export class UserSetting {context: Contextconstructor(context: Context) {this.context = context}// 獲取倉庫getStore() {return preferences.getPreferencesSync(this.context || getContext(), {name: USER_SETTING})}// 設(shè)置用戶廣告async setUserAd(ad: AdvertClass) {const store = this.getStore()store.putSync(USER_SETTING_AD, ad)await store.flush() // 讓外界能夠控制自己的流程}// 獲取用戶廣告getUserAd() {const store = this.getStore()return store.getSync(USER_SETTING_AD, defaultAd) as AdvertClass}
}export const userSetting = new UserSetting(getContext()) // 導(dǎo)出一個(gè)單例

3.實(shí)現(xiàn)Start頁的頁面結(jié)構(gòu)及倒計(jì)時(shí)邏輯

import { window } from '@kit.ArkUI'
import { AdvertClass, UserSetting } from 'home'@Entry
@Component
struct Start {userSetting: UserSetting = new UserSetting(getContext(this))@StateadObj: AdvertClass = {showAd: false,adTime: 0}timer: number = -1closeWin() {window.findWindow("ad_window").destroyWindow()}async aboutToAppear() {this.adObj = await this.userSetting.getUserAd()this.timer = setInterval(() => {if (this.adObj.adTime === 0) {clearInterval(this.timer)this.closeWin()return}this.adObj.adTime--}, 1000)}aboutToDisappear(): void {clearInterval(this.timer)}build() {Stack({ alignContent: Alignment.TopEnd }) {Image(this.adObj.adImg).objectFit(ImageFit.Cover)Text(`${this.adObj.adTime}秒后跳過`).padding({ left: 10, right: 10 }).margin({ right: 20, top: 20 }).height(30).fontSize(14).borderRadius(15).backgroundColor($r('[basic].color.MW')).textAlign(TextAlign.Center).onClick(() => {this.closeWin()})}.height('100%').width('100%').padding({ top: 40 })}
}

4.封裝window窗口廣告模式

import { display, window } from '@kit.ArkUI'
import { util } from '@kit.ArkTS'export class AdManager {context?: Context // 是給ability使用的private winNames: string [] = []// 展示廣告 采用windows窗口的創(chuàng)建和銷毀的方式async showAd(url: string, width?: number, height?: number) {if (url) {let name = `win_${util.generateRandomUUID()}`const win = await window.createWindow({name,windowType: window.WindowType.TYPE_DIALOG,ctx: this.context || getContext()})if (width && width >= 320 && height && height >= 240) {const screen = display.getDefaultDisplaySync()let mainWidth = vp2px(width)let mainHeight = vp2px(height)win.resizeAsync(mainWidth, mainHeight)win.moveWindowToAsync((screen.width - mainWidth) / 2, (screen.height - mainHeight) / 2)}await win.showWindow() // 展示窗口win.setUIContent(url) // 設(shè)置地址this.winNames.push(name)return name}return ""}// 關(guān)閉廣告async closeAd(name?: string) {if (name) {window.findWindow(name).destroyWindow()this.winNames = this.winNames.filter(item => item !== name) //清空數(shù)組內(nèi)容} else {// 不傳就認(rèn)為 想關(guān)閉所有l(wèi)et index = 0while (index < this.winNames.length) {await window.findWindow(this.winNames[index]).destroyWindow()index++}this.winNames = [] // 清空數(shù)組}}
}export const adManger = new AdManager()

5.采用與頁面解耦的模式實(shí)現(xiàn)廣告

import { AdvertClass } from '../viewmodels'
import { ComponentContent, promptAction, window } from '@kit.ArkUI'
import { util } from '@kit.ArkTS'// 展示廣告的結(jié)構(gòu)最重要寫的代碼
@Builder
function AdBuilder(ad: AdvertClass) {Column() {Image(ad.adImg).width("100%").height("100%").objectFit(ImageFit.Cover).borderRadius(10)Row() {Image($r("app.media.ic_btn_close")).width(14).aspectRatio(1).fillColor("#ccc")}.width(30).aspectRatio(1).justifyContent(FlexAlign.Center).borderRadius(15).border({color: '#ff343232',width: 2}).margin({top: 40}).onClick(() => {if (ad.dialogName) {adManagerFinal.closeAd(ad.dialogName) //  ? name從哪里進(jìn)來}})}.width(ad.isFull ? "100%" : "80%").height(ad.isFull ? "100%" : "50%")
}export class AdManagerFinal {context?: Context// 所有的彈窗都放到這個(gè)map中 通過name來標(biāo)識private map: Map<string, ComponentContent<AdvertClass>> = new Map()// 實(shí)際上需要廣告async showAd(ad: AdvertClass) {// 按照文檔實(shí)現(xiàn)// UIContext上下文必須得等到頁面初始化之后才可以進(jìn)行獲取// 生成一個(gè)namelet name = `dialog_${util.generateRandomUUID()}`// 通過當(dāng)前的主窗口來獲取const mainWin = await window.getLastWindow(this.context || getContext())let uiContext = mainWin.getUIContext() // 拿到UIContextlet promptAction = uiContext.getPromptAction();ad.dialogName = name // 目的是將dialog的彈窗名稱傳遞到builder中l(wèi)et contentNode = new ComponentContent(uiContext, wrapBuilder(AdBuilder), ad);let options: promptAction.BaseDialogOptions = {alignment: DialogAlignment.Center,autoCancel: false};this.map.set(name, contentNode) // 將key/value寫入到map中promptAction.openCustomDialog(contentNode, options);// 一般半屏廣告 是得用戶手動點(diǎn)擊才能關(guān)閉的 一般不會自動關(guān)閉// setTimeout(() => {//   promptAction.closeCustomDialog(contentNode)// }, 2000)}async closeAd(name: string) {if (name) {const mainWin = await window.getLastWindow(this.context || getContext())let uiContext = mainWin.getUIContext() // 拿到UIContextlet promptAction = uiContext.getPromptAction();promptAction.closeCustomDialog(this.map.get(name))// 清理mapthis.map.delete(name) // 刪除已經(jīng)關(guān)閉的彈窗}}
}export const adManagerFinal = new AdManagerFinal()

6.完整代碼-EntryAbility

 async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');// 開啟全屏const win = windowStage.getMainWindowSync()win.setWindowLayoutFullScreen(true)// 獲取安全區(qū)域const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRectAppStorage.setOrCreate<number>('safeTop', px2vp(top.height))const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRectAppStorage.setOrCreate<number>('safeBottom', px2vp(bottom.height))windowStage.loadContent('pages/Index', (err) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');getUser.initUser()auth.initUser()});//廣告// 發(fā)起一個(gè)向云端獲取廣告數(shù)據(jù)的請求const userSetting = new UserSetting(this.context)const result = await new Promise<AdvertClass>((resolve, reject) => {setTimeout(() => {resolve({showAd: true,adTime: 5,adImg: $r('[basic].media.start')} as AdvertClass)}, 1000)})await userSetting.setUserAd(result) // 寫入首選項(xiàng)if (result.showAd) {const win = await windowStage.createSubWindow("ad_window")await win.showWindow()win.setUIContent("pages/StartPage")}}