De-ui 自己整理的一套微信小程序组件库

2019年9月20日 164次阅读 来源: pang

背景：今年开发或经手的小程序也有三个了，每个小程序之间都有一些相同的组件要写，虽然市面上有很多优秀的小程序组件库可以使用，但我更倾向于自己动手去开发这些组件。每次开发新的小程序总要翻出旧项目，将里面的组件拿出来，修修改改放在新项目里面继续使用。

目的：将自己写过的一些小程序组件集中起来，并新写一些常用组件，统一整理成这个小程序UI库，方便以后再开发小程序时使用。目前还比较简陋，日后会慢慢补充。

De-ui

一个微信小程序UI库

预览：

《De-ui 自己整理的一套微信小程序组件库》

项目地址：https://github.com/hbxywdk/De-ui 欢迎Star

使用：

1、拉取代码

git clone git@github.com:hbxywdk/De-ui.git

2、复制文件

复制assets、components、de-page文件夹以及app.wxss到项目根目录中

3、使用组件

// json文件中引入对应组件
{
  "usingComponents": {
    "de-button": "/components/de-button/de-button"
  }
}

// wxml文件中使用
<de-button type='success' bind:click="click">成功</de-button>

4、使用操作结果页

app.json中引入de-page

{
  "pages": [
    "de-page/de-msg-page/de-msg-page"
  ]
}

js跳转

wx.navigateTo({
    url: '/de-page/de-msg-page/de-msg-page?type=1&title=操作结果&firstTit=操作成功&secondTit=您的操作成功了&btnText=返回',
})

组件列表

  • 基础

    • [x] Button 按钮
    • [x] Icon 图标
    • [x] Flex 对齐方式

  • 布局

    • [x] Layout 栅格布局]
    • [x] Title 标题
    • [x] Label 标签
    • [x] List 列表
    • [x] FooterTabs 底部标签
    • [x] Line 分割线

  • 表单

    • [x] Input 输入框
    • [x] Switch 开关
    • [x] Radio 单选
    • [x] Checkbox 多选

  • 功能

    • [x] Search 搜索
    • [x] Progress 进度条
    • [x] IndexSelector 索引选择器
    • [x] SlideDel 滑动删除
    • [x] Range 滑块
    • [x] Filter 筛选器
    • [x] Scroller 滚动区域

  • 提示

    • [x] TopNotice 顶部公告栏
    • [x] Alert 弹窗

  • 其他

    • [x] Loading 加载
    • [x] MsgPage 页面提示
    • [x] Image 图片

未来要实现的组件

  • 布局

    • 宫格布局 Grid
    • SwiperBoxs 滑动盒

  • 功能

    • 步骤条 Steps
    • 吸顶容器 Sticky
    • 顶部弹出提示 TopTips
    • 环形进度条 Circle
    • 倒计时 CountDown
    • 滚动公告 RollingBulletin
    • 轮播图的封装 Swiper
    • 迭代Filter 筛选器

  • 提示

    • 弹出式 Loading
    • 弹出式密码输入框 Password
    • 提示 Toast
    原文作者：pang
    原文地址: https://segmentfault.com/a/1190000017181725
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞