refactor: 架构升级

2026-09-13 00:50: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,118 @@
+# App Platform
+
+## App 平台注意事项
+
+在 App 平台（iOS/Android）使用 uView UI 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
+        ]
+      },
+      "ios": {}
+    }
+  }
+}
+```
+
+### 权限配置
+
+#### Android 权限
+
+```json
+{
+  "app-plus": {
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>"
+        ]
+      }
+    }
+  }
+}
+```
+
+#### iOS 权限
+
+在 manifest.json 中配置，或在 Xcode 中配置 Info.plist。
+
+### 原生插件
+
+App 平台可以使用原生插件：
+
+```javascript
+// #ifdef APP-PLUS
+// 使用 5+ API
+plus.device.getInfo((info) => {
+  console.log('设备信息', info)
+})
+
+// 使用原生插件
+const plugin = uni.requireNativePlugin('your-plugin-name')
+// #endif
+```
+
+### 条件编译
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef APP-PLUS -->
+    <view>App 平台特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      // #ifdef APP-PLUS
+      // App 平台特定代码
+      plus.share.sendWithSystem({
+        content: '分享内容'
+      })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 状态栏适配
+
+```vue
+<template>
+  <view>
+    <u-navbar 
+      title="首页"
+      :safe-area-inset-top="true"
+    ></u-navbar>
+  </view>
+</template>
+```
+
+### 注意事项
+
+1. **权限配置**：根据功能需求配置相应权限
+2. **原生插件**：可以使用原生插件扩展功能
+3. **性能优化**：App 平台需要注意性能优化
+4. **打包配置**：正确配置打包参数
+5. **版本号**：正确配置版本号和版本名称
@@ -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. **调试工具**：可以使用浏览器开发者工具调试
@@ -0,0 +1,178 @@
+# Mini-Program Platform
+
+## 小程序平台注意事项
+
+在微信小程序等小程序平台使用 uView UI 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "mp-weixin": {
+    "appid": "your-appid",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true
+  }
+}
+```
+
+### 组件使用
+
+小程序平台需要确保组件正确注册：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+### 条件编译
+
+使用条件编译处理小程序平台特定逻辑：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef MP-WEIXIN -->
+    <view>微信小程序特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      // #ifdef MP-WEIXIN
+      // 微信小程序特定代码
+      wx.login({
+        success: (res) => {
+          this.$u.toast('登录成功')
+        }
+      })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 小程序 API
+
+#### 登录
+
+```javascript
+// #ifdef MP-WEIXIN
+wx.login({
+  success: (res) => {
+    if (res.code) {
+      // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      this.$u.post('/api/login', {
+        code: res.code
+      }).then(result => {
+        this.$u.toast('登录成功')
+      })
+    }
+  }
+})
+// #endif
+```
+
+#### 获取用户信息
+
+```javascript
+// #ifdef MP-WEIXIN
+wx.getUserProfile({
+  desc: '用于完善用户资料',
+  success: (res) => {
+    this.userInfo = res.userInfo
+    this.$u.toast('获取用户信息成功')
+  }
+})
+// #endif
+```
+
+#### 分享
+
+```javascript
+onShareAppMessage() {
+  // #ifdef MP-WEIXIN
+  return {
+    title: '分享标题',
+    path: '/pages/index/index',
+    imageUrl: '/static/share.png'
+  }
+  // #endif
+}
+```
+
+### 页面配置
+
+小程序页面需要在 pages.json 中配置：
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "enablePullDownRefresh": true
+      }
+    }
+  ]
+}
+```
+
+### 下拉刷新
+
+```vue
+<template>
+  <view>
+    <u-list 
+      :list="list"
+      @refresh="onRefresh"
+    ></u-list>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    }
+  },
+  onPullDownRefresh() {
+    this.onRefresh()
+  },
+  methods: {
+    onRefresh() {
+      // 刷新数据
+      setTimeout(() => {
+        uni.stopPullDownRefresh()
+      }, 1000)
+    }
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **AppID 配置**：必须在 manifest.json 中配置正确的 AppID
+2. **URL 检查**：开发时可以关闭 urlCheck
+3. **组件注册**：确保 easycom 配置正确
+4. **页面路径**：页面路径必须以 `/` 开头
+5. **代码包大小**：注意小程序代码包大小限制
@@ -0,0 +1,93 @@
+# nvue Platform
+
+## nvue 平台注意事项
+
+在 nvue 页面使用 uView UI 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "app-plus": {
+    "nvueStyleCompiler": "uni-app",
+    "nvue": {
+      "flex-direction": "column"
+    }
+  }
+}
+```
+
+### 样式限制
+
+nvue 平台样式有限制：
+
+```vue
+<template>
+  <view class="container">
+    <u-button type="primary">按钮</u-button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  /* nvue 支持的样式 */
+  flex-direction: column;
+  padding: 20rpx;
+  
+  /* nvue 不支持的样式需要条件编译 */
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+}
+</style>
+```
+
+### 组件兼容性
+
+某些 uView 组件在 nvue 中可能不完全支持，需要使用条件编译：
+
+```vue
+<template>
+  <view>
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <u-parse :html="content"></u-parse>
+    <!-- #endif -->
+    
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <text>{{ content }}</text>
+    <!-- #endif -->
+  </view>
+</template>
+```
+
+### Flex 布局
+
+nvue 主要使用 Flex 布局：
+
+```vue
+<template>
+  <view class="container">
+    <view class="item">Item 1</view>
+    <view class="item">Item 2</view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.item {
+  flex: 1;
+}
+</style>
+```
+
+### 注意事项
+
+1. **样式限制**：nvue 不支持所有 CSS 属性
+2. **组件兼容**：某些组件在 nvue 中可能不完全支持
+3. **Flex 布局**：主要使用 Flex 布局
+4. **性能**：nvue 性能更好，但功能有限
+5. **条件编译**：使用条件编译处理兼容性问题