zhangchen91 / minui

基于规范的小程序 UI 组件库,自定义标签组件,简洁、易用、工具化

Home Page:https://meili.github.io/min

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MinUI

基于规范的小程序 UI 组件库,简洁、易用、工具化。

○ 缘起

一切的初衷,都始于我们希望像下面这样,在小程序中优雅的定义和使用组件。

于是我们设计了 Min

Min 是一套面向小程序的开发环境,提供 Min Cli。目前,我们开源了它面向小程序自定义组件的部分(后续还会陆续开源其他能力),结合微信开发者工具,对组件的 开发使用,Min 会让你感到优雅和高效。

而 MinUI,就是基于 Min 平台产出的一套 UI 组件库,同时也是蘑菇街小程序在应用的 UI 组件库。

○ 体验

在线体验

通过下面的小程序二维码,可以在手机中体验 MinUI(微信基础库版本 1.6.3 以上支持):

本地体验

  1. 安装 Min 的环境 $ npm install -g @mindev/min-cli
  2. Clone MinUI 仓库到本地;
  3. 安装依赖 $ npm install
  4. 在 MinUI 根目录下执行 $ min dev,生成 dist/ 目录;
  5. 微信开发者工具 —— 新建一个小程序,目录指向生成的 dist/;
  6. Done~

PS:如想尝试修改源码,终端里先执行 $ min dev。这样任何的修改,都会在微信开发者工具中自动刷新显示。

开发&应用

如要基于 MinUI 进行二次开发,完善属于您项目的组件化体系,请移步至 Min 的使用文档 —— “组件开发” 环节。

如要在既有小程序项目中,使用 Min 提供的组件安装和更新能力,请移步至 Min 的使用文档 —— “组件应用” 环节。

○ 组件列表

- 布局元素
    - flex
    - card(coming...)
    - list(coming...)
- 基础元件
    - badge
    - elip
    - icon
    - label
    - loadmore
    - price
    - progress
- 功能组件
    - abnor
    - countdown
    - couner
    - loading
    - mask
    - steps
    - tab
- 提示反馈
    - dialog
    - popup
    - toast
- 表单增强(coming...)

○ 项目结构

- MinUI/
    - dist // 打包目录,在微信开发者工具中添加这个目录来运行项目
    - packages // 组件目录
        - loading
            - src
                - index.wxc // 组件单文件
            - .npmignore
            - package.json
            - README.md
            - LICENSE
        - ...
    - src // 页面源码
        - common
        - pages // 组件 demo 页面
            - loading
                - demos // demo 汇总,在 index.wxp 中引入和显示
                - config.json
                - index.wxp
            - ...
    - .editorconfig
    - .gitignore
    - LICENSE
    - min.config.json
    - package.json
    - README.md

更多项目结构介绍,可参考工具化 Min Cli 提供的工程说明

○ 开源协议

本项目基于 MIT License,请自由的享受、参与开源。

○ 更新记录

v1.0.2(2017.11.16)

  • 新增 wxc-avatar 头像组件

v1.0.1(2017.11.15)

  • 新增 wxc-cc 水平垂直居中组件

v1.0.0(2017.10.24)

  • 初始版本

About

基于规范的小程序 UI 组件库,自定义标签组件,简洁、易用、工具化

https://meili.github.io/min

License:MIT License


Languages

Language:JavaScript 100.0%