uni-halo/.agents/bak-skills/uniapp-uview/examples/platform-specific/h5.md

H5 Platform

H5 平台注意事项

在 H5 平台使用 uView UI 时的特殊注意事项。

manifest.json 配置

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    },
    "publicPath": "/",
    "template": "index.html"
  }
}

路由模式

H5 支持两种路由模式：

Hash 模式（推荐）

{
  "h5": {
    "router": {
      "mode": "hash"
    }
  }
}

History 模式

{
  "h5": {
    "router": {
      "mode": "history"
    }
  }
}

样式适配

H5 平台需要注意样式适配：

<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 平台特定逻辑：

<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 平台需要考虑浏览器兼容性：

<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 平台可以使用媒体查询：

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