laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加射箭声音

Browse Source
This commit is contained in:
linyimin
2026-04-16 18:06:59 +08:00
parent 1181a2133a
commit e8568ee6a8
4 changed files with 282 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
src/App.vue
View File

@@ -1,256 +1,292 @@
<script setup> <script setup>
import { watch } from "vue"; import {
import { onShow, onHide } from "@dcloudio/uni-app"; watch
import websocket from "@/websocket"; } from "vue";
import { getDeviceBatteryAPI } from "@/apis"; import {
import useStore from "@/store"; onShow,
import { storeToRefs } from "pinia"; onHide
const store = useStore(); } from "@dcloudio/uni-app";
const { user } = storeToRefs(store); import websocket from "@/websocket";
const { updateUser, updateOnline } = store; import {
getDeviceBatteryAPI
} from "@/apis";
import useStore from "@/store";
import {
storeToRefs
} from "pinia";
import audioManager from "./audioManager";
const store = useStore();
const {
user
} = storeToRefs(store);
const {
updateUser,
updateOnline
} = store;
watch( watch(
() => user.value.id, () => user.value.id,
(newVal) => { (newVal) => {
const token = uni.getStorageSync( const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token` `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
); );
if (newVal && token) { if (newVal && token) {
websocket.createWebSocket(token, (content) => { websocket.createWebSocket(token, onShootWsMsg);
uni.$emit("socket-inbox", content); }
}); if (!newVal) {
} websocket.closeWebSocket();
if (!newVal) { }
websocket.closeWebSocket(); }, {
} deep: false, // 如果 user 是一个对象或数组，建议开启
}, immediate: false, // 若想在初始化时立即执行一次回调，可开启。
{ }
deep: false, // 如果 user 是一个对象或数组，建议开启 );
immediate: false, // 若想在初始化时立即执行一次回调，可开启。
}
);
function emitUpdateUser(value) { function emitUpdateUser(value) {
updateUser(value); updateUser(value);
} }
async function emitUpdateOnline() { async function emitUpdateOnline() {
const data = await getDeviceBatteryAPI(); const data = await getDeviceBatteryAPI();
updateOnline(data.online); updateOnline(data.online);
} }
onShow(() => { function onDeviceShoot() {
uni.$on("update-user", emitUpdateUser); audioManager.play("射箭声音")
uni.$on("update-online", emitUpdateOnline); }
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (user.value.id && token) {
console.log("回到前台，重新连接 websocket");
websocket.createWebSocket(token, (content) => {
uni.$emit("socket-inbox", content);
});
}
});
onHide(() => { function onShootWsMsg(content) {
uni.$off("update-user", emitUpdateUser); if(content.type === 'shoot-trigger'){
uni.$off("update-online", emitUpdateOnline); onDeviceShoot()
websocket.closeWebSocket(); }
}); uni.$emit("socket-inbox", content);
}
onShow(() => {
uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline);
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (user.value.id && token) {
console.log("回到前台，重新连接 websocket");
websocket.createWebSocket(token, onShootWsMsg);
}
});
onHide(() => {
uni.$off("update-user", emitUpdateUser);
uni.$off("update-online", emitUpdateOnline);
websocket.closeWebSocket();
});
</script> </script>
<style> <style>
page { page {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
background-color: #000; background-color: #000;
} }
button { button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
background: none; background: none;
line-height: 1; line-height: 1;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
} }
view::-webkit-scrollbar { view::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
color: transparent; color: transparent;
} }
button::after { button::after {
border: none; border: none;
} }
.guide-tips { .guide-tips {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 28rpx; font-size: 28rpx;
} }
.guide-tips > text:first-child {
color: #fed847;
}
.guide-tips > text:nth-child(2) {
font-size: 24rpx;
}
@keyframes fadeInOut { .guide-tips>text:first-child {
0% { color: #fed847;
transform: translateY(20px); }
opacity: 0;
}
30% {
transform: translateY(0);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in-out { .guide-tips>text:nth-child(2) {
animation: fadeInOut 1.2s ease forwards; font-size: 24rpx;
} }
@keyframes fadeOut { @keyframes fadeInOut {
from { 0% {
transform: translateY(0); transform: translateY(20px);
opacity: 1; opacity: 0;
} }
to {
transform: translateY(20px);
opacity: 0;
}
}
.fade-out { 30% {
animation: fadeOut 0.3s ease forwards; transform: translateY(0);
} opacity: 1;
}
@keyframes scaleIn { 80% {
from { opacity: 1;
transform: scale(0); }
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.scale-in { 100% {
animation: scaleIn 0.3s ease-out forwards; opacity: 0;
transform-origin: center center; }
} }
@keyframes scaleOut { .fade-in-out {
from { animation: fadeInOut 1.2s ease forwards;
transform: scale(1); }
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
.scale-out { @keyframes fadeOut {
animation: scaleOut 0.3s ease-out forwards; from {
transform-origin: center center; transform: translateY(0);
} opacity: 1;
}
@keyframes rotate { to {
from { transform: translateY(20px);
transform: rotate(0deg); opacity: 0;
} }
to { }
transform: rotate(360deg);
}
}
@keyframes pumpIn { .fade-out {
from { animation: fadeOut 0.3s ease forwards;
transform: scale(2); }
}
to {
transform: scale(1);
}
}
.pump-in { @keyframes scaleIn {
animation: pumpIn 0.3s ease-out forwards; from {
transform-origin: center center; transform: scale(0);
} opacity: 0;
}
.share-canvas { to {
width: 300px; transform: scale(1);
height: 530px; opacity: 1;
position: absolute; }
top: -1000px; }
left: 0;
}
.truncate { .scale-in {
white-space: nowrap; animation: scaleIn 0.3s ease-out forwards;
overflow: hidden; transform-origin: center center;
text-overflow: ellipsis; }
}
.modal { @keyframes scaleOut {
height: 100%; from {
display: flex; transform: scale(1);
flex-direction: column; opacity: 1;
align-items: center; }
justify-content: center;
}
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 7px;
position: relative;
}
.half-time-tip {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.half-time-tip > text:last-child {
margin-top: 20px;
color: #fff9;
}
.see-more {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
.see-more > text {
color: #39a8ff;
font-size: 13px;
}
.see-more > image {
width: 15px;
}
@font-face { to {
font-family: "DINCondensed"; transform: scale(0);
src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") opacity: 0;
format("truetype"); }
font-weight: 700; }
font-style: normal;
font-display: swap; .scale-out {
} animation: scaleOut 0.3s ease-out forwards;
transform-origin: center center;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pumpIn {
from {
transform: scale(2);
}
to {
transform: scale(1);
}
}
.pump-in {
animation: pumpIn 0.3s ease-out forwards;
transform-origin: center center;
}
.share-canvas {
width: 300px;
height: 530px;
position: absolute;
top: -1000px;
left: 0;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 7px;
position: relative;
}
.half-time-tip {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.half-time-tip>text:last-child {
margin-top: 20px;
color: #fff9;
}
.see-more {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
.see-more>text {
color: #39a8ff;
font-size: 13px;
}
.see-more>image {
width: 15px;
}
@font-face {
font-family: "DINCondensed";
src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
</style> </style>

4
src/apis.js
View File

@@ -6,8 +6,8 @@ try {
switch (envVersion) { switch (envVersion) {
case "develop": // 开发版 case "develop": // 开发版
// BASE_URL = "http://192.168.1.30:8000/api/shoot"; BASE_URL = "http://localhost:8000/api/shoot";
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot"; // BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
break; break;
case "trial": // 体验版 case "trial": // 体验版
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot"; BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";

24
src/audioManager.js
View File

@@ -40,25 +40,25 @@ export const audioFils = {
未上靶: 未上靶:
"https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3", "https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3",
"1环": "1环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin1aq7gxjih5l.mp3", "https://static.shelingxingqiu.com/shootaudio/1%E7%8E%AF.mp3",
"2环": "2环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin64tdgx2s4at.mp3", "https://static.shelingxingqiu.com/shootaudio/2%E7%8E%AF.mp3",
"3环": "3环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinlmf87vt8z65.mp3", "https://static.shelingxingqiu.com/shootaudio/3%E7%8E%AF.mp3",
"4环": "4环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinniv97sx0q9u.mp3", "https://static.shelingxingqiu.com/shootaudio/4%E7%8E%AF.mp3",
"5环": "5环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin7j01kknpb7k.mp3", "https://static.shelingxingqiu.com/shootaudio/5%E7%8E%AF.mp3",
"6环": "6环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin4syy1015rtq.mp3", "https://static.shelingxingqiu.com/shootaudio/6%E7%8E%AF.mp3",
"7环": "7环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin3iz3dvmjdai.mp3", "https://static.shelingxingqiu.com/shootaudio/7%E7%8E%AF.mp3",
"8环": "8环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnjd42lhpfiw.mp3", "https://static.shelingxingqiu.com/shootaudio/8%E7%8E%AF.mp3",
"9环": "9环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin69nj1xh7yfz.mp3", "https://static.shelingxingqiu.com/shootaudio/9%E7%8E%AF.mp3",
"10环": "10环":
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnvsx0tt7ksa.mp3", "https://static.shelingxingqiu.com/shootaudio/10%E7%8E%AF.mp3",
X环: "https://static.shelingxingqiu.com/attachment/2026-02-09/dga8puwekpe2gmtbu4.mp3", X环: "https://static.shelingxingqiu.com/attachment/2026-02-09/dga8puwekpe2gmtbu4.mp3",
向上调整: 向上调整:
"https://static.shelingxingqiu.com/attachment/2025-11-12/de6ellf5pfvu3l8dhr.mp3", "https://static.shelingxingqiu.com/attachment/2025-11-12/de6ellf5pfvu3l8dhr.mp3",
@@ -80,6 +80,10 @@ export const audioFils = {
"https://static.shelingxingqiu.com/attachment/2025-11-13/de7kzzllq0futwynso.mp3", "https://static.shelingxingqiu.com/attachment/2025-11-13/de7kzzllq0futwynso.mp3",
练习开始: 练习开始:
"https://static.shelingxingqiu.com/attachment/2025-11-14/de88w0lmmt43nnfmoi.mp3", "https://static.shelingxingqiu.com/attachment/2025-11-14/de88w0lmmt43nnfmoi.mp3",
射箭声音:
"https://static.shelingxingqiu.com/shootaudio/%E6%9C%AA%E4%B8%8A%E9%9D%B6.mp3",
命中:
"https://static.shelingxingqiu.com/shootaudio/%E5%91%BD%E4%B8%AD.mp3"
}; };
// 版本控制日志函数 // 版本控制日志函数

4
src/websocket.js
View File

@@ -14,8 +14,8 @@ function createWebSocket(token, onMessage) {
switch (envVersion) { switch (envVersion) {
case "develop": // 开发版 case "develop": // 开发版
// url = "ws://192.168.1.30:8000/socket"; url = "ws://localhost:8000/socket";
url = "wss://apitest.shelingxingqiu.com/socket"; // url = "wss://apitest.shelingxingqiu.com/socket";
break; break;
case "trial": // 体验版 case "trial": // 体验版
url = "wss://apitest.shelingxingqiu.com/socket"; url = "wss://apitest.shelingxingqiu.com/socket";