easyUI

easyUI

一款簡單易用的微信小程序組庫，封裝開發中常用的組件，提高開發效率，以及代碼的可維護性。 超越一行代碼的極限，體驗開箱即用開發方式。默認配置即可滿足大部分需求，特殊情況可自定義相關屬性來滿足需求。

組件庫中的任何一個組件都可以單獨使用，不依賴任何組件，可以根據業務需求添加真正使用到的組件，讓您的小程序一小再小。

根據官方組件設計api以及api文檔，及其容易上手，對新手十分友好。

---

基礎庫版本

請使用1.9.90以上的基礎庫。

使用方法

打開項目，選擇需要的組件（組件位於component目錄下），將包含組件4個文件的文件夾複製到您的項目中。
然後在您項目的代碼中引用即可，詳細引用說明請查看小程序官方文檔。

掃碼查看api文檔

運行項目

1. 進入項目根目錄。
2. 進入node官網下載node並安裝（如果已經安裝請省略這步）。
3. 在項目根目錄打開命令行（cmd/終端）運行npm install 。看到命令行內沒有錯誤提示，並且項目根目錄多出一個node_modules目錄。
4. 用微信開發者工具打開項目（如果已經打開請省略這步）。
5. 點擊微信開發者工具左上角，工具->構建npm。提示構建完成後會看到項目根目錄多出一個miniprogram_npm目錄。
6. 點擊微信開發者工具“編譯”按鈕，可以看到項目運行起來了:blush:。

組件目錄

組件名	路徑	說明
icon_button	component/button/icon_button	帶圖標的按鈕
base_list	component/list/base_list	帶有標題和副標題的列表項
title_view	component/structure/title_view	帶有標題的view
base_button	component/button/base_button	按鈕
head_portrait	component/base/head_portrait	頭像
search	component/form/search	帶有標題和副標題的列表項
enhance_text	component/base/enhance_text	增強text
enhance_view	component/base/enhance_view	增強view
icon_list	component/list/icon_list	圖標列表，可滿足大部分列表需求
enhance_icon	component/base/enhance_icon	增強icon，可用於展示圖標或圖片
goods_card	component/senior/goods_card	商品展示卡
goods_detail	component/senior/goods_detail	商品詳情展示
suspension_button	component/button/suspension_button	浮動按鈕
count_button	component/form/count_button	計數按鈕
modal	component/senior/modal	模態框
goods_list	component/list/goods_list	商品列表
sidebar	component/senior/sidebar	側邊欄菜單
enhance_image	component/base/enhance_image	增強image，可用於需要背景圖片的場景
head_view	component/structure/head_view	帶有頭部標題欄的view
base_card	component/list/base_card	基礎卡片組件
tabs	component/senior/tabs	標籤欄
load_more	component/base/load_more	加載更多組件
loading	component/base/loading	加載動畫組件
popup	component/senior/popup	彈出框組件
checker	component/form/checker	選項組件，常用於商品規格選擇
progress_bar	component/base/progress_bar	進度條組件
icon	component/base/icon	圖標組件
transition	component/base/transition	過度效果組件

版本說明

v1.3.0 last

• 新增組件

1. progress_bar
2. icon
3. transition

• 修復&優化

1. 優化小程序

v1.2.1

• 新增組件
• 修復&優化

1. 優化小程序，並新增發現頁面
2. 優化suspension_button組件，新增openType屬性兼容原生button組件特殊使用場景
3. 優化suspension_button組件，新增img-cus自定義類，可用於使用阿里圖標庫的場景
4. 優化icon_button組件，增加對小程序原生button組件的form-type以及open-type屬性的支持
5. goods_detail組件底部添加自定義插槽bottom
6. 修復loading組件設置width和height屬性不起作用的bug
7. 修復tabs組件selected屬性使用數據綁定時界面顯示異常的bug
8. 修復icon_button組件的樣式問題
9. 修復基礎庫版本升級引起的tabs組件bug
10. 修復suspension_button組件移動時觸發點擊事件的bug
11. 修復enhance_image組件cus自定義類的bug

v1.2.0

• 新增組件
• 修復&優化

1. goods_detail組件支持視頻展示
2. search組件bug修復

v1.1.0

• 新增組件

1. tabs
2. load_more
3. loading
4. popup
5. checker

• 修復&優化

1. modal組件關閉按鈕支持阿里圖標庫
2. icon_button新增dataCus屬性
3. 修復sidebar組件使用setData更新數據時候不顯示的bug
4. sidebar新增dataCus屬性以及selected屬性
5. search新增onclean事件函數
6. goods_card新增dataCus屬性
7. goods_list新增dataCus屬性
8. tabs組件優化
9. suspension_button組件點擊事件不觸發bug修復
10. suspension_button組件不使用圖標時的文本佈局問題修復
11. goods_detail組件新增點擊banner圖可預覽圖片，以及樣式優化
12. base_list組件自定義樣式類bug修復
13. icon_button組件新增徽章效果，可通過badge屬性設置，並且支持使用阿里圖標庫使用cus-icon自定義類設置

v1.0.7

• 新增組件

1. goods_list
2. sidebar
3. enhance_image
4. head_view
5. base_card

• 修復&優化

1. search組件新增默認搜索圖標。
2. search組件刪除清除圖標。
3. enhance_text支持使用阿里圖標庫引入圖標（增加icon-cus自定義樣式類）。
4. enhance_icon支持使用阿里圖標庫引入圖標。
5. enhance_icon新增color屬性。

關於

• 作者：code_xia
• 個人郵箱：[email protected]
• 單位：搜空集團

寫在最後

使用組件前請詳細查看組件提供的接口。
查看方法：打開小程序選擇頁面，點擊對應組件下方的“詳細說明”按鈕。

給作者買杯咖啡