peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 替换已弃用的 getSystemInfoSync API 并优化移动端布局

Browse Source 
- 将所有 uni.getSystemInfoSync() 替换为新的推荐 API
  - uni.getDeviceInfo() 获取设备信息
  - uni.getWindowInfo() 获取窗口信息
  - uni.getAppBaseInfo() 获取应用基础信息
- 优化页面布局适配移动端小程序
  - page 添加 height: 100% 和 overflow: hidden
  - 主页面使用 height: 100vh 替代 min-height
  - 移除滚动条显示（::-webkit-scrollbar）
  - 添加 flex-shrink: 0 防止卡片收缩
- 修复隐藏滚动条，提升移动端体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
huazhongmin
2026-03-07 18:27:04 +08:00
parent 130f532116
commit b9473d5059
10 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini-program/src/App.vue
+17 -10
View File
@@ -11,10 +11,15 @@ onLaunch(async () => {
console.log('App Launch')
const store = useAppStore()
await store.initialize()
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const deviceInfo = uni.getDeviceInfo()
const windowInfo = uni.getWindowInfo()
const appBaseInfo = uni.getAppBaseInfo()
statusBarHeight.value = windowInfo.statusBarHeight || 20
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
uni.setStorageSync('statusBarHeight', statusBarHeight.value)
uni.setStorageSync('safeAreaTop', safeAreaTop.value)
uni.setStorageSync('safeAreaBottom', safeAreaBottom.value)
@@ -35,8 +40,9 @@ page {
background-color: #0F071A;
color: #F3E8FF;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding-top: 0;
padding-bottom: 0;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
/* 星空背景 */
@@ -235,16 +241,17 @@ page {
}
::-webkit-scrollbar {
width: 4rpx;
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-thumb {
background: rgba(168, 85, 247, 0.3);
border-radius: 10rpx;
background: transparent;
}
::-webkit-scrollbar-track {
background: rgba(168, 85, 247, 0.05);
background: transparent;
}
@keyframes fadeIn {
mini-program/src/components/MusicPlayer.vue
+3 -2
View File
@@ -57,8 +57,9 @@ const toggleMusic = async () => {
}
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
const safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
const safeAreaBottom = windowInfo.safeAreaInsets?.bottom || 0
bottomPosition.value = `${safeAreaBottom + 96}px`
})
mini-program/src/pages/login/index.vue
+5 -4
View File
@@ -77,10 +77,11 @@ const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
statusBarHeight.value = windowInfo.statusBarHeight || 20
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
})
const phone = ref('')
mini-program/src/pages/main/PathView.vue
+1
View File
@@ -96,6 +96,7 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 32rpx;
min-height: 100%;
}
.page-title {
mini-program/src/pages/main/RecordView.vue
+2
View File
@@ -122,10 +122,12 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 32rpx;
min-height: 100%;
}
.input-card {
padding: 32rpx;
flex-shrink: 0;
}
.card-header {
mini-program/src/pages/main/ScriptView.vue
+1
View File
@@ -272,6 +272,7 @@ onMounted(async () => {
display: flex;
flex-direction: column;
gap: 32rpx;
min-height: 100%;
}
.page-title {
mini-program/src/pages/main/index.vue
+8 -4
View File
@@ -124,9 +124,10 @@ const initStars = () => {
}
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
store.initialize()
uni.$on('switchTab', switchTab)
@@ -154,11 +155,12 @@ const goToProfile = () => {
<style scoped>
.main-page {
min-height: 100vh;
height: 100vh;
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 星空背景 */
@@ -291,6 +293,8 @@ const goToProfile = () => {
position: relative;
z-index: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: 0;
}
.tab-page {
mini-program/src/pages/onboarding/index.vue
+4 -3
View File
@@ -265,9 +265,10 @@ const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
onMounted(async () => {
const systemInfo = uni.getSystemInfoSync()
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
await store.fetchUserProfile()
Object.assign(formData, store.registrationData)
currentStep.value = store.currentStep || 1
mini-program/src/pages/profile/index.vue
+4 -3
View File
@@ -72,9 +72,10 @@ const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
})
const userProfile = computed(() => store.userProfile || {})
mini-program/src/pages/splash/index.vue
+4 -3
View File
@@ -24,9 +24,10 @@ const statusBarHeight = ref(20)
const safeAreaBottom = ref(0)
onLoad(() => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
// 使用新的推荐 API 替代已弃用的 getSystemInfoSync
const windowInfo = uni.getWindowInfo()
statusBarHeight.value = windowInfo.statusBarHeight || 20
safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
setTimeout(async () => {
const store = useAppStore()
const token = uni.getStorageSync('access_token')