# 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. **调试工具**：可以使用浏览器开发者工具调试