# uni-ccui

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

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

TIP:

- 优先使用背景图，而非 `image` 标签 [参考-本地图片](https://ask.dcloud.net.cn/article/37276)
- 使用css样式，扩大可点击区域：

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

如何使用：

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

```json
// 自动按需引入
"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",
  }
}
```

模板中使用

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

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

TIP:

- 文件名或者文件夹名中不允许出现 @ 符号，static/cart/add@2x.png，请调整后重试
- 使用 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，也就是模块名 + 元素名 + 修饰器名

```css
.cc-block__element--bottom

.cc-upload__container-box
```

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

## 工具类复用

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

- [ ] uni-axios
- [ ] uni-geo
- [x] [uni-pull](https://www.npmjs.com/package/@deepjs/uni-pull)
  - pullUp    滚动加载
  - pullDown  下拉刷新
- [ ] uni-request
- [ ] uni-router uni路由
- [ ] uni-stat
- [x] [uni-storage](https://www.npmjs.com/package/@deepjs/uni-storage)
- [x] [uni-utils](https://www.npmjs.com/package/@deepjs/uni-utils)
  - checkUpdate 检查更新
  - errorReport 错误上报
- [x] [vuex-persistedstate](https://www.npmjs.com/package/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

```js
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), // 删除
      },
    }),
  ],
})
```