0.0.1 • Published 4 years ago

uni-ccui v0.0.1

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
4 years ago

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
    • 餐饮
    • 新闻

组件

注意事项

  • 组件减少对公共样式依赖,除细线方案外
  • 组件减少对项目公共业务方法依赖, 提取到第三方包,直接引用
  • 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
    • 复杂弹窗功能(支持优先级控制,队列,多模板配置)
      • 把数据放进去,第一次弹出第一个,下一次弹第二个(记录已弹出过的)

工具 && 模板

关于样式

https://bemcss.com/

BEM的命名规矩很容易记:block-name__element-name--modifier-name,也就是模块名 + 元素名 + 修饰器名

BEM思想,是不考虑结构的,不使用子代选择器,不需要原子类(如ellipsis)

0.0.1

4 years ago