[TOC]

一、项目介绍

1. 项目：“bbs”是一套采用“uni-App”开发的分享社交论坛，AndroidApp、IOSApp、微信小程序。
2. 代码分支：static分支为：静态页面，master分支为：静态页面+接口交互
3. 前端框架：uni-app,vue.js。
4. UI框架：uViewUI。

二、项目展示

三、目录说明

【项目目录】

share-bbs
├─ common // 公共库
  ├─ css // css样式库
    ├─ common.css：公共样式库（自定义）
    ├─ animate.css：动画库（第三方）
    ├─ iconfont.css：自定义图标库（第三方）
    └─ uni.css： 官方UI库（第三方）
  └─ js // js工具库
├─ components // 组件库
   ├─ com-* // 公共组件
   ├─ 页面名称-* // 页面组件
   └─ uni-* // uni组件
├─ pages // 页面
   ├─ index // 首页模块
   ├─ news // 动态模块 
   ├─ paper // 小纸条模块
   └─ mine // 我的模块
├─ static // 静态资源
   ├─ font // 字体文件
   └─ img // 图片文件

【注意事项】

1. static/img 图片文件
   • 建议图片能够放后端或者云存储的尽量就别放前端，减少包体积和优化加载速度 。
   • 图片如果是复用的图片，不属于某个页面独有的图片，直接放此目录。
   • 图片如果属于某个功能模块独有的，需要建立一个和模块名称同名的文件夹，再存于文件夹下。如：static/img/pay 支付模块的图片。
2. store vuex缓存 我们采用分模块来管理各个vuex子模块，便于项目的维护和整合。
   • index.js 此文件是入口文件，方便整合和引入vuex模块
   • modules/user.js 此文件是用户信息相关vuex模块
3. 命名规范
   • CSS类命名规范：命名采用小写字母加中划线，尽量语义化，前缀是类型，后面是操作。如：提交按钮 btn-submit。
   • JS函数命名规范：命名采用小驼峰，尽量语义化，如：parseStartTag。
4. pages.json
   • 因为有的页面取消了导航栏，导致没法直观的辨别该页面是哪个页面，做啥的。
   • 每个页面配置项，顶部应该备注该页面说明，如：// 动态新闻页面。
   • 特别的参数项，应该备注参数说明，如：// 设置导航栏文字。

三、组件说明

3.1 组件命名规范

1. 组件名称：中划线，如：goods-list
2. 组件文件：组件名称/组件名称.vue，一个组件对应一个文件夹，该文件夹下可以有多个类型的文件（如：js、img、css等）。如：goods-list/goods-list.vue

3.2 组件存放规范

1. uni-ui组件或者三方组件直接存放为：components/uni-*(遵循：easycom规则)
   在使用 uni-ui 的时候，只要uni-ui组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用 uni-ui 组件。
2. 自定义公共复用组件存放为：components/com-*/com-*.vue (遵循：easycom规则)
   这里存放自定义复用组件，方便大家开发和复用、共享。如果要修改，uni-ui组件，也建议复制粘贴到这里，然后自定义修改，避免去uni-ui中直接修改，因为后面uni官方组件升级后会导致之前的自定义代码丢失。
3. 自定义非公共组件存放到：当前页/组件文件,如：首页的广告组件，index/index-adv/index-adv.vue 因为有的页面组件，自定义或者抽离的组件，也许其他页面根部就不会复用到，只是为了让主页面代码简洁和便于维护，那么这些组件，应该直接放到当前页下的child-comps文件夹中，独立维护。

3.3 组件说明规范

每个自定义组件，组件用法、参数描述应该简单、清晰，应该在组件代码的<script>标签内的第一行备注好：组件名称、组件描述、开发人员、组件参数等，因为时间可以淡忘一切，当然也可以让你淡忘掉之前你为什么要传这个参数。

<script>
	/*
	 * LoadMore 加载更多
	 * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
	 * @author JayChou
	 * @property {String} status = [more|loading|noMore] loading 的状态
	 * 	@value more loading 前
	 * 	@value loading loading 中
	 * 	@value noMore 没有更多了
	 * @property {Number} iconSize 指定图标大小
	 */

</script>