shopping-app

严选移动端

技术架构

• uniapp
• vue2
• unicli

  打包构建工具

• vuex

  状态管理

• uni-simple-router

  路由管理，更加的贴近vue-router的路由管理器

• uview-ui

  基础UI库

• js-util-all

  基础工具类

• webscoket

  IM通信

规范约束

• 使用 VS Code 进行开发，并安装项目推荐的插件
• 不允许修改 src 目录以外的（项目配置）文件
• 有需要优化解决的问题记录到 TODO.md 文件中，包括技术方面的踩坑记录和业务方面的 BUG 记录
• 按照当前项目结构进行功能开发，不允许随意改变项目文件结构

项目结构

SRC 目录	用途描述
common	所有JS文件
--api	API 接口定义
--config	项目内配置文件
--dicts	项目中的静态字典表
--plugins	全局插件
--store	数据状态模块
--utils	工具类库模块
components	自定义通用组件
pages	页面文件
static	存放应用的本地静态资源的目录

开发须知

路由页面

• 页面代码尽量做业务模块拆分，禁止出现大几百行上千行的页面文件
• 页面业务模块应就在当前页面目录下创建module 不要放到src/components下

工具类utils

• 项目集成js-util-all基础组件，不需要重复造轮子
• 公共方法统一放置utils文件夹内，可以按分类建方法文件 如：验证类verify.js 请求类request.js；
• 所有公共方法采用大驼峰命名法
• 所有的方法都从index.js输出，引入时统一引入index，不允许直接引入方法文件
• 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
• 方法头部必须有使用注释

// 正确
import {Req, IsPhone} from '@/common/utils';

// 错误
import {Req} from '@/common/utils/request';
import {IsPhone} from '@/common/utils/utils';

// 正确
/**
 * 判断是否为手机号 
 * @param {String | Number} str 手机号
 * @return {Boolean} 
 */
const IsPhone = (str) => {....}
/**
 * 判断是否为邮箱 
 * @param {String} str 邮箱号
 * @return {Boolean} 
 */
const IsEmail = (str) => {....}
export {
	// 判断手机号
	IsPhone,
	// 判断邮箱
	IsEmail
}

// 错误
export const IsPhone = (str) => {....}
export const IsEmail = (str) => {....}

组件

• 请务必使用easycom模式引入第三方组件
• 所有的自定义组件文件名以大驼峰命名，且在templet中使用也用大驼峰形式使用
• 组件分两种类型业务类型、UI功能类型，命名区分(Bsxxx:业务组件、Uixxx:UI功能组件)
• 页头写好使用注释props slot methods events

状态管理以及存储

• 每个功能模块都要对应一个数据状态管理模块
• 必须通过 mutations 修改 state 中的数据
• 接口调用及后续数据逻辑处理应在 actions 中进行，保证多处调用时行为统一
• 使用本存储时必须与 vuex 结合使用，不允许直接在页面中操作本地存储;
• 所有存储 key 必须在 config 中 sotrageKey.js 中定义；

请求

• 所有请求方法命名以（Api+请求类型+具体方法） 法命名
• 所有请求使用ToAsyncAwait 包裹
• 不允许使用try catch 和 then 处理返回结果

// 使用示例
	// xxapi.js
	import {ToAsyncAwait, ReqestTk} from '@/common/utils'
	const ApiGetUserInfo = (parapms) => ToAsyncAwait(ReqestTk.get('xxxxUrl',{params}));
	exprot {
		// 获取用户信息
		ApiGetUserInfo
	}
	// user.vue
	improt {ApiGetUserInfo} from '@/common/api/xxapi.js';
	
	const getUserInfo = async () =>{
		const {error, result} = await ApiGetUserInfo();
		if(error){
			alert(error);
			return false;
		}
		app.userInfo = result;
	}

图片

• 按pages目录结果放置图片
• 有公共使用的图片请放到static/common文件夹内

样式相关

• 样式命名方式采取BEM命名优先法则
• 参考 src/styles/gobalVariables.module.less，颜色、字号、边距、圆角尽可能复用已有的变量
• 没有特殊需求不允许写全局样式，stlye 标签必须加 scoped
• 没有特殊需求不允许定义或使用 ID 选择器、属性选择器

代码库

分支管理

• 分支命名：特性/任务-日期-创建人；例如：fix/213-0505-ch
• 所有新开发功能或修复BUG应基于 prod 分支创建，未上线以提测的Bug则在原有开发分支上继续开发即可
• 提测则将开发分支合并到功能分支，再将功能分支合并到 test 分支，严禁将 test 分支合并进其他任何分支
• 测试通过后先将 beta 分支合并到功能分支解决冲突，再通过提 push request 通知负责人进行代码审查，审查通过后由负责人合并代码
• 预发通过后先将 特性分支 分支合并到 beta 分支解决冲突，再将 beta 分支合并到 dev 分支，此操作只能由负责人进行
• 解决冲突时如涉及其他开发者代码，应跟当事人确认无误后再合并；

提交代码

• 提交前确认项目能正常运行，改动部分功能正常
• 严格遵循 eslint、prettier 代码规范
• 严禁使用 git commit --no-verify -m "xxx" 强制提交代码
• 规范提交信息

  前缀	使用场景	示例
  feat	新增功能点、模块	feat: 用户管理
  fix	修复 BUG	fix: 用户管理分页异常
  doc	文档、注释更新	doc: README
  style	样式、不影响逻辑的代码格式更新	style: 用户管理标题字号
  refactor	重构功能点、模块	refactor: 路由模块逻辑重构
  test	测试	test: 测试工具类
  revert	撤回提交	revert: 有文件漏提交
  build	编译打包	build: 编译用户管理
  merge	合并分支	merge: beta into dev
  perf	性能、体验、逻辑优化	pref: 路由模块解析性能
  conf	配置更新	conf: 项目 base 路径
  chore	其他	chore: 其他