0.0.1 • Published 4 years ago
uni-ccui v0.0.1
uni-ccui
基于 uni-app 的 ui 框架 uni-ccui
TIP: 文件名或者文件夹名中不允许出现 @ 符号,static/cart/add@2x.png,请调整后重试
规划列表:
- 工具类复用
- @deepjs/shared 一系列小工具,细粒度拆分
- @deepjs/uni-ccui 基于 uni-app 的 ui组件库
- 基础组件(处理平台差异性)
- 简单封装原生组件
- API接口
- 适当扩展 API
- 扩展组件
- 营销组件 https://opendocs.alipay.com/mini/component-ext/marketing-components
- wheel-draw 大转盘
- fruit-slots 水果机
- scratch-card 刮刮卡
- hit-eggs 砸金蛋
- dice-roller 摇骰子
- flip-draw 翻盘抽奖
- lock 手势解锁
- 项目模板
- 行业模板
- 水果店
- 社交
- 电商 mall-uni
- 餐饮
- 新闻
组件
- https://uniapp.dcloud.io/component/README?id=uniui
- https://opendocs.alipay.com/mini/component-ext/ui-overview
- https://uniapp.dcloud.io/h5/pcguide.html
注意事项
- 组件减少对公共样式依赖,除细线方案外
- 组件减少对项目公共业务方法依赖, 提取到第三方包,直接引用
- TODO: 统一事件
$emit
传递数据的格式 - 鉴于 sass 存在个安装依赖编译慢问题,推荐用 less
- cli 编译模式,还是没 HbuildX 编译稳定,有时出现一些奇怪的错误
- 可以挖掘下,编译软件用的哪个版本的依赖
/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniapp-cli/package.json
- 有点遗憾,使用上面的版本,parse.vue 还是报错,还未找到原因
- 突然发现是项目目录的原因,直接在 src 运行不报错,在根目录运行就出现上面的问题,所以 cli 如能改变编译目录,就 OK 了
不要将外部组件直接copy进来,如需要,考虑是否贴合我们的使用场景
基础组件
- page 页面容器
- badge 徽标
- calendar 日历
- quick-nav 快速导航 !!!
- card 卡片
- cell cell列表项 !!!
- cell-group 分组 !!
- collapse 折叠面板
- combox 可选择输入框
- countdown 倒计时 !!
- drawer 抽屉
- divider 分割线
- editor 编辑器
- fab 悬浮按钮
- fav 收藏按钮
- grid 宫格
- header-bar 标题栏(支持适配 iPhoneX)
- header 标题
- html 复杂富文本解析 !!!
- icon iconfont 图标 !!!
- image 图片(支持大小设定) !!
- indexed-bar 索引栏
- indexed-list 索引列表
- input-number 数字输入框 !!!
- link 超链接(支持复制)
- list 列表
- load-more 加载更多 !!
- nav-bar 自定义导航栏
- notice-bar 通告栏 !
- page-result 结果页
- pager 分页器
- picker 选择器 !!
- picture 图片预览
- popup 弹出层 !!!
- progress 进度条
- pull-down 下拉刷新 !!
- pull-up 滚动加载(记忆位置) !!!
- pull-list 滚动加载列表 !!! 废弃此版本实现,改为新版
- rate 评分
- rich-text 简单富文本展示 !!
- search-bar 搜索栏 !!!
- share 分享按钮
- slider 滑动选择器
- stepper 步骤条 !!
- sticky 滚动吸顶
- swiper swiper图片滚动 !!!
- swiper-dot 轮播图指示点 !
- swipe-action 滑动操作
- switch 开关 !!
- textarea 文本区域(带字数控制)
- transition 过渡动画 !!
- tab Tab切换 !!!
- tab-bar 标签栏
- tag 标签 !
- upload 上传组件
- waterfall 瀑布流
- diy组件 动态可控的布局页面实现
- 数据配置 item = { data, style, share }
- 媒体组件
- swiper 图片轮播 banner
- image-single 单图
- window 图片橱窗
- video 视频
- article 文章
- special 头条快报
- 商城组件
- search-bar 搜索框 search
- notice 公告栏
- quick-nav 分类导航区块 nav-group
- goods 商品
- coupon 领取优惠券
- sharing-goods 拼团商品
- bargain-goods 砍价商品
- sharp-goods 秒杀商品
- shop 线下门店
- 工具组件
- service 在线客服
- rich-text 富文本
- blank 辅助空白
- hr 辅助线 guide
- 业务组件
- picker-city 省市区/城市选择
- address-list 地址列表
- address-update 地址更新
- contact 编辑联系人/地址
- coupon-item 优惠券列表项
- coupon-list 优惠券列表
- goods-action 底部购物导航 !!
- product-item 商品卡片 !!!
- product-list 商品列表 !!!
- sku 多sku选择 !!!
- 页面模板
- 图表
- tab-list 一般tab切换列表
- tab-list-swipe 支持滑动切换的tab列表
- recycle-list 无限循环滚动列表(长列表)
- 上下滑动切换视频
- 解决方案
- 组件通信问题
- geo定位功能实现
- 全局数据共享 globalData && vuex
- 复杂弹窗功能(支持优先级控制,队列,多模板配置)
- 把数据放进去,第一次弹出第一个,下一次弹第二个(记录已弹出过的)
工具 && 模板
关于样式
BEM的命名规矩很容易记:block-name__element-name--modifier-name,也就是模块名 + 元素名 + 修饰器名
BEM思想,是不考虑结构的,不使用子代选择器,不需要原子类(如ellipsis)
0.0.1
4 years ago