@deepjs/uni-ccui

uni-ccui

基于 uni-app 的 ui 框架 uni-ccui

优先使用 uni-ui 组件库，在其不支持或支持存在差异的情况下，使用 uni-ccui

TIP:

• 优先使用背景图，而非 image 标签 参考-本地图片

• 使用css样式，扩大可点击区域：

  .human {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: -10px; bottom: -10px; left: -10px; right: -10px;
    };
  }

如何使用：

配置 uni-app 项目 pages.json 中的 easycom 项

// 自动按需引入
"easycom": {
  "autoscan": true,
  "custom": {
    // "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    "^cc-(.*)": "@deepjs/uni-ccui/lib/cc-$1/cc-$1.vue",
    "^dd-(.*)": "@/components/cc-$1/cc-$1.vue",
  }
}

模板中使用

<template>
  <cc-countdown time="9000" format="H:F:S" @timeup="timeUp">
</template>

<script>
export default {
  methods: {
    timeUp() {
      console.log('计时结束')
    },
  },
}
</script>

TIP:

• 文件名或者文件夹名中不允许出现 @ 符号，static/cart/[e-mail]，请调整后重试
• 使用 yarn 管理依赖
• 各组件要使用微信小程序，支付宝小程序同时测试验证通过
• 使用系统图标，需要手动引入系统图标的 iconfont (main.js 中)
  • import '@deepjs/uni-ccui/style/iconfont.css'

注意事项

• 组件减少对公共样式依赖，除细线方案外
• 组件减少对项目公共业务方法依赖, 提取到第三方包，直接引用
• TODO: 统一事件 $emit 传递数据的格式
• 鉴于 sass 存在个安装依赖编译慢问题，推荐用 less
• cli 编译模式，还是没 HbuildX 编译稳定，有时出现一些奇怪的错误
  • 可以挖掘下，编译软件用的哪个版本的依赖
  • /Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniapp-cli/package.json
  • 有点遗憾，使用上面的版本，parse.vue 还是报错，还未找到原因
  • 突然发现是项目目录的原因，直接在 src 运行不报错，在根目录运行就出现上面的问题，所以 cli 如能改变编译目录，就 OK 了
• 不要将外部组件直接copy进来，如需要，考虑是否贴合我们的使用场景

关于样式

https://bemcss.com/

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

.cc-block__element--bottom

.cc-upload__container-box

BEM思想，是不考虑结构的，不使用子代选择器，不需要原子类（如ellipsis）

工具类复用

uni-app 专用 一系列小工具，细粒度拆分

• [ ] uni-axios
• [ ] uni-geo
• [x] uni-pull
  • pullUp 滚动加载
  • pullDown 下拉刷新
• [ ] uni-request
• [ ] uni-router uni路由
• [ ] uni-stat
• [x] uni-storage
• [x] uni-utils
  • checkUpdate 检查更新
  • errorReport 错误上报
• [x] vuex-persistedstate 持久化存储 vuex

shvl: shvl.set(obj, 'a.b.c', 2);

组件列表

组件名 cc-xxx

• 基础组件
  • [ ] badge 徽标
  • [ ] calendar 日历
  • [ ] quick-nav 快速导航 !!!
  • [ ] card 卡片
  • [ ] cell cell列表项 !!!
  • [ ] cell-group 分组 !!
  • [ ] collapse 折叠面板
  • [ ] combox 可选择输入框
  • [x] countdown 倒计时 !!
  • [ ] drawer 抽屉
  • [x] divider 分割线
  • [ ] editor 编辑器
  • [ ] fab 悬浮按钮
  • [ ] fav 收藏按钮
  • [ ] grid 宫格
  • [ ] header-bar 标题栏（支持适配 iPhoneX）
  • [ ] header 标题
  • [x] html 复杂富文本解析 !!!
  • [x] icon iconfont 图标 !!!
  • [ ] image 图片（支持大小设定） !!
  • [ ] indexed-bar 索引栏
  • [ ] indexed-list 索引列表
  • [x] input-number 数字输入框 !!!
  • [ ] link 超链接（支持复制）
  • [ ] list 列表
  • [x] load-more 加载更多 !!
  • [x] marquee 滚动容器
  • [ ] nav-bar 自定义导航栏
  • [x] notice-bar 通告栏 !
  • [x] page 页面容器
  • [ ] pager 分页器
  • [ ] page-result 结果页
  • [ ] picker 选择器 !!
  • [ ] picture 图片预览
  • [x] popup 弹出层 !!!
  • [ ] progress 进度条
  • [ ] pull-list 滚动加载列表 !!! 废弃此版本实现，改为新版
  • [x] rate 评分
  • [x] rich-text 简单富文本展示 !!
  • [ ] search-bar 搜索栏 !!!
  • [ ] share 分享按钮
  • [ ] slider 滑动选择器
  • [ ] stepper 步骤条 !!
  • [ ] sticky 滚动吸顶
  • [ ] swiper swiper图片滚动 !!!
  • [ ] swiper-dot 轮播图指示点 !
  • [ ] swipe-action 滑动操作
  • [ ] switch 开关 !!
  • [ ] textarea 文本区域(带字数控制)
  • [x] transition 过渡动画 !!
  • [ ] tab 简单Tab !!!
  • [x] scroll-tab 支持滚动的Tab !!!
  • [ ] tab-bar 标签栏
  • [ ] tag 标签 !
  • [ ] task 任务
  • [ ] upload 上传组件
  • [ ] waterfall 瀑布流

关于 vuex-persistedstate

支持 uni-app，两个问题

• 可选择的变更持久化
• 下次进入使用持久化数据初始化 vuex

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import app from './modules/app.js'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: false,
  modules: {
    app,
    user,
  },
  plugins: [
    // 可以有多个持久化实例
    createPersistedState({
      key: 'vuex_temp',  // 状态保存到本地的 key
      // 非Module格式: xxx
      // 使用了Module的格式: ModuleName.xxx
      paths: ['app.config', 'user.userInfo'],  // 要持久化的状态，在state里面取，如果有嵌套，可以 a.b.c
      storage: {  // 存储方式定义(必须同步方法？)
        getItem: (key) => uni.getStorageSync(key), // 获取
        setItem: (key, value) => uni.setStorageSync(key, value), // 存储
        removeItem: (key) => uni.removeStorageSync(key), // 删除
      },
    }),
  ],
})