uView Plus Vue3 ： （ VIP Plus 付费版 ）

# vue代码规范

好的 👍 我来帮你整理一份 适用于 Vue 语法的 UniApp 项目代码规范文档，以 Markdown 格式 给出，涵盖：项目结构、文件命名、Vue 组件规范、样式规范、注释规范、JavaScript 逻辑编写等。

下面是完整的内容，你可以直接复制到 CODE_STYLE.md 或 开发规范.md 中使用：

# UniApp 项目代码规范文档

# 1. 项目结构

uniapp-project/
│── pages/                # 页面目录
│   ├── index/            # 首页
│   │   ├── index.vue
│   │   └── index.scss
│   └── user/             # 用户相关页面
│       ├── login.vue
│       └── register.vue
│
│── components/           # 公共组件
│   ├── my-header.vue
│   └── my-footer.vue
│
│── uni_modules/          # 插件目录
│
│── static/               # 静态资源（图片、字体、音频等）
│   ├── images/
│   ├── fonts/
│   └── audio/
│
│── common/               # 公共方法与工具类
│   ├── utils.js
│   ├── request.js
│   └── config.js
│
│── store/                # 状态管理（Vuex/Pinia）
│
│── manifest.json         # 配置文件
│── pages.json            # 页面路由配置
│── uni.scss              # 全局样式

✅ Copy success!

# 2. 文件命名规范

  • 页面/组件文件：统一使用 小写 + 中划线

    • ✅ user-center.vue
    • ❌ UserCenter.vue

  • 目录命名：统一使用 小写 + 中划线

    • ✅ user-info/

  • 静态资源：

    • 图片：模块名-功能名.png → user-avatar.png
    • 样式：index.scss 与 index.vue 同名

# 3. Vue 文件规范

# 3.1 组件结构顺序

<template>
  <view class="user-center">
    <text class="title">{{ title }}</text>
  </view>
</template>

<script>
export default {
  name: "user-center", // 组件名称，统一小写-中划线
  props: {
    title: {
      type: String,
      default: "用户中心"
    }
  },
  data() {
    return {
      userInfo: {}
    }
  },
  computed: {
    isLogin() {
      return !!this.userInfo.token
    }
  },
  watch: {
    userInfo(val) {
      console.log("用户信息更新", val)
    }
  },
  methods: {
    async getUserInfo() {
      try {
        let res = await uni.request({ url: "/api/user/info" })
        this.userInfo = res.data
      } catch (e) {
        console.error("获取用户信息失败", e)
      }
    }
  },
  onLoad() {
    this.getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.user-center {
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    color: #333;
  }
}
</style>

✅ Copy success!

# 4. CSS/SCSS 命名规范

  • 使用 BEM 规范（Block-Element-Modifier）

    • .card {} → Block
    • .card__title {} → Element
    • .card--active {} → Modifier

示例：

.card {
  padding: 20rpx;
  &__title {
    font-size: 32rpx;
  }
  &--active {
    background-color: #f5f5f5;
  }
}

✅ Copy success!

# 5. JS/TS 书写规范

  • 变量命名：camelCase 小驼峰

    • ✅ userInfo
    • ❌ User_Info

  • 常量命名：UPPER_CASE

    • ✅ API_BASE_URL

  • 类命名：PascalCase

    • ✅ UserService

  • 函数命名：动词开头

    • ✅ getUserInfo()
    • ✅ setUserInfo()

# 6. 注释规范

# 6.1 文件头部注释

/**
 * @description 用户请求封装
 * @author ***
 * @date 2025-08-28
 */

✅ Copy success!

# 6.2 方法注释

/**
 * 获取用户信息
 * @param {String} userId 用户ID
 * @returns {Promise<Object>} 用户信息
 */
async function getUserInfo(userId) {
  return await uni.request({ url: `/api/user/${userId}` })
}

✅ Copy success!

# 6.3 逻辑注释

// 校验用户是否已登录
if (!this.isLogin) {
  uni.navigateTo({ url: "/pages/login/login" })
}

✅ Copy success!

# 7. 页面/组件交互规范

  • 页面内方法以 handle 开头

    • ✅ handleLoginClick()
    • ✅ handleSubmitForm()

  • 接口请求方法以 get/post/put/delete 开头

    • ✅ getUserList()

  • 公共工具方法以动词开头

    • ✅ formatDate()

# 8. Git 提交规范

  • feat: 新功能
  • fix: 修复 Bug
  • docs: 文档修改
  • style: 样式修改（不影响功能逻辑）
  • refactor: 代码重构
  • test: 添加测试
  • chore: 构建或辅助工具变动

示例：

feat: 新增用户登录功能
fix: 修复登录页面跳转 bug
style: 调整首页标题样式

✅ Copy success!

# 9. 代码风格约定

  • 使用 ESLint + Prettier 保持统一格式
  • 统一缩进：2 个空格
  • 语句结束必须加 ;
  • 单引号 ' 代替双引号 "

# 10. 其他规范

  • 所有接口地址统一维护在 common/config.js
  • 不允许在页面直接写接口，需封装到 common/request.js
  • 页面逻辑保持单一，复杂逻辑抽离到 utils.js

✅ 以上就是一份 完整的 UniApp Vue 开发代码规范文档，涵盖了常用开发场景。

👉 这样一来：

点击/切换/输入等 UI 事件 → onXxx

具体业务逻辑 → handleXxx

接口调用 → get/post/put/deleteXxx

通用工具方法 → 动词 + 名词

形成清晰分层，团队代码一眼就能区分逻辑职责。

=============== 明白了 ✅ 你是希望我把 常用的 on... 方法命名场景 全部列出来，做成一份清单，开发时直接对照就能用了。

我帮你整理一个 「on事件命名清单」，涵盖 点击、输入、切换、提交、选择、加载、滚动、拖拽、刷新等常见场景。

# 11. 方法命名规范（补充常用 on...）

# 11.1 点击类

  • onClickButton() —— 点击按钮
  • onClickLogin() —— 点击登录
  • onClickLogout() —— 点击退出
  • onClickItem(item) —— 点击列表项
  • onClickBack() —— 点击返回

# 11.2 输入/修改类

  • onInputChange(e) —— 输入框内容变化
  • onInputSearch(e) —— 搜索框输入
  • onChangeSwitch(val) —— 开关切换
  • onChangeCheckbox(val) —— 复选框切换
  • onChangeRadio(val) —— 单选框切换
  • onChangeTab(index) —— Tab 切换
  • onChangeDate(val) —— 日期选择

# 11.3 提交/确认类

  • onSubmitForm(data) —— 提交表单
  • onConfirmDialog() —— 确认弹窗
  • onCancelDialog() —— 取消弹窗

# 11.4 选择类

  • onSelectItem(item) —— 选择某个选项
  • onSelectAddress(addr) —— 选择地址
  • onSelectFile(file) —— 选择文件
  • onSelectImage(img) —— 选择图片

# 11.5 加载/刷新类

  • onLoadPage() —— 页面加载完成
  • onRefreshData() —— 页面刷新
  • onPullDownRefresh() —— 下拉刷新
  • onReachBottom() —— 触底加载更多

# 11.6 滚动/拖拽类

  • onScrollPage(e) —— 页面滚动
  • onScrollToTop() —— 滚动到顶部
  • onScrollToBottom() —— 滚动到底部
  • onDragStart(e) —— 拖拽开始
  • onDragMove(e) —— 拖拽中
  • onDragEnd(e) —— 拖拽结束

# 11.7 其他场景

  • onOpenModal() —— 打开弹窗
  • onCloseModal() —— 关闭弹窗
  • onPlayAudio() —— 播放音频
  • onPauseAudio() —— 暂停音频
  • onErrorRequest(err) —— 请求出错
  • onSuccessRequest(res) —— 请求成功

# 代码示例

<template>
  <view>
    <button @click="onClickLogin">登录</button>
    <input @input="onInputChange" />
    <switch @change="onChangeSwitch" />
    <form @submit="onSubmitForm"></form>
    <scroll-view @scrolltolower="onReachBottom"></scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    onClickLogin() {
      this.handleLogin()
    },
    onInputChange(e) {
      this.searchKey = e.detail.value
    },
    onChangeSwitch(val) {
      this.isOpen = val
    },
    onSubmitForm(data) {
      this.handleSubmit(data)
    },
    onReachBottom() {
      this.handleLoadMore()
    }
  }
}
</script>

✅ Copy success!

这样整理之后，团队就可以直接对照使用，看到 onClickXXX 就知道是 UI交互事件，看到 handleXXX 就知道是 业务逻辑方法。

要不要我帮你把 这些 on...清单 也合并进之前的 完整代码规范文档，出一个最终整合版 CODE_STYLE.md？

← wss_socket →