mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
96 lines
1.9 KiB
Markdown
96 lines
1.9 KiB
Markdown
# H5 Platform | H5 平台
|
|
|
|
## Instructions
|
|
|
|
This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.
|
|
|
|
### Key Concepts
|
|
|
|
- H5 responsive design
|
|
- Browser compatibility
|
|
- Performance optimization
|
|
- CSS and SCSS support
|
|
|
|
### Example: H5 Responsive Components
|
|
|
|
```vue
|
|
<!-- pages/index/index.vue -->
|
|
<template>
|
|
<view class="container">
|
|
<u-grid :col="gridCol">
|
|
<u-grid-item v-for="item in gridData" :key="item.id">
|
|
{{ item.name }}
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const gridCol = ref(3)
|
|
const gridData = ref([])
|
|
|
|
onMounted(() => {
|
|
// #ifdef H5
|
|
// H5: Adjust based on window width
|
|
const updateGridCol = () => {
|
|
if (window.innerWidth > 1200) {
|
|
gridCol.value = 4
|
|
} else if (window.innerWidth > 768) {
|
|
gridCol.value = 3
|
|
} else {
|
|
gridCol.value = 2
|
|
}
|
|
}
|
|
updateGridCol()
|
|
window.addEventListener('resize', updateGridCol)
|
|
// #endif
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100%;
|
|
/* H5: Use viewport units for responsive sizing */
|
|
padding: 20rpx;
|
|
|
|
// #ifdef H5
|
|
@media (min-width: 768px) {
|
|
padding: 40rpx;
|
|
}
|
|
// #endif
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Example: H5 Browser Compatibility
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
|
|
onMounted(() => {
|
|
// #ifdef H5
|
|
// Check browser compatibility
|
|
if (!window.CSS || !CSS.supports('display', 'flex')) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您的浏览器版本过低，部分功能可能无法正常使用',
|
|
showCancel: false
|
|
})
|
|
}
|
|
// #endif
|
|
})
|
|
</script>
|
|
```
|
|
|
|
### Key Points
|
|
|
|
- H5 supports full CSS and SCSS features
|
|
- Use viewport units (vw, vh) for responsive sizing
|
|
- Handle window resize events for responsive components
|
|
- Check browser compatibility for modern CSS features
|
|
- Use conditional compilation (`#ifdef H5`) for H5-specific code
|
|
- Use media queries for responsive design
|