longandClaude Opus 4.7
c3e4dfa479
## 主要改动 ### 1. 音效集成 - 集成 4 个捏碎音效(鸡蛋/核桃/易拉罐/气球) - 集成背景音乐 BGM + 右上角开关按钮 - 修复音效 URL 空值时的崩溃问题 - useMetronome 新增 volume 参数(默认 1.0) - 节拍音量调小至 0.35,避免木鱼声过大 ### 2. 画布升级到 Canvas 2D 接口 - 解决微信小程序 canvas-id 接口的警告 - 支持同层渲染,可与其他元素正常叠加 - 使用 requestAnimationFrame 替代 setTimeout - DPR 自适应,Retina 屏幕高清渲染 ### 3. 粒子特效差异化升级 - 4 种物品各自独立配色和形状 - 🥚 鸡蛋: 蛋黄黄+白色,圆形,中速 - 🌰 核桃: 4 种棕色,方形/三角/长方形,重粒 - 🥫 易拉罐: 5 种银色,长方形,快速 - 🎈 气球: 8 色彩虹,小颗粒,飘浮(低重力) - 新增双层冲击波效果 - 粒子旋转动画(方形/三角形/长方形) - 多形状粒子绘制(circle/square/triangle/rect) ### 4. 沉浸式画布重新设计 - 画布占屏幕 60vh(min 720rpx, max 900rpx) - 背景与页面无缝融合(#f8fafc) - 中心 1400rpx 大放射光晕,营造空间感 - 握力环放大至 520rpx,内圈 280rpx - 完全移除浮动气泡(性能优化) ### 5. 视觉与体验优化 - 主题色改回青绿色(#14b8a6),握力环保持粉色突出 - 训练完成卡片大改造: - 大号 emoji 跳动动画 - 统计项加入图标(💪⏱️🔥) - 食物对照可视化(emoji + 数量,最多 3 个) - 食物库扩展到 7 种(糖果/饼干/巧克力/苹果/香蕉/米饭/可乐) - BPM 数字大号显示(80rpx 深粉色) - 实时统计栏增加分隔线和顶部彩色高光 ### 6. 性能优化(低配机器友好) - 静态背景渐变(0 性能消耗) - 单层中心光晕(无动画) - 外发光仅在播放时启用 - GPU 加速(will-change + transform/opacity) - 移除 backdrop-filter(高消耗) ### 7. Bug 修复 - crush-canvas 的 \$scope of null 错误 - 进入页面时音效预热不再发声(静音预热) - 修复 walnut emoji 错用花生(🥜→🌰) - 弹窗遮挡粒子动画(延迟 1200ms 显示弹窗) ### 8. 文档 - 新增音效采集清单(grip-ring-audio-shopping-list.md) ## 修改文件 - grip-ring.vue: 主页面,音效集成、UI 重设计、食物对照 - grip-ring-canvas.vue: 沉浸式画布、握力环主体 - crush-canvas.vue: Canvas 2D 升级、差异化粒子系统 - useMetronome.ts: 音量参数支持 - dev-training-entry/index.vue: 入口配置微调 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
简介
本 demo 演示了如何在 uni-app 项目中集成 TUICallKit 音视频通话组件。
环境准备
- 微信 App iOS 最低版本要求：8.0.40
- 微信 App Android 最低版本要求：8.0.40
- 小程序基础库最低版本要求：2.10.0
- 由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发
- 由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验
快速跑通
第一步：下载源码，编译运行
-
克隆或者直接下载此仓库源码。
git clone https://github.com/tencentyun/TUICallKit.git -
进入 demo 目录
cd ./TUICallKit/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue3 -
安装依赖
npm installmac端
mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx-uniapp/ ./TUICallKit && cp node_modules/@trtc/call-engine-lite-wx/RTCCallEngine.wasm.br ./staticwindows端
xcopy node_modules\@trtc\calls-uikit-wx-uniapp\ .\TUICallKit /i /e xcopy node_modules\@trtc\call-engine-lite-wx\RTCCallEngine.wasm.br .\static -
HBuilder 中导入项目
-
修改
./TUICallKit/uni-app/TUICallKit-Miniprogram/TUICallKit-Vue3/debug/GenerateTestUserSig-es.js文件 的 SDKAPPID 以及 SECRETKEY（阅读文末 开通服务）
-
运行到【微信开发者工具】，勾选 【运行时是否压缩代码】
-
项目导入到微信开发者工具，目录如下图：
示例体验
Tips：TUICallKit 通话体验，至少需要两台设备，用户 A、B 代表使用不同的设备。
用户 A（userId：111）
- 步骤 1：在欢迎页，输入用户名（请确保用户名唯一性，不能与其他用户重复）登录，比如：111。
- 步骤 2：根据不同的场景&业务需求，进入不同的场景界面，比如：视频通话。
- 步骤 3：输入要拨打的用户 B 的 userId（例如：222），点击搜索，然后点击呼叫。
步骤1 步骤2 步骤3 
用户 B（userId：222）
- 步骤 1：在欢迎页，输入用户名（请确保用户名唯一性，不能与其他用户重复）登录，比如：222。
- 步骤 2：进入主页，等待接听来电即可。
接入指引
步骤一：开通小程序权限
由于 TUICallKit 所使用的小程序标签有更苛刻的权限要求，因此集成 TUICallKit 的第一步就是要开通小程序的类目和标签使用权限，否则无法使用，这包括如下步骤：
-
小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业，如下图所示：
-
小程序推拉流标签使用权限暂时只开放给有限 类目。
-
符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：
步骤二：在小程序控制台配置域名
在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名 和 socket 合法域名，如下图所示：
- request 合法域名：
https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com
- socket 合法域名：
wss://wss.im.qcloud.com
wss://wss.tim.qq.com
步骤三：开通服务
TUICallKit 是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务：
-
登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
-
单击刚刚创建出的应用，进入基本配置页面，并在页面的右下角找到开通腾讯实时音视频服务功能区，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。如果需要正式应用上线，可以单击 前往加购 即可进入购买页面。
IM 音视频通话能力针对不同的业务需求提供了差异化的付费版本供您选择，您可以在 IM 购买页 了解包含功能并选购您适合的版本。
-
在同一页面找到 SDKAppID 和密钥并记录下来
-
SDKAppID：IM 的应用 ID，用于业务隔离，即不同的 SDKAppID 的通话彼此不能互通。
-
Secretkey：IM 的应用密钥，需要和 SDKAppID 配对使用，用于签出合法使用 IM 服务的鉴权用票据 UserSig。
即日起至2022年10月01日0点前，购买音视频通话能力包基础版可获赠解锁相同有效期的小程序端通话功能授权。在活动结束前购买的音视频通话能力包在有效期内不受活动结束影响仍可使用小程序通话功能，活动结束后的新购或续期需选择体验版、进阶版、尊享版来获取小程序通话功能授权，基础版亦可单独加购小程序功能授权进行解锁。
单击免费体验以后，部分之前使用过 [实时音视频 TRTC] (https://cloud.tencent.com/document/product/647/16788) 服务的用户会提示：
[-100013]:TRTC service is suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears
因为新的 IM 音视频通话能力是整合了腾讯云实时音视频 TRTC 和 即时通信 IM 两个基础的 PaaS 服务，所以当 实时音视频 TRTC 的免费额度（10000分钟）已经过期或者耗尽，就会导致开通此项服务失败，这里您可以单击 TRTC 控制台，找到对应 SDKAppID 的应用管理页，示例如图，开通后付费功能后，再次启用应用即可正常体验音视频通话能力。
附录
- 如果您想要了解TUiCallKit，请阅读 组件介绍 TUICallKit
- 如果您想把我们的功能直接嵌入到您的项目中，请阅读 快速接入 TUICallKit
- 如果您想要了解详细 API ，请阅读 API 概览
- 如果你遇到了困难，可以先参阅 常见问题；
- 如果发现了示例代码的 bug，欢迎提交 issue；