收藏
评论

MinUI - 基于自定义组件的小程序 UI 组件库


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


Min 是一套面向小程序的开发环境,由蘑菇街前端开发团队提供和维护。目前,我们开源了它面向小程序自定义组件的部分(后续还会陆续开源其他能力),结合微信开发者工具,对组件的 开发使用Min 会让你感到优雅和高效。而 MinUI,就是基于 Min 平台产出的一套 UI 组件库,同时也是 “蘑菇街女装精选” 小程序 (小程序总榜前 3 位) 在应用的 UI 组件库。

授人以渔,基于 Min 提供的开发赋能,和 MinUI 组件库实践的参考,不同小程序的开发者,可以快速建立起符合其自身需求的组件化体系。

项目开源地址:https://github.com/meili/minui

MinUI

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

○ 缘起

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

<img width="404" src="https://s10.mogucdn.com/mlcdn/c45406/171101_5jji6el984agkfl47454i2h34ej88_808x425.png" style="display:block;margin:0 auto;" />

于是我们设计了 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.0(2017.10.24)

  • 初始版本
最后一次编辑于  2017-11-06
收藏

17 个评论

  • 缅怀,
    缅怀,
    2019-06-24

    第一次用  一直没有安装成功?  哪位朋友方便说一下吗?

    2019-06-24
    赞同
    回复
  • flywong
    flywong
    2018-07-26

    mac 一直没有安装成功,能否录个视频学习下。。。。

    2018-07-26
    赞同
    回复
  • 薛怼怼
    薛怼怼
    2018-07-13

    已经半年没有更新维护了

    2018-07-13
    赞同
    回复
  • 芯动空间智能科技-胡玮
    芯动空间智能科技-胡玮
    2018-06-10

    感谢,第一次用,觉得很赞!

    2018-06-10
    赞同
    回复
  • 🦆
    🦆
    2018-02-09

    啥时候兼容?

    2018-02-09
    赞同
    回复
  • 厚光
    厚光
    2017-11-10

    @堂主&明淳  好,晚上我试试

    2017-11-10
    赞同
    回复
  • 堂主
    堂主
    2017-11-10

    @厚光 windows 系统的页面路径问题已修复,请更新 Min Cli 到1.0.2版本

    2017-11-10
    赞同
    回复
  • 厚光
    厚光
    2017-11-10

    @堂主&明淳  期待中...

    2017-11-10
    赞同
    回复
  • 堂主
    堂主
    2017-11-10

    @厚光  今天应该会发布一版本更新

    2017-11-10
    赞同
    回复
  • 厚光
    厚光
    2017-11-08

    @堂主&明淳  window环境bug什么时候能修复啊,这两天我开始做新项目,如果修复的话我就尝试在项目中使用.

    2017-11-08
    赞同
    回复

正在加载...

登录 后发表内容