当前位置：首页 > uni-app

重构uniapp

2026-01-13 20:25:14uni-app

重构 Uniapp 项目的关键方法

代码结构优化
将页面、组件、静态资源按功能模块划分，避免全部堆放在根目录。建议采用以下结构：

src/
├── components/       // 通用组件
├── pages/            // 页面目录
│   ├── moduleA/      // 模块A
│   └── moduleB/      // 模块B
├── static/           // 静态资源
└── store/            // 状态管理

组件化开发
提取可复用的 UI 元素为独立组件，通过 props 和事件实现数据交互。例如封装按钮组件：

<template>
  <button :class="['my-btn', type]" @click="$emit('click')">
    <slot></slot>
  </button>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>

状态管理升级
复杂项目建议使用 Pinia 替代 Vuex：

// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({ token: null }),
  actions: {
    login() { /* ... */ }
  }
})

性能优化策略

使用分包加载：在 manifest.json 中配置 optimization.subPackages
图片压缩：通过工具如 tinypng 压缩后放入 static 目录
按需引入组件库：修改 babel.config.js 配置按需导入

代码规范统一

配置 ESLint + Prettier 自动格式化
添加 .editorconfig 文件统一缩进风格
使用 husky 设置 pre-commit 钩子校验代码

路由管理改进
对复杂路由进行模块化拆分：

// router/modules/
const routes = [
  {
    path: '/detail/:id',
    component: () => import('@/pages/detail'),
    meta: { requiresAuth: true }
  }
]

多端兼容处理

条件编译
利用 #ifdef 处理平台差异：

onLoad() {
  // #ifdef H5
  console.log('仅在H5生效')
  // #endif
}

统一 API 封装
对常用接口进行二次封装：

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: res => resolve(res.data),
      fail: reject
    })
  })
}

持续集成方案

自动化构建
配置 GitHub Actions 自动部署：

name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build:h5

版本控制规范
采用语义化版本控制，通过 CHANGELOG.md 记录更新内容，使用 standard-version 自动生成版本日志：