mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
160 lines
2.4 KiB
Markdown
160 lines
2.4 KiB
Markdown
# H5 Platform
|
|
|
|
## H5 平台注意事项
|
|
|
|
在 H5 平台使用 uView UI 时的特殊注意事项。
|
|
|
|
### manifest.json 配置
|
|
|
|
```json
|
|
{
|
|
"h5": {
|
|
"router": {
|
|
"mode": "hash",
|
|
"base": "/"
|
|
},
|
|
"devServer": {
|
|
"https": false,
|
|
"port": 8080
|
|
},
|
|
"publicPath": "/",
|
|
"template": "index.html"
|
|
}
|
|
}
|
|
```
|
|
|
|
### 路由模式
|
|
|
|
H5 支持两种路由模式：
|
|
|
|
#### Hash 模式（推荐）
|
|
|
|
```json
|
|
{
|
|
"h5": {
|
|
"router": {
|
|
"mode": "hash"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
#### History 模式
|
|
|
|
```json
|
|
{
|
|
"h5": {
|
|
"router": {
|
|
"mode": "history"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 样式适配
|
|
|
|
H5 平台需要注意样式适配：
|
|
|
|
```vue
|
|
<template>
|
|
<view class="container">
|
|
<u-button type="primary">按钮</u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
/* H5 平台特定样式 */
|
|
/* #ifdef H5 */
|
|
min-height: 100vh;
|
|
/* #endif */
|
|
|
|
/* 通用样式 */
|
|
padding: 20rpx;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 条件编译
|
|
|
|
使用条件编译处理 H5 平台特定逻辑：
|
|
|
|
```vue
|
|
<template>
|
|
<view>
|
|
<!-- #ifdef H5 -->
|
|
<view>H5 平台特有内容</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
handleClick() {
|
|
// #ifdef H5
|
|
// H5 平台特定代码
|
|
window.location.href = 'https://example.com'
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 浏览器兼容性
|
|
|
|
H5 平台需要考虑浏览器兼容性：
|
|
|
|
```vue
|
|
<template>
|
|
<view>
|
|
<u-button @click="checkBrowser">检查浏览器</u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
checkBrowser() {
|
|
// #ifdef H5
|
|
const ua = navigator.userAgent
|
|
if (ua.indexOf('Chrome') > -1) {
|
|
this.$u.toast('Chrome 浏览器')
|
|
} else if (ua.indexOf('Safari') > -1) {
|
|
this.$u.toast('Safari 浏览器')
|
|
}
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 响应式布局
|
|
|
|
H5 平台可以使用媒体查询：
|
|
|
|
```vue
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100%;
|
|
|
|
/* #ifdef H5 */
|
|
@media (min-width: 768px) {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
/* #endif */
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 注意事项
|
|
|
|
1. **路由模式**：推荐使用 hash 模式，兼容性更好
|
|
2. **样式单位**：H5 平台 rpx 会自动转换为 rem
|
|
3. **浏览器兼容**：注意不同浏览器的兼容性
|
|
4. **性能优化**：H5 平台可以使用更多 Web API
|
|
5. **调试工具**：可以使用浏览器开发者工具调试
|