uniapp规范
掘金安东尼 2019-07-30
编程规范
# 代码规范
# uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。详见评测 (opens new window)
# 版本记录
示例： 0.0.0.20021212 (e.g. 版本更新.特性更新.修订补丁.年月日)
- 【新增功能】
- 新增XXX
- 【bug修订】
- 修订XXX
- 【优化相关】
- 优化XXX
- 【待处理】
- XXX
# 技术选型
- 【模板选用】
- uniapp-新闻/咨询App模板（init）
- 【语法校验】
- selint-plugin-vue => vue 语法校验
- eslint-js => js 语法校验
- stylelint => css\less\sass 语法校验
- 【分包处理】-提前分包，幸福你我他
- pagesA
- 【代码提交说明】
- 避免提交unpackage目录的打包内容
- 避免提交node_modules目录的打包内容
# 组件管理
- 【状态管理】-选用vuex
- getters
- 【全局设置】
- 下拉刷新设置
- 全局函数管理
- 全局变量管理
- 上传图片
- 【数据字典】
- 【组件规范记录】
- uniapp-新闻/咨询App模板 => 项目新建
- fr_uni_app-master (opens new window) => 自定义底部导航、自定义loading
- uni-swiper-dot (opens new window) => swiper
- app发布新闻 (opens new window) =>publish、comment
- 【第三方插件】
- 【静态资源管理】
- 【请求封装】
- 请求Loading
- tryCatch
- Promise
- 【路由跳转】
- 【图标管理】
- iconfont
- 【其它】
- 按钮禁止与启用
- 手机号、身份证等常见信息正则校验
- input框一键清除
# 目录结构
┌─components //组件目录
│ │─footer 底部自定义导航页脚
│ │ └─footer_nav
│ │─loading 自定义loding
│ │ └─loading
│ │─uni-swiper-dot swiper
│ │ └─uni-swiper-dot
│ │─watch-login 登录相关组件
│ │ └─
│ │─sunui-mverify 滑动验证
│ │ └─
│ └─template (可复用的模板组件目录)
│ │─comments
│ │ └─comments 评论模板
│ │─image 图片模板目录
│ │ │─choose 选择图片
│ │ │─compress 压缩图片
│ │ └─cut 可视化裁剪图片
├─common 可复用公共工具插件类
│ │─css
│ │ └─iconfont.css 阿里云图标库css
│ │ └─uni.css uniapp的css
│ │─lib 公共库目录
│ │ └─loading_animate loadingJS
│ │ └─wxParse 微信富文本工具
│ │ └─html-parser 富文本js
│ └─self_js 自定义公共js工具插件目录
│ │─Base64.js base64编码转换工具
│ │─Id.js id生成
│ │─Img.js 图片处理
│ │─index.js 入口
│ │─Json.js json处理转换
│ │─Md5.js Md5编码转换工具
│ │─Obj.js 数组对象处理
│ │─Storage.js Storage缓存工具
│ │─Time.js 时间格式转换处理工具
│ │─Url.js Url地址处理工具
│ └─Validate.js input输入验证器
│
├─api AJAX请求封装
│ ├─data 模拟请求所需的数据目录，实际开发中，请删除。
│ │ │─xxx.js 模拟数据
│ │ └─xxx.js …………
│ └─AJAX.js AJAX请求封装 ##待确认##
│
├─store vuex
│ ├─goods.js 商户商品购物车处理
│ │─index.js vuex主入口封装
│ │—win.js 窗口宽高元素处理
│ └─store.js 登陆状态 用户信息处理
│
├─platforms 存放各平台专用页面的目录，[详见](https://uniapp.dcloud.io/platform) ##后续APP需要 当前暂不考虑##
│
├─pages 业务页面文件存放的目录
│ │─home 首页
│ │ └─home.vue
│ │─list 主题列表
│ │ └─list.vue
│ │─publish 发布
│ │ └─publish.vue
│ └─ucenter 个人中心
│ └─ucenter.vue
├─pages_subA 分包A
│
├─static 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
│ ├─image 图片目录
│ │ └─xxx.jpg 图片
│ ├─vedio 视频目录
│ │ └─xxx.mp4 图片
│ └─audio 媒体目录
│ └─xxx.mp3 音频
│
├─main.js Vue初始化入口文件
│
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
│
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
│
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
# 参考链接
javascript-clean-code-best-practices (opens new window)
