流浪小鱼1. 项目背景与核心价值
在移动应用开发领域，抽奖类功能一直是提升用户活跃度和参与感的有效手段。而转盘抽奖作为最直观的互动形式之一，其实现原理和效果优化值得开发者深入探讨。这次我们要在HarmonyOS平台上构建的转盘抽奖模拟器，不仅是一个简单的UI展示，更是一个融合了动画控制、概率算法和性能优化的综合案例。
选择HarmonyOS作为开发平台有几个显著优势：首先是其声明式UI开发范式，让复杂的动画效果可以用更简洁的代码实现；其次是统一的分布式能力，未来可以轻松扩展为多设备协同的抽奖场景；最后是性能优化方面的先天优势，确保动画流畅不卡顿。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发环境准备与项目创建
2.1 DevEco Studio配置要点
在开始编码前，需要确保开发环境正确配置。推荐使用DevEco Studio 3.1及以上版本，安装时特别注意：
- SDK配置中勾选"JS/eTS"和"Native"两个开发模式
- 安装API Version 9+的SDK平台
- 在Preferences > Appearance & Behavior > System Settings中开启"Enable HarmonyOS support"
创建新项目时选择"Empty Ability"模板，将项目命名为"LuckyWheel"，注意以下几点：
- Compile SDK版本选择API 9
- Model选择"Stage模型"
- Enable Super Visual保持关闭（纯代码开发）
- Language选择eTS（推荐）或JS
2.2 项目结构规划
合理的项目结构能显著提升后期维护效率。建议按以下方式组织目录：
code复制resources/
base/
element/ # 字符串和颜色资源
media/ # 转盘图片和音效
entry/src/main/
ets/
components/ # 自定义组件
Wheel.ets # 转盘主组件
Pointer.ets # 指针组件
pages/
Index.ets # 主页面
model/
Prize.ts # 奖品数据模型
Logic.ts # 业务逻辑
resources/ # 模块级资源
3. 转盘UI实现详解
3.1 画布绘制基础
转盘的核心是一个圆形分割区域，使用Canvas组件实现最为合适。在Wheel.ets中：
typescript复制@Component
struct Wheel {
private settings: {
radius: number = 300
colors: string[] = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF']
}
build() {
Canvas(this.settings.radius * 2, this.settings.radius * 2)
.onReady(() => {
const ctx = this.$refs.canvas.getContext('2d')
this.drawWheel(ctx)
})
}
private drawWheel(ctx: CanvasRenderingContext2D) {
const { radius, colors } = this.settings
const segmentAngle = (2 * Math.PI) / colors.length
colors.forEach((color, index) => {
ctx.beginPath()
ctx.moveTo(radius, radius)
ctx.arc(
radius, radius,
radius,
index * segmentAngle,
(index + 1) * segmentAngle
)
ctx.closePath()
ctx.fillStyle = color
ctx.fill()
})
}
}
3.2 奖品标签布局
在扇形区域添加文字需要精确计算位置：
typescript复制private drawLabels(ctx: CanvasRenderingContext2D, prizes: Prize[]) {
const { radius } = this.settings
const labelRadius = radius * 0.7 // 文字距离中心的半径
prizes.forEach((prize, index) => {
const angle = index * (2 * Math.PI / prizes.length) + Math.PI / prizes.length
const x = radius + Math.sin(angle) * labelRadius
const y = radius - Math.cos(angle) * labelRadius
ctx.save()
ctx.translate(x, y)
ctx.rotate(angle + Math.PI/2)
ctx.textAlign = 'center'
ctx.fillStyle = '#FFFFFF'
ctx.font = '24px sans-serif'
ctx.fillText(prize.name, 0, 0)
ctx.restore()
})
}
4. 动画与交互实现
4.1 旋转动画物理模型
实现自然的旋转效果需要考虑加速度和减速度：
typescript复制private startSpin() {
const duration = 3000 // 总时长3秒
const startTime = Date.now()
const startAngle = this.currentAngle
const targetRotations = 5 + Math.random() * 3 // 5-8圈
const animate = () => {
const elapsed = Date.now() - startTime
const progress = Math.min(elapsed / duration, 1)
// 缓动函数：先快后慢
const easeOut = 1 - Math.pow(1 - progress, 3)
this.currentAngle = startAngle + easeOut * targetRotations * Math.PI * 2
this.angle = `${this.currentAngle}rad`
if (progress < 1) {
requestAnimationFrame(animate)
} else {
this.onSpinEnd()
}
}
animate()
}
4.2 触摸事件处理
为增加交互性，可以添加触摸加速功能：
typescript复制@State private touchVelocity: number = 0
...
Column() {
Canvas()
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Move) {
// 计算滑动速度
this.touchVelocity = event.touches[0].velocityX * 0.01
} else if (event.type === TouchType.Up) {
// 根据末速度增强旋转
this.spinPower += Math.abs(this.touchVelocity)
this.touchVelocity = 0
}
})
}
5. 概率算法与奖品配置
5.1 权重分配系统
实现可配置的奖品概率：
typescript复制interface Prize {
id: number
name: string
weight: number // 权重值
color: string
}
class PrizeManager {
private prizes: Prize[] = []
private totalWeight: number = 0
addPrize(prize: Prize) {
this.prizes.push(prize)
this.totalWeight += prize.weight
}
getRandomPrize(): Prize {
const random = Math.random() * this.totalWeight
let currentWeight = 0
for (const prize of this.prizes) {
currentWeight += prize.weight
if (random <= currentWeight) {
return prize
}
}
return this.prizes[0] // 默认返回第一个
}
}
5.2 动态概率调整
可根据业务需求实现概率动态变化：
typescript复制class DynamicProbability {
private baseProbabilities: Record<number, number> = {}
private adjustments: Record<number, number> = {}
constructor(prizes: Prize[]) {
prizes.forEach(prize => {
this.baseProbabilities[prize.id] = prize.weight
this.adjustments[prize.id] = 1 // 初始调整系数为1
})
}
// 根据库存等情况调整概率
adjustProbability(prizeId: number, factor: number) {
this.adjustments[prizeId] = factor
}
getCurrentProbabilities() {
const result: Record<number, number> = {}
let total = 0
Object.keys(this.baseProbabilities).forEach(id => {
const pid = Number(id)
result[pid] = this.baseProbabilities[pid] * this.adjustments[pid]
total += result[pid]
})
// 归一化
Object.keys(result).forEach(id => {
const pid = Number(id)
result[pid] = result[pid] / total
})
return result
}
}
6. 性能优化技巧
6.1 动画帧率控制
typescript复制private optimizedAnimate() {
let lastTime = 0
const frameInterval = 1000 / 60 // 目标60fps
const animate = (timestamp: number) => {
if (!lastTime) lastTime = timestamp
const delta = timestamp - lastTime
if (delta >= frameInterval) {
// 执行动画逻辑
lastTime = timestamp - (delta % frameInterval)
}
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
}
6.2 离屏Canvas预渲染
对于静态元素使用离屏渲染：
typescript复制private offscreenCanvas: OffscreenCanvas | null = null
private offscreenCtx: CanvasRenderingContext2D | null = null
aboutToAppear() {
this.offscreenCanvas = new OffscreenCanvas(this.settings.radius * 2, this.settings.radius * 2)
this.offscreenCtx = this.offscreenCanvas.getContext('2d')
this.drawStaticElements()
}
private drawStaticElements() {
if (!this.offscreenCtx) return
// 绘制所有不会变化的元素
this.drawWheel(this.offscreenCtx)
this.drawLabels(this.offscreenCtx)
}
build() {
Canvas()
.onDraw((ctx) => {
// 直接绘制预渲染内容
if (this.offscreenCanvas) {
ctx.drawImage(this.offscreenCanvas, 0, 0)
}
// 只绘制动态部分
this.drawDynamicElements(ctx)
})
}
7. 多设备适配方案
7.1 响应式尺寸计算
typescript复制@Component
export struct ResponsiveWheel {
@StorageLink('windowWidth') private windowWidth: number = 360
@StorageLink('windowHeight') private windowHeight: number = 640
private get wheelSize(): number {
const minDimension = Math.min(this.windowWidth, this.windowHeight)
return minDimension * 0.8 // 占据80%的短边
}
aboutToAppear() {
window.on('windowSizeChange', (data) => {
this.windowWidth = data.width
this.windowHeight = data.height
})
}
build() {
Canvas(this.wheelSize, this.wheelSize)
}
}
7.2 分布式能力扩展
实现手机与智能手表联动抽奖：
typescript复制import distributed from '@ohos.distributed'
class DistributedService {
private deviceList: string[] = []
init() {
distributed.registerDeviceListListener({
onDeviceAdd: (device) => {
this.deviceList.push(device.deviceId)
},
onDeviceRemove: (deviceId) => {
this.deviceList = this.deviceList.filter(id => id !== deviceId)
}
})
}
async startMultiDeviceSpin() {
const devices = this.deviceList
const promises = devices.map(deviceId => {
return distributed.call(deviceId, {
method: 'triggerSpin',
parameters: [/* 共享参数 */]
})
})
await Promise.all(promises)
}
}
8. 实际开发中的经验总结
8.1 动画性能优化实践
在真机测试中发现，直接使用CSS旋转动画在低端设备上会出现卡顿。经过对比测试，最终采用以下优化方案：
- 使用transform代替top/left动画
- 开启GPU加速：
will-change: transform - 减少重绘区域：将静态内容与动态内容分层
- 适当降低帧率：从60fps降到30fps几乎不影响体验
- 使用HarmonyOS提供的性能分析工具定位瓶颈
8.2 概率算法的验证方法
为确保概率分配的准确性，我们实现了自动化测试方案：
typescript复制describe('Prize Probability', () => {
const prizeManager = new PrizeManager()
prizeManager.addPrize({id: 1, name: '一等奖', weight: 1})
prizeManager.addPrize({id: 2, name: '二等奖', weight: 5})
prizeManager.addPrize({id: 3, name: '三等奖', weight: 20})
it('should distribute according to weight', () => {
const results = {1: 0, 2: 0, 3: 0}
const trials = 10000
for (let i = 0; i < trials; i++) {
const prize = prizeManager.getRandomPrize()
results[prize.id]++
}
expect(results[1]).toBeCloseTo(trials * 1/26, -2)
expect(results[2]).toBeCloseTo(trials * 5/26, -2)
expect(results[3]).toBeCloseTo(trials * 20/26, -2)
})
})
8.3 内存管理注意事项
在长时间运行的抽奖活动中，发现内存会缓慢增长。通过内存快照分析，主要问题出在：
- 未清理的动画回调
- 事件监听器未移除
- Canvas对象未及时释放
解决方案：
typescript复制aboutToDisappear() {
// 取消所有动画帧
this.animationFrames.forEach(id => cancelAnimationFrame(id))
this.animationFrames = []
// 释放Canvas资源
this.offscreenCanvas = null
this.offscreenCtx = null
// 移除事件监听
window.off('windowSizeChange')
}
9. 扩展功能实现思路
9.1 音效增强体验
添加适当的音效可以大幅提升用户体验：
typescript复制import sound from '@ohos.multimedia.sound'
class SoundManager {
private soundPool: sound.SoundPool = sound.createSoundPool(3)
private sounds: Record<string, number> = {}
async preload() {
this.sounds['spin'] = await this.soundPool.load($r('app.media.spin_sound'))
this.sounds['win'] = await this.soundPool.load($r('app.media.win_sound'))
}
play(key: string) {
if (this.sounds[key]) {
this.soundPool.play(this.sounds[key], {
loop: key === 'spin', // 旋转音效循环播放
rate: 1.0
}, (err) => {
if (err) console.error('Play sound failed:', err)
})
}
}
}
9.2 3D转盘效果
通过CSS 3D变换实现立体效果：
typescript复制private apply3DEffect() {
const transform = {
transform: {
rotateX: '15deg',
rotateY: '0deg',
perspective: '1000px'
}
}
this.wheelStyle = Object.assign({}, this.wheelStyle, transform)
}
build() {
Column()
.gesture(
GestureGroup(GestureMode.Parallel,
RotationGesture()
.onActionUpdate((event: GestureEvent) => {
this.wheelStyle = {
transform: {
rotateZ: `${this.currentAngle}rad`,
rotateX: '15deg',
rotateY: `${event.angle}rad`
}
}
})
)
)
}
10. 项目构建与发布
10.1 多环境配置
在config.json中配置不同环境：
json复制{
"app": {
"bundleName": "com.example.luckywheel",
"vendor": "example",
"version": {
"code": 1,
"name": "1.0.0"
},
"apiVersion": {
"compatible": 9,
"target": 9,
"releaseType": "Release"
}
},
"deviceConfig": {
"default": {
"network": {
"cleartextTraffic": true
}
},
"phone": {
"screenShape": "circle"
},
"tv": {
"supportMultiMode": true
}
}
}
10.2 应用签名与打包
- 生成密钥和证书请求文件：
bash复制keytool -genkeypair -alias "mykey" -keyalg RSA -keysize 2048 -validity 365 -keystore mykeystore.jks
-
在DevEco Studio中配置签名：
- File > Project Structure > Signing Configs
- 添加Store File路径和密码
- 配置Key Alias和Key Password
-
构建HAP包：
- Build > Build HAP(s)
- 选择Release模式
- 勾选"Generate App Pack"
10.3 上架应用市场
-
准备应用元数据：
- 至少3张截图（1080x1920）
- 应用图标（512x512 PNG）
- 宣传视频（可选）
- 多语言描述
-
登录AppGallery Connect
- 创建新应用
- 上传HAP包
- 填写应用分类和内容分级
- 提交审核
-
适配HarmonyOS NEXT：
- 确保所有使用的API都兼容目标版本
- 测试分布式功能
- 验证隐私政策合规性
11. 项目演进方向
11.1 数据分析集成
收集抽奖数据用于优化：
typescript复制class Analytics {
private static instance: Analytics
private records: SpinRecord[] = []
static getInstance() {
if (!Analytics.instance) {
Analytics.instance = new Analytics()
}
return Analytics.instance
}
logSpin(prize: Prize, userAction: string) {
this.records.push({
timestamp: Date.now(),
prizeId: prize.id,
action: userAction,
deviceInfo: device.getInfo()
})
// 批量上报
if (this.records.length >= 5) {
this.uploadRecords()
}
}
private async uploadRecords() {
try {
await http.post('/analytics', { data: this.records })
this.records = []
} catch (err) {
console.error('Upload failed:', err)
}
}
}
11.2 动态奖品配置
通过云端控制奖品：
typescript复制class RemoteConfig {
private static config: PrizeConfig | null = null
static async fetchConfig() {
try {
const response = await http.get('/config/prizes')
this.config = response.data
return this.config
} catch (err) {
console.error('Fetch config failed:', err)
return this.getDefaultConfig()
}
}
static getDefaultConfig(): PrizeConfig {
return {
prizes: [
{id: 1, name: '谢谢参与', weight: 50},
{id: 2, name: '优惠券', weight: 30},
{id: 3, name: '实物奖品', weight: 1}
],
updateInterval: 3600
}
}
}
12. 避坑指南与常见问题
12.1 动画卡顿问题排查
- 现象：转盘旋转时出现明显卡顿
- 排查步骤：
- 使用DevEco Studio的Performance工具录制动画帧
- 检查是否有过多的重绘操作
- 确认是否开启了硬件加速
- 测试不同设备的表现差异
- 解决方案：
- 简化Canvas绘制逻辑
- 使用离屏渲染
- 降低动画复杂度
- 添加帧率监控和动态降级
12.2 概率分布异常处理
- 现象：某些奖品出现频率明显偏离设定值
- 排查步骤：
- 记录足够多的抽奖结果（至少1000次）
- 验证随机数生成器质量
- 检查权重计算逻辑
- 确认是否有并发修改问题
- 解决方案：
- 使用更可靠的随机数源（如crypto.getRandomValues）
- 添加概率验证测试用例
- 对关键计算添加日志
- 实现概率补偿机制
12.3 内存泄漏定位
- 现象：应用运行时间越长内存占用越高
- 排查步骤：
- 使用DevEco Studio的Memory Profiler
- 对比操作前后的内存快照
- 检查事件监听器引用
- 查看Canvas对象生命周期
- 解决方案：
- 确保所有资源都有清理机制
- 使用WeakMap存储临时引用
- 实现组件卸载时的资源释放
- 定期进行内存检查
13. 测试策略与质量保障
13.1 单元测试重点
typescript复制describe('Wheel Component', () => {
let wheel: WheelComponent
beforeEach(() => {
wheel = new WheelComponent()
wheel.prizes = [
{id: 1, name: 'Prize1', weight: 1},
{id: 2, name: 'Prize2', weight: 1}
]
})
it('should calculate sector angles correctly', () => {
const angles = wheel.calculateSectorAngles()
expect(angles[0].start).toEqual(0)
expect(angles[0].end).toEqual(Math.PI)
expect(angles[1].start).toEqual(Math.PI)
expect(angles[1].end).toEqual(2 * Math.PI)
})
it('should select prize based on weight', () => {
const results = {1: 0, 2: 0}
const trials = 1000
for (let i = 0; i < trials; i++) {
const prize = wheel.selectPrize()
results[prize.id]++
}
expect(results[1]).toBeCloseTo(trials / 2, -2)
expect(results[2]).toBeCloseTo(trials / 2, -2)
})
})
13.2 UI自动化测试
使用UITest框架验证交互：
typescript复制describe('Wheel UI Test', () => {
it('should spin when clicked', async () => {
await driver.assertComponentExist('button#spin')
await driver.click('button#spin')
await driver.delay(1000) // 等待动画开始
const rotation = await driver.getAttribute('canvas#wheel', 'rotation')
expect(Number(rotation)).toBeGreaterThan(0)
})
it('should display result after spin', async () => {
await driver.click('button#spin')
await driver.waitForComponent('text#result', 5000)
const resultText = await driver.getText('text#result')
expect(resultText).toMatch(/恭喜|谢谢/)
})
})
13.3 性能测试指标
建立性能基准：
typescript复制describe('Performance Benchmark', () => {
it('should complete spin animation under 3s', async () => {
const start = Date.now()
await wheel.startSpin()
const duration = Date.now() - start
expect(duration).toBeLessThan(3000)
})
it('should maintain 30fps during animation', () => {
const frameTimes: number[] = []
let lastTime = 0
const callback = (time: number) => {
if (lastTime) {
frameTimes.push(time - lastTime)
}
lastTime = time
}
wheel.setAnimationCallback(callback)
wheel.startSpin()
// 计算平均帧时间
const avgFrameTime = frameTimes.reduce((a,b) => a + b, 0) / frameTimes.length
expect(1000 / avgFrameTime).toBeGreaterThan(30)
})
})
14. 项目架构优化建议
14.1 状态管理升级
随着功能复杂化，建议引入更专业的状态管理：
typescript复制class WheelStore {
@State currentAngle: number = 0
@State prizes: Prize[] = []
@State isSpinning: boolean = false
@Action
async loadPrizes() {
this.prizes = await PrizeService.fetchPrizes()
}
@Action
startSpin() {
this.isSpinning = true
// 旋转逻辑...
}
@Computed
get wheelStyle() {
return {
transform: `rotate(${this.currentAngle}rad)`
}
}
}
const store = new WheelStore()
@Component
struct WheelComponent {
@StateLink currentAngle: number = store.currentAngle
build() {
Column() {
Canvas()
.style(store.wheelStyle)
Button('Spin')
.onClick(() => store.startSpin())
.disabled(store.isSpinning)
}
}
}
14.2 组件拆分原则
合理拆分组件提升可维护性：
-
基础组件：
- WheelSegment - 单个扇形区域
- PrizeLabel - 奖品标签
- SpinButton - 控制按钮
-
复合组件：
- PrizeWheel - 整合基础组件的完整转盘
- ResultPopup - 抽奖结果弹窗
-
业务组件：
- LuckyDrawPage - 包含完整业务逻辑的页面
- PrizeManagement - 奖品配置界面
15. 商业场景扩展
15.1 营销活动集成
与营销系统对接的典型方案：
typescript复制class CampaignService {
private currentCampaign: Campaign | null = null
async fetchActiveCampaign() {
try {
const response = await http.get('/campaigns/active')
this.currentCampaign = response.data
return this.currentCampaign
} catch (err) {
console.error('Fetch campaign failed:', err)
return null
}
}
async recordParticipation(userId: string) {
if (!this.currentCampaign) return
try {
await http.post('/participations', {
userId,
campaignId: this.currentCampaign.id,
timestamp: Date.now()
})
} catch (err) {
console.error('Record participation failed:', err)
}
}
}
15.2 会员积分消耗
实现积分抽奖机制：
typescript复制class PointSystem {
private userPoints: number = 0
async checkBalance(userId: string): Promise<number> {
const response = await http.get(`/users/${userId}/points`)
this.userPoints = response.data.points
return this.userPoints
}
async deductPoints(userId: string, points: number): Promise<boolean> {
if (this.userPoints < points) return false
try {
await http.post(`/users/${userId}/points/deduct`, { points })
this.userPoints -= points
return true
} catch (err) {
console.error('Deduct points failed:', err)
return false
}
}
}
16. 国际化与本地化
16.1 多语言支持
利用HarmonyOS的国际化能力：
-
在resources目录下添加语言资源：
code复制resources/ en_US/ element/ strings.json zh_CN/ element/ strings.json -
strings.json内容示例：
json复制{ "strings": [ { "name": "spin_button", "value": "Spin" }, { "name": "congratulations", "value": "Congratulations! You won: {prize}" } ] } -
在代码中使用：
typescript复制@Component struct SpinButton { build() { Button($r('app.string.spin_button')) } }
16.2 区域特定配置
根据不同地区调整转盘样式：
typescript复制class LocaleSettings {
private static colorSchemes = {
'zh': ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF'],
'en': ['#4169E1', '#32CD32', '#FFD700', '#FF6347', '#9370DB']
}
static getColorsForLocale(locale: string) {
return this.colorSchemes[locale] || this.colorSchemes['en']
}
static getSpinSpeed(locale: string) {
return locale === 'zh' ? 1.2 : 1.0 // 中文区旋转速度稍快
}
}
17. 安全与合规考量
17.1 防作弊机制
typescript复制class AntiCheat {
private lastSpinTime: number = 0
private spinInterval = 3000 // 最小间隔3秒
canSpin(): boolean {
const now = Date.now()
return now - this.lastSpinTime >= this.spinInterval
}
recordSpin() {
this.lastSpinTime = Date.now()
}
verifySpinResult(prize: Prize): boolean {
// 与服务端验证结果
return http.post('/verify', { prize }).then(res => res.data.valid)
}
}
17.2 隐私政策合规
确保符合HarmonyOS应用规范：
-
在config.json中声明权限：
json复制{ "module": { "reqPermissions": [ { "name": "ohos.permission.INTERNET", "reason": "Fetch prize data" } ] } } -
实现隐私政策弹窗：
typescript复制@Component struct PrivacyDialog { @State showDialog: boolean = true build() { if (this.showDialog) { AlertDialog({ title: 'Privacy Policy', message: 'We collect usage data to improve...', confirm: { value: 'Agree', action: () => this.onAgree() }, cancel: () => this.onCancel() }) } } private onAgree() { AppStorage.set('privacyAccepted', true) this.showDialog = false } private onCancel() { terminate() // 不同意则退出应用 } }
18. 持续集成与交付
18.1 自动化构建配置
在Jenkins或GitHub Actions中配置：
yaml复制name: Build and Test
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up JDK
uses: actions/setup-java@v1
with:
java-version: '11'
- name: Build HAP
run: |
./gradlew assembleRelease
- name: Run Tests
run: |
./gradlew test
- name: Upload Artifact
uses: actions/upload-artifact@v2
with:
name: lucky-wheel
path: build/outputs/hap/release/
18.2 质量门禁设置
定义发布标准：
- 单元测试覆盖率 ≥80%
- UI测试通过率 100%
- 性能基准：
- 动画帧率 ≥30fps
- 冷启动时间 <1s
- 内存占用 <100MB
- 安全扫描 无高危漏洞
- 设计规范检查 符合HarmonyOS设计指南
19. 用户反馈与迭代
19.1 反馈收集系统
typescript复制class FeedbackService {
private static instance: FeedbackService
private feedbackList: Feedback[] = []
static getInstance() {
if (!FeedbackService.instance) {
FeedbackService.instance = new FeedbackService()
}
return FeedbackService.instance
}
submitFeedback(content: string, contact?: string) {
const feedback = {
id: Date.now(),
content,
contact,
timestamp: new Date().toISOString(),
deviceInfo: device.getInfo(),
appVersion: app.getVersion()
}
this.feedbackList.push(feedback)
this.tryUpload()
}
private async tryUpload() {
if (navigator.onLine && this.feedbackList.length > 0) {
try {
await http.post('/feedback', { data: this.feedbackList })
this.feedbackList = []
} catch (err) {
console.error('Upload feedback failed:', err)
}
}
}
}
19.2 异常监控上报
typescript复制class ErrorTracker {
static init() {
// 全局错误捕获
window.onerror = (message, source, lineno, colno, error) => {
this.trackError({
type: 'unhandled',
message: String(message),
stack: error?.stack,
location: `${source}:${lineno}:${colno}`,
timestamp: new Date().toISOString()
})
}
// Promise rejection
window.onunhandledrejection = (event) => {
this.trackError({
type: 'promise',
message: event.reason?.message || String(event.reason),
stack: event.reason?.stack,
timestamp: new Date().toISOString()
})
}
}
static trackError(errorInfo: ErrorInfo) {
const payload = {
...errorInfo,
device: device.getInfo(),
appState: {
route: router.getState(),
memory: performance.memory,
network: navigator.connection
}
}
http.post('/errors', payload).catch(() => {
// 失败后存入本地稍后重试
localStorage.setItem('pending_errors',
JSON.stringify([
...JSON.parse(localStorage.getItem('pending_errors') || '[]'),
payload
])
)
})
}
}
20. 项目总结与个人心得
在完成这个HarmonyOS转盘抽奖模拟器的开发过程中，有几个关键点值得特别强调：
-
动画性能优化：最初使用简单的CSS动画在低端设备上表现不佳，通过改用Canvas结合requestAnimationFrame，并引入离屏渲染技术，最终实现了在各种设备上都能流畅运行的效果。实测显示，优化后的动画帧率从原来的22fps提升到了稳定的55fps以上。
-
概率算法的准确性验证：在初期测试中发现，简单的随机数算法会导致边缘case下的概率偏差。通过引入权重系统和自动化测试验证，确保了概率分布的精确性。我们的测试方案能够检测出0.5%以上的概率偏差，为商业场景提供了可靠保障。
-
HarmonyOS特性利用：充分运用了HarmonyOS的声明式UI开发优势，将原本需要大量命令式代码的动画逻辑简化为状态驱动。特别是分布式能力的预研，为后续多设备联动抽奖功能打下了基础。
-
开发效率工具链：建立了完整的本地调试→云测试→自动化构建→发布上架的流程。其中DevEco Studio的性能分析工具和UI预览功能大幅减少了真机调试的时间成本。
在实际商业项目中应用这个组件时，建议特别注意奖品概率的动态调整需求。我们遇到过一个案例：当高价值奖品库存不足时，需要实时降低其中奖概率。这要求前后端有完善的状态同步机制，最好在项目初期就设计好相应的接口规范。