Skip to content

移动端开发规范

Jump to bottom
liaofei edited this page Jan 20, 2021 · 1 revision

CRMEB uni-app

开发规范

命名

页面目录：

  1. 主（pages）目录下的文件夹命名格式为下划线命名法，例如：商品详情 goods_details
例如：
    user 我的里面的文件
        ├─ user_address 添加地址
        ├─ user_address_list 地址列表
        ├─ user_get_coupon 领取优惠券列表
        ├─ user_coupon 我的优惠券列表
        ├─ order_confirm 订单确认
        ├─ order_details 订单详情
  1. 组件（components）目录下的文件夹命名格式为骆驼命名法，例如：优惠券列表弹窗组件 couponListWindow
例如：
        ├─ addressWindow 地址弹窗
        ├─ countDown 倒计时
        ├─ couponListWindow 优惠券列表
        ├─ couponWindow 优惠券
        ├─ productConSwiper 轮播图
        ├─ productWindow 属性
  1. 类名函数命名 小驼峰式 例如：addUser
  2. 常量 采用全大写下划线命名 例如：VUE_APP_API_URl
  3. 变量命名 小驼峰式 例如：userInfo

文件管理规范

 api            接口，最好按照模块建立文件，便于后期维护
 components     一个组建一个文件夹
 config         主要放置项目配置
 libs           主要放置有关授权函数
 mixins         验证码倒计时
 pages          页面模块必须建文件夹区分（尽量避免在主包建立文件夹，防止小程序超包）
 plugin         插件
 static         静态资源包，放置图片样式等（小图标尽量不要更改，样式可以在app.vue中进行全局引用）
 vuex           路由状态管理，一个模块在modules 中建一个文件
 utils          自定义工具js 独立命名，一般不用新建文件夹
 main.js        vue初始化入口文件
 App.vue        应用配置，用来配置app全局样式以及监听应用生命周期
 pages.json     配置页面路由、导航条、选项卡等页面类信息

业务页面文件模块命名

├─ annex 有关扫码付款页
├─ auth  h5授权页
├─ columnGoods 精品推荐、热门榜单、首发新品、促销单品
├─ goods_cate  商品分类
├─ goods_details 商品详情
├─ goods_list 商品列表
├─ goods_search 商品搜索页
├─ index 首页
├─ live_list 小程序直播列表页
├─ news_details 新闻详情页
├─ news_list 新闻列表页
├─ order_addcart 购物车
├─ order_pay_status 支付状态页
├─ user 我的
└─ users 有关个人中心的页面

开发要求

  1. 使用弹性盒子flex布局方便快速；
  2. style的样式单位尽可能的使用rpx，方便兼容其他端；
  3. 为兼容多版本页面布局必须以 包裹，里面必须有个大标签来包裹所有模块；注：尽量避免使用html的标签； 例如： 输入图片说明
  4. 有关css样式规范
  • <style></style>样式模块为页面内样式，只作用于本页面；
  • static/css/base.css用于全局样式；例如：弹性盒子、颜色、内边距等的封装样式；
  • static/css/style.scss全局样式，主要放置某几个页面使用同种样式；
  • uni.scss这里是uni-app内置的常用样式变量； 注：为了css样式的兼容性；本项目使用scss编译插件； 例如： 输入图片说明
  1. uni-app布局标签以及外部大框架是比较靠近小程序规范；里面编写的主要语法比较靠近vue；所以有这两个经验的基本上也很容易快速上手；当然想要更容易的了解到uni-app，详见uni-app官网
Clone this wiki locally