背景：今年開發(fā)或經(jīng)手的小程序也有三個了，每個小程序之間都有一些相同的組件要寫，雖然市面上有很多優(yōu)秀的小程序組件庫可以使用，但我更傾向于自己動手去開發(fā)這些組件。每次開發(fā)新的小程序總要翻出舊項目，將里面的組件拿出來，修修改改放在新項目里面繼續(xù)使用。

目的：將自己寫過的一些小程序組件集中起來，并新寫一些常用組件，統(tǒng)一整理成這個小程序UI庫，方便以后再開發(fā)小程序時使用。目前還比較簡陋，日后會慢慢補充。

De-ui

一個微信小程序UI庫

預覽：

wx_code.jpg

項目地址：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、使用操作結(jié)果頁

app.json中引入de-page

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

js跳轉(zhuǎn)

wx.navigateTo({
    url: '/de-page/de-msg-page/de-msg-page?type=1&title=操作結(jié)果&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 開關(guān)
  • [x] Radio 單選
  • [x] Checkbox 多選

• 功能

  • [x] Search 搜索
  • [x] Progress 進度條
  • [x] IndexSelector 索引選擇器
  • [x] SlideDel 滑動刪除
  • [x] Range 滑塊
  • [x] Filter 篩選器
  • [x] Scroller 滾動區(qū)域

• 提示

  • [x] TopNotice 頂部公告欄
  • [x] Alert 彈窗

• 其他

  • [x] Loading 加載
  • [x] MsgPage 頁面提示
  • [x] Image 圖片

未來要實現(xiàn)的組件

• 布局
  • 宮格布局 Grid
  • SwiperBoxs 滑動盒
• 功能
  • 步驟條 Steps
  • 吸頂容器 Sticky
  • 頂部彈出提示 TopTips
  • 環(huán)形進度條 Circle
  • 倒計時 CountDown
  • 滾動公告 RollingBulletin
  • 輪播圖的封裝 Swiper
  • 迭代Filter 篩選器
• 提示
  • 彈出式 Loading
  • 彈出式密碼輸入框 Password
  • 提示 Toast