hujun
b0ee4f9d7e
1. 新增layout.uts统一管理页面尺寸与安全区计算 2. 修正图片资源路径到static/mobile目录 3. 调整App.vue与AppIcon组件样式适配多端 4. 为微信小程序配置打包忽略规则减少包体积 5. 修复API请求错误抛出类型，完善类型定义 6. 补充README文档说明项目运行与维护规范 7. 优化多个页面的样式与生命周期逻辑
40 lines
1.7 KiB
Plaintext
40 lines
1.7 KiB
Plaintext
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { onResize } from '@dcloudio/uni-app'
|
|
|
|
export type PageLayout = {
|
|
pageStyle: () => string,
|
|
contentStyle: (offset: number, minimum: boolean) => string,
|
|
statusStyle: (offset: number) => string,
|
|
bottomStyle: (padding: number) => string
|
|
}
|
|
|
|
// 原生渲染不支持 vh/calc，统一以窗口尺寸计算，并随旋转更新。
|
|
export function usePageLayout(): PageLayout {
|
|
const windowInfo = ref(uni.getWindowInfo())
|
|
const refresh = () => { windowInfo.value = uni.getWindowInfo() }
|
|
onMounted(() => refresh())
|
|
// #ifdef APP
|
|
onResize((_options) => { refresh() })
|
|
// #endif
|
|
// #ifndef APP
|
|
const handleResize = (_options: OnWindowResizeCallbackResult) => { refresh() }
|
|
uni.onWindowResize(handleResize)
|
|
onUnmounted(() => { uni.offWindowResize(handleResize) })
|
|
// #endif
|
|
const rpx = (value: number): number => value * windowInfo.value.windowWidth / 750
|
|
const status = (): number => windowInfo.value.statusBarHeight ?? 0
|
|
const pageStyle = (): string => 'min-height:' + windowInfo.value.windowHeight + 'px;'
|
|
const contentStyle = (offset: number, minimum: boolean): string => {
|
|
// #ifdef WEB
|
|
return (minimum ? 'min-height:' : 'height:') + 'calc(100vh - ' + status() + 'px - ' + offset + 'rpx);'
|
|
// #endif
|
|
// #ifndef WEB
|
|
const height = Math.max(0, windowInfo.value.windowHeight - status() - rpx(offset))
|
|
return (minimum ? 'min-height:' : 'height:') + height + 'px;'
|
|
// #endif
|
|
}
|
|
const statusStyle = (offset: number): string => 'height:' + (status() + rpx(offset)) + 'px;'
|
|
const bottomStyle = (padding: number): string => 'padding-bottom:' + (rpx(padding) + (windowInfo.value.safeAreaInsets?.bottom ?? 0)) + 'px;'
|
|
return { pageStyle, contentStyle, statusStyle, bottomStyle }
|
|
}
|