jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

停留时间

dev_des
1054425342@qq.com 2 months ago
parent
b0e4b1b602
commit
68677fa7e5
1 changed files with 398 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 603
      App.vue

603
App.vue
View File

@ -1,211 +1,402 @@
<script> <script>
export default { export default {
globalData: { globalData: {
mainSliderIndex: 0, mainSliderIndex: 0,
randomImages: [], randomImages: [],
bgMusic: null, bgMusic: null,
isMusicPlaying: false, isMusicPlaying: false,
musicSrc: 'https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3' musicSrc: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
}, // 用户使用统计相关
onLaunch: function() { userSessionId: null,
console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！') networkStartTime: null, // 网络时间开始时间
console.log('App Launch') networkEndTime: null, // 网络时间结束时间
// 移除初始化背景音乐的调用 },
// this.initBackgroundMusic(); onLaunch: function () {
// 审核 // 初始化用户使用统计
this.Post({id: 10217},'/api/article/getArticleById').then(res => { this.initUserUsageStats();
try {
let SHFlag = res.data.title // 重试上报本地存储的使用统计数据
// let SHFlag = res.data.subtitle this.retryReportLocalStats();
uni.setStorageSync('SHFlag', SHFlag)
} catch(e) {} // 移除初始化背景音乐的调用
}); // this.initBackgroundMusic();
}, // 审核
onShow: function() { this.Post({ id: 10217 }, "/api/article/getArticleById").then((res) => {
console.log('App Show') try {
}, let SHFlag = res.data.title;
onHide: function() { // let SHFlag = res.data.subtitle
console.log('App Hide') uni.setStorageSync("SHFlag", SHFlag);
}, } catch (e) {}
methods: { });
initBackgroundMusic() { },
try { onShow: function () {
console.log('bgMusic',this.globalData.bgMusic) // 记录应用显示时间（重新进入小程序）
// 销毁旧的音频实例（关键！） this.recordAppShow();
if (this.globalData.bgMusic) { },
this.globalData.bgMusic.stop(); onHide: function () {
this.globalData.bgMusic.destroy() // 记录应用隐藏时间（退出小程序）
this.globalData.bgMusic = null; this.recordAppHide();
} },
methods: {
let bgMusic; // 初始化用户使用统计
initUserUsageStats() {
// 区分平台 - 小程序环境使用背景音频，H5等环境使用内部音频 // 生成会话ID
// #ifdef MP-WEIXIN this.globalData.userSessionId = this.generateSessionId();
// try { },
// bgMusic = uni.getBackgroundAudioManager();
// // 小程序环境需要设置title // 生成会话ID
// bgMusic.title = '背景音乐'; generateSessionId() {
// // 设置音频组件的 ID const timestamp = Date.now();
// bgMusic.id = 'mp-audio'; const random = Math.random().toString(36).substring(2, 15);
// } catch (e) { return `session_${timestamp}_${random}`;
// console.error('获取背景音频管理器失败，改用内部音频上下文', e); },
// bgMusic = uni.createInnerAudioContext();
// } // 记录应用显示时间 - 获取网络时间作为开始时间
bgMusic = uni.createInnerAudioContext(); recordAppShow() {
// #endif // 获取网络时间作为开始时间
this.getNetworkTime()
// #ifndef MP-WEIXIN .then((networkTime) => {
bgMusic = uni.createInnerAudioContext(); this.globalData.networkStartTime = networkTime;
// #endif })
.catch((err) => {
// 配置音频 // 获取网络时间失败，静默处理
bgMusic.src = this.globalData.musicSrc; });
console.log(bgMusic.src) },
bgMusic.loop = true; // 循环播放
// 记录应用隐藏时间 - 获取网络时间作为结束时间
// 使用不同的事件监听方式，兼容两种音频上下文 recordAppHide() {
if (bgMusic.onPlay) { // 获取网络时间作为结束时间
// BackgroundAudioManager 方式 this.getNetworkTime()
bgMusic.onPlay(() => { .then((networkTime) => {
this.globalData.isMusicPlaying = true; this.globalData.networkEndTime = networkTime;
}); // 如果使用时长超过1秒，则上报统计数据
this.reportUserUsageStats();
bgMusic.onPause(() => { })
this.globalData.isMusicPlaying = false; .catch((err) => {
}); // 获取网络时间失败，静默处理
});
bgMusic.onStop(() => { },
this.globalData.isMusicPlaying = false; getUserId() {
}); const userInfoFromStorage = uni.getStorageSync("userInfo");
if (userInfoFromStorage) {
bgMusic.onEnded(() => { const userInfo = JSON.parse(userInfoFromStorage);
// 循环播放 (BackgroundAudioManager需要重新设置src) if (userInfo.id) {
bgMusic.src = this.globalData.musicSrc; return userInfo.id;
bgMusic.play(); }
}); }
} else { return store.state.user.userInfo.id;
// InnerAudioContext 方式 },
bgMusic.onPlay(() => {
this.globalData.isMusicPlaying = true; // 上报用户使用统计数据
}); reportUserUsageStats() {
if (
bgMusic.onPause(() => { !this.globalData.networkStartTime ||
this.globalData.isMusicPlaying = false; !this.globalData.networkEndTime
}); ) {
return;
bgMusic.onStop(() => { }
this.globalData.isMusicPlaying = false; let userId = this.getUserId();
}); const usageData = {
sessionId: this.globalData.userSessionId,
bgMusic.onEnded(() => { startTime: this.globalData.networkStartTime.toString(),
// InnerAudioContext设置了loop不需要手动重新播放 endTime: this.globalData.networkEndTime.toString(),
this.globalData.isMusicPlaying = false; userId: userId,
}); method: "POST",
} };
if (!userId) {
// 保存到全局 this.saveUsageStatsToLocal(usageData);
this.globalData.bgMusic = bgMusic; return;
}
// 创建全局方法供其他页面调用
uni.$bgMusic = { // 调用接口上报数据
play: () => { this.Post(usageData, "/api/visit/end", "DES")
if (bgMusic && bgMusic.play) { .then((res) => {
bgMusic.play(); // 上报成功后清理数据
} this.clearUsageStats();
return this.globalData.isMusicPlaying; })
}, .catch((err) => {
pause: () => { // 上报失败时，将数据存储到本地，下次启动时重试
if (bgMusic && bgMusic.pause) { this.saveUsageStatsToLocal(usageData);
bgMusic.pause(); });
} },
return this.globalData.isMusicPlaying;
}, // 获取平台信息
toggle: () => { getPlatform() {
if (!bgMusic) return false; // #ifdef MP-WEIXIN
return "weixin";
if (this.globalData.isMusicPlaying) { // #endif
if (bgMusic.pause) bgMusic.pause();
} else { // #ifdef H5
if (bgMusic.play) bgMusic.play(); return "h5";
} // #endif
return this.globalData.isMusicPlaying;
}, // #ifdef APP-PLUS
isPlaying: () => this.globalData.isMusicPlaying return "app";
}; // #endif
} catch (err) {
console.error('初始化背景音乐失败:', err); return "unknown";
} },
},
updateMusicSrc(newSrc) { // 获取网络时间
this.globalData.musicSrc = newSrc; getNetworkTime() {
if (this.globalData.bgMusic) { return new Promise((resolve, reject) => {
this.globalData.bgMusic.src = newSrc; // 调用服务器接口获取网络时间
} this.Post({}, "/api/visit/currentTime", "DES")
} .then((res) => {
} if (res.code == 1 || res.code == 200) {
} // 假设接口返回的时间戳字段为 serverTime
const networkTime = res.data;
resolve(networkTime);
} else {
reject(new Error(res.msg || "获取网络时间失败"));
}
})
.catch((err) => {
reject(err);
});
});
},
// 获取设备信息
getDeviceInfo() {
try {
const systemInfo = uni.getSystemInfoSync();
return {
model: systemInfo.model || "",
system: systemInfo.system || "",
platform: systemInfo.platform || "",
version: systemInfo.version || "",
};
} catch (e) {
return {};
}
},
// 清理使用统计数据
clearUsageStats() {
this.globalData.networkStartTime = null;
this.globalData.networkEndTime = null;
this.globalData.userSessionId = null;
},
// 保存使用统计数据到本地
saveUsageStatsToLocal(usageData) {
try {
const localStats = uni.getStorageSync("pendingUsageStats") || [];
localStats.push(usageData);
uni.setStorageSync("pendingUsageStats", localStats);
} catch (e) {
// 保存失败，静默处理
}
},
// 重试上报本地存储的使用统计数据
retryReportLocalStats() {
try {
const localStats = uni.getStorageSync("pendingUsageStats") || [];
if (localStats.length === 0) {
return;
}
let userId = this.getUserId();
if (!userId) {
return;
}
// 逐个上报
localStats.forEach((stats, index) => {
stats.userId = userId;
this.Post(stats, "/api/visit/end", "DES")
.then((res) => {
// 上报成功后从本地移除
localStats.splice(index, 1);
uni.setStorageSync("pendingUsageStats", localStats);
})
.catch((err) => {
// 上报失败，静默处理
});
});
} catch (e) {
// 重试失败，静默处理
}
},
initBackgroundMusic() {
try {
console.log("bgMusic", this.globalData.bgMusic);
// 销毁旧的音频实例（关键！）
if (this.globalData.bgMusic) {
this.globalData.bgMusic.stop();
this.globalData.bgMusic.destroy();
this.globalData.bgMusic = null;
}
let bgMusic;
// 区分平台 - 小程序环境使用背景音频，H5等环境使用内部音频
// #ifdef MP-WEIXIN
// try {
// bgMusic = uni.getBackgroundAudioManager();
// // 小程序环境需要设置title
// bgMusic.title = '背景音乐';
// // 设置音频组件的 ID
// bgMusic.id = 'mp-audio';
// } catch (e) {
// console.error('获取背景音频管理器失败，改用内部音频上下文', e);
// bgMusic = uni.createInnerAudioContext();
// }
bgMusic = uni.createInnerAudioContext();
// #endif
// #ifndef MP-WEIXIN
bgMusic = uni.createInnerAudioContext();
// #endif
// 配置音频
bgMusic.src = this.globalData.musicSrc;
console.log(bgMusic.src);
bgMusic.loop = true; // 循环播放
// 使用不同的事件监听方式，兼容两种音频上下文
if (bgMusic.onPlay) {
// BackgroundAudioManager 方式
bgMusic.onPlay(() => {
this.globalData.isMusicPlaying = true;
});
bgMusic.onPause(() => {
this.globalData.isMusicPlaying = false;
});
bgMusic.onStop(() => {
this.globalData.isMusicPlaying = false;
});
bgMusic.onEnded(() => {
// 循环播放 (BackgroundAudioManager需要重新设置src)
bgMusic.src = this.globalData.musicSrc;
bgMusic.play();
});
} else {
// InnerAudioContext 方式
bgMusic.onPlay(() => {
this.globalData.isMusicPlaying = true;
});
bgMusic.onPause(() => {
this.globalData.isMusicPlaying = false;
});
bgMusic.onStop(() => {
this.globalData.isMusicPlaying = false;
});
bgMusic.onEnded(() => {
// InnerAudioContext设置了loop不需要手动重新播放
this.globalData.isMusicPlaying = false;
});
}
// 保存到全局
this.globalData.bgMusic = bgMusic;
// 创建全局方法供其他页面调用
uni.$bgMusic = {
play: () => {
if (bgMusic && bgMusic.play) {
bgMusic.play();
}
return this.globalData.isMusicPlaying;
},
pause: () => {
if (bgMusic && bgMusic.pause) {
bgMusic.pause();
}
return this.globalData.isMusicPlaying;
},
toggle: () => {
if (!bgMusic) return false;
if (this.globalData.isMusicPlaying) {
if (bgMusic.pause) bgMusic.pause();
} else {
if (bgMusic.play) bgMusic.play();
}
return this.globalData.isMusicPlaying;
},
isPlaying: () => this.globalData.isMusicPlaying,
};
} catch (err) {
console.error("初始化背景音乐失败:", err);
}
},
updateMusicSrc(newSrc) {
this.globalData.musicSrc = newSrc;
if (this.globalData.bgMusic) {
this.globalData.bgMusic.src = newSrc;
}
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
@font-face { @font-face {
font-family: 'Futura'; font-family: "Futura";
src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc); src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc);
} }
/*每个页面公共css */ /*每个页面公共css */
@import '@/uni_modules/uni-scss/index.scss'; @import "@/uni_modules/uni-scss/index.scss";
@import "@/static/css/base.css"; @import "@/static/css/base.css";
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
// 设置整个项目的背景色 // 设置整个项目的背景色
page { page {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
/* #endif */ /* #endif */
.example-info { .example-info {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
padding: 10px; padding: 10px;
} }
/* 清除按钮默认样式 */ /* 清除按钮默认样式 */
button::after { button::after {
border: none; border: none;
} }
@keyframes bounce { @keyframes bounce {
0%,
0%, 20%,
20%, 50%,
50%, 80%,
80%, 100% {
100% { transform: translateY(0);
transform: translateY(0); }
}
40% {
40% { transform: translateY(-20rpx);
transform: translateY(-20rpx); }
}
60% {
60% { transform: translateY(-10rpx);
transform: translateY(-10rpx); }
} }
}
/* 音乐控制按钮动画 */
/* 音乐控制按钮动画 */ @keyframes rotate {
@keyframes rotate { from {
from { transform: rotate(0deg);
transform: rotate(0deg); }
}
to {
to { transform: rotate(360deg);
transform: rotate(360deg); }
} }
}
/* 隐藏微信小程序默认音频组件 */
/* 隐藏微信小程序默认音频组件 */ #mp-audio {
#mp-audio { display: none;
display: none; }
}
</style> </style>
Write Preview
Loading…
Cancel
Save