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,97 @@
+# Build Optimization
+
+## 构建优化
+
+优化 UniApp + uView 项目的构建和性能。
+
+### 代码分割
+
+使用条件编译减少代码体积：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <u-button>H5 按钮</u-button>
+    <!-- #endif -->
+    
+    <!-- #ifdef MP-WEIXIN -->
+    <u-button>小程序按钮</u-button>
+    <!-- #endif -->
+  </view>
+</template>
+```
+
+### 组件按需引入
+
+虽然 easycom 会自动引入，但可以优化：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+### 图片优化
+
+```vue
+<template>
+  <view>
+    <!-- 使用 webp 格式（H5） -->
+    <!-- #ifdef H5 -->
+    <image src="/static/image.webp"></image>
+    <!-- #endif -->
+    
+    <!-- 使用 png 格式（小程序） -->
+    <!-- #ifdef MP-WEIXIN -->
+    <image src="/static/image.png"></image>
+    <!-- #endif -->
+  </view>
+</template>
+```
+
+### 样式优化
+
+```vue
+<style lang="scss" scoped>
+/* 使用 scoped 避免样式污染 */
+.container {
+  /* 样式 */
+}
+</style>
+```
+
+### 打包配置
+
+在 manifest.json 中配置打包选项：
+
+```json
+{
+  "mp-weixin": {
+    "setting": {
+      "minified": true,
+      "postcss": true
+    }
+  },
+  "h5": {
+    "optimization": {
+      "treeShaking": {
+        "enable": true
+      }
+    }
+  }
+}
+```
+
+### 注意事项
+
+1. **条件编译**：使用条件编译减少代码体积
+2. **图片优化**：使用合适的图片格式和大小
+3. **样式优化**：使用 scoped 避免样式污染
+4. **打包配置**：正确配置打包选项
+5. **性能测试**：在不同平台测试性能
@@ -0,0 +1,96 @@
+# Custom Theme
+
+## 自定义主题
+
+在 UniApp 项目中自定义 uView UI 主题。
+
+### 修改主题变量
+
+在 `uni.scss` 中修改主题变量：
+
+```scss
+/* uni.scss */
+@import "uview-ui/theme.scss";
+
+/* 自定义主题变量 */
+$u-type-primary: #409EFF;
+$u-type-success: #67C23A;
+$u-type-warning: #E6A23C;
+$u-type-error: #F56C6C;
+$u-type-info: #909399;
+
+/* 自定义其他变量 */
+$u-main-color: #303133;
+$u-content-color: #606266;
+$u-tips-color: #909399;
+$u-light-color: #C0C4CC;
+$u-border-color: #E4E7ED;
+$u-bg-color: #F3F4F6;
+```
+
+### 使用 SCSS 变量
+
+在组件中使用主题变量：
+
+```vue
+<template>
+  <view class="custom-button">自定义按钮</view>
+</template>
+
+<style lang="scss" scoped>
+.custom-button {
+  background-color: $u-type-primary;
+  color: #ffffff;
+  padding: 20rpx 40rpx;
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 全局样式覆盖
+
+在 `App.vue` 中覆盖全局样式：
+
+```vue
+<style lang="scss">
+@import "uview-ui/index.scss";
+
+/* 覆盖 uView 默认样式 */
+.u-button {
+  border-radius: 8rpx;
+}
+
+.u-input {
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 条件编译主题
+
+不同平台可以使用不同主题：
+
+```scss
+/* uni.scss */
+@import "uview-ui/theme.scss";
+
+/* #ifdef H5 */
+$u-type-primary: #409EFF;
+/* #endif */
+
+/* #ifdef MP-WEIXIN */
+$u-type-primary: #07c160;
+/* #endif */
+
+/* #ifdef APP-PLUS */
+$u-type-primary: #007AFF;
+/* #endif */
+```
+
+### 注意事项
+
+1. **变量名称**：使用正确的变量名称
+2. **引入顺序**：先引入 uView 主题，再覆盖变量
+3. **作用域**：注意变量的作用域
+4. **平台差异**：使用条件编译处理平台差异
+5. **测试验证**：在不同平台测试主题效果
@@ -0,0 +1,97 @@
+# Multi-Platform Deployment
+
+## 多平台部署
+
+UniApp + uView 项目支持多平台部署的策略和注意事项。
+
+### 平台差异处理
+
+使用条件编译处理平台差异：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <view>H5 平台内容</view>
+    <!-- #endif -->
+    
+    <!-- #ifdef MP-WEIXIN -->
+    <view>微信小程序内容</view>
+    <!-- #endif -->
+    
+    <!-- #ifdef APP-PLUS -->
+    <view>App 平台内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handlePlatform() {
+      // #ifdef H5
+      // H5 平台代码
+      // #endif
+      
+      // #ifdef MP-WEIXIN
+      // 微信小程序代码
+      // #endif
+      
+      // #ifdef APP-PLUS
+      // App 平台代码
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 统一 API 封装
+
+封装统一的 API 调用：
+
+```javascript
+// utils/api.js
+export function request(url, options = {}) {
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url,
+      ...options,
+      success: (res) => {
+        resolve(res.data)
+      },
+      fail: (err) => {
+        reject(err)
+      }
+    })
+  })
+}
+```
+
+### 平台特定配置
+
+在 manifest.json 中配置各平台：
+
+```json
+{
+  "h5": {
+    "router": {
+      "mode": "hash"
+    }
+  },
+  "mp-weixin": {
+    "appid": "your-appid"
+  },
+  "app-plus": {
+    "usingComponents": true
+  }
+}
+```
+
+### 注意事项
+
+1. **条件编译**：使用条件编译处理平台差异
+2. **API 统一**：封装统一的 API 调用
+3. **配置管理**：正确配置各平台参数
+4. **测试验证**：在各平台测试功能
+5. **文档记录**：记录平台差异和注意事项