uni-app怎么实现上墙弹幕和摇一摇抽奖-uni-app-PHP中文网

上墙弹幕需用cover-view+canvas（小程序）或subNVue（App），禁用videoContext.sendDanmu；摇一摇须调uni.startAccelerometer、配权限、用加速度变化率滤波、复用音频上下文并监听onCanPlay。

uni-app怎么实现上墙弹幕和摇一摇抽奖

上墙弹幕和摇一摇抽奖在 uni-app 里是两类完全独立的技术问题：前者卡在 video 组件的原生置顶限制，后者卡在传感器启动链路与抖动判定逻辑。两者都**不能靠“写了就跑”糊弄过去**，真机调试时 90% 的失败源于权限、生命周期或平台误用。

uni-app 的 video 在 App 和小程序端是原生渲染组件，默认强制置顶，z-index、transform、opacity 全部失效——这不是 bug，是设计如此。

微信/支付宝小程序必须用 cover-view + canvas 组合：外层 cover-view 容器设宽高 100%，内嵌 canvas 渲染文字；cover-image 可用于头像等固定元素，但不支持动态文本
App 端优先走 subNVue：pages.json 中对应页面需配置 "position": "absolute" 和 "zIndex": 100，且指向一个独立的 .nvue 文件；该文件内 canvas 渲染不受 Vue 页面样式干扰，天然高于 video
别用 videoContext.sendDanmu：这个 API 在 mp-weixin 平台静默失败，调了等于没调；H5 和 App 端可用，但跨平台项目必须加平台判断：uni.getSystemInfoSync().platform !== 'mp-weixin'
弹幕卡顿主因是实时计算：每帧调 ctx.fillText() 在安卓低端机直接掉帧；改用 ctx.drawImage() 预渲染文字贴图，轨迹点提前生成数组（如正弦抖动路径），运行时只查表

uni.onAccelerometerChange 是监听函数，但**不调 uni.startAccelerometer() 就永远收不到数据**——这是最常漏掉的一步，连 iOS 权限都配对了也白搭。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

iOS 真机必须在 manifest.json → App SDK 配置 → 「运动与健身」权限勾选，否则静默失败，无任何错误提示
Android（尤其 MIUI/HarmonyOS）冷启动时调 uni.startAccelerometer() 易被拦截；应放在 onShow 或用户点击按钮后触发，而非 onLoad 或 onLaunch
别用单轴绝对值判断：Math.abs(res.x) > 30 在华为 Mate 60、iPhone 15 Pro 上误触率超 70%；正确做法是算加速度变化率（jerk）：缓存最近 4 帧的合加速度 acc = Math.sqrt(x*x + y*y + z*z)，再算差值平方和 dx*dx + dy*dy + dz*dz，连续 2 帧 > 20 才记为一次抖动
累计 3 次有效抖动再触发抽奖，配合 isShaking = true + setTimeout(() => { isShaking = false }, 1500) 防连续弹窗；别用 clearTimeout 动态重置，摇动持续时间不可控

创建 uni.createInnerAudioContext() 后直接 play()，iOS 上大概率静音——因为音频上下文未激活，需用户手势触发后才可播放。

音频实例必须复用，不要每次摇都新建；提前创建并设 audioContext.autoplay = true、audioContext.loop = false
播放前必须等 onCanPlay 回调，否则安卓部分机型会报错或无声；可加兜底：setTimeout(() => audioContext.play(), 100)，但延迟别超 200ms
安卓部分机型需振动权限支持，在 manifest.json 补 "scope.vibrate": {"desc": "用于摇一摇反馈"}
页面跳转或隐藏后还在响？说明没注销监听：必须在 onHide 或 onUnload 中调 uni.offAccelerometerChange(handle)，且回调函数引用要一致（推荐写法：const handle = res => { ... }）