refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,159 @@
+# 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. **调试工具**：可以使用浏览器开发者工具调试