❤
npm
Sign UpSign In

mitoo-weapp

0.1.1 • Public • Published

项目logo

小程序 UI 组件库

介绍

[Mitoo-weapp]是一款基于小程序的ui组件库，旨在解决ios和android上展示的差异化，提升开发者的开发效率，把更多的精力放到业务上。

qrCode

开始使用

在开始使用Mitoo-weapp 之前，你需要先阅读 微信小程序自定义组件的相关文档

下载项目到工程

npm install --save mitoo-weapp

预览

  • 在 Mitoo-weapp 根目录下运行
# 下载工程到本地
git clone https://github.com/Mitoo-FE/Mitoo-weapp.git
  • 打开微信web开发者工具，'本地小程序项目 - 添加项目'，把 mitoo-weapp/demo 目录添加进去就可以预览示例demo了。

具体组件

ActtionSheet

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-action-sheet": "/components/ActionSheet/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-action-sheet visible="{{ visible }}" mask-closable="{{ false }}"></mit-action-sheet>

API

参数 说明 类型 默认值 必须
title 标题 String false
visible 用来显示action sheet Boolean false false
mask-closable 点击遮罩层是否可以关闭组件 Boolean false false
options 按钮标题列表 Object ture
cancelButtonText 取消按钮的文案 String 取消 false
tapItem 点击按钮的时间 Function false

Alert

提示框组件

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-alert": "/components/Alert/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-alert>
    ...
</mit-alert>

API

参数 说明 类型 默认值 必须 可选参数
text 内容 String
warning 警告样式提示框 Boolean false false true, false
error 错误样式提示框 Boolean false false true, false
success 成功样式提示框 Boolean false false true, false
closeable 可关闭提示框 Boolean false false true, false

Avatar

头像组件

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-avatar": "/components/Avatar/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-avtar>
    ...
</mit-avatar>
参数 说明 类型 默认值 必须 可选参数
src 头像图片地址 String false
size 头像大小 String 'default' true 'large', 'small', 'default', number
noCircle 是否圆头像 Boolean false false
border 是否有边框 Boolean false false

Badge

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-badge": "/components/Badge/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-badge>
    ...
</mit-badge>

API

参数 说明 类型 默认值 必须 可选参数
number 徽章上的数字 Number
flag 是否加到其他组件上面 Boolean false false true, false
color 自定义徽章颜色 String

Button

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-button": "/components/Button/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-button>
    ...
</mit-button>

API

参数 说明 类型 默认值 必须 可选参数 生效时机
size 大小 String default false 'small', 'large', 'default'
circle 是否圆按钮 Boolean default false true, false
text 按钮文字 String false
type 按钮类型 String false 'primary' 'primary', 'info', 'default', 'error', 'brand', 'brand-yellow', 'brand-red', 'brand-green', 'brand-blue', 'brand-dark-blue'
disabled 是否禁用 Boolean false false true, false
full 是否通栏 Boolean false false true, false
bottom 是否为底部通栏按钮 Boolean false false true, false
openType 微信开放能力 String
sessionFrom 会话来源 String openType="contact"
sendMessageTitle 会话内消息卡片标题 String openType="contact"
sendMessagePath 会话内消息卡片点击跳转小程序路径 String openType="contact"
sendMessageImg 会话内消息卡片图片 String openType="contact"
showMessageCard 显示会话内消息卡片 String openType="contact"
appParameter 打开 APP 时，向 APP 传递的参数 String openType="launchApp"
bindcontact 客服消息回调 Function openType="contact"
bindgetphonenumber 获取用户手机号回调 Function openType="getPhoneNumber"
binderror 当使用开放能力时，发生错误的回调 Function openType="launchApp"
bindopensetting 在打开授权设置页后回调 Function openType="openSetting"

Card

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-card": "/components/Card/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-card>
    ...
</mit-card>

API

参数 说明 类型 默认值 必须
full 是否通栏 Boolean false false

Cell

与Cell-Group配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-cell": "/components/Cell/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-cell>
    ...
</mit-cell>
参数 说明 类型 默认值 必须 可选参数
title 标题 String false
label 辅助文字 String false true
isLink 是否是链接 Boolean false false
url 链接 String false false

注意，在title为空是可以选择使用slot的方式进行渲染，可以在中间添加自己的代码

Cell-Group

与Cell配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-cell-group": "/components/Cell-Group/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-cell-group>
    ...
</mit-cell-group>

Checkbox

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-checkbox": "/components/Checkbox/index",
        "mit-checkbox-group": "/components/Checkbox-Group/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-checkbox-group bind:change="onCheckboxChange">
    <mit-checkbox title="西瓜" value="watermelon"></mit-checkbox>
    <mit-checkbox title="香蕉" value="banana"></mit-checkbox>
    <mit-checkbox title="苹果" value="apple"></mit-checkbox>
    <mit-checkbox title="梨" value="pear"></mit-checkbox>
</mit-checkbox-group>

API

Checkbox

参数 说明 类型 默认值 必须
title 标题 String true
value checkbox的value值，当value为空时，取title值 String false
checked 默认选中 Boolean false
disabled 不取选 Boolean false

Checkbox-Group

参数 说明 类型 默认值 必须
change 点击的时候触发的时间 Function false

Checkbox

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-checkbox": "/components/Checkbox/index",
        "mit-checkbox-group": "/components/Checkbox-Group/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-checkbox-group bind:change="onCheckboxChange">
    <mit-checkbox title="西瓜" value="watermelon"></mit-checkbox>
    <mit-checkbox title="香蕉" value="banana"></mit-checkbox>
    <mit-checkbox title="苹果" value="apple"></mit-checkbox>
    <mit-checkbox title="梨" value="pear"></mit-checkbox>
</mit-checkbox-group>

API

Checkbox

参数 说明 类型 默认值 必须
title 标题 String true
value checkbox的value值，当value为空时，取title值 String false
checked 默认选中 Boolean false
disabled 不取选 Boolean false

Checkbox-Group

参数 说明 类型 默认值 必须
change 点击的时候触发的时间 Function false

Drawer

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-drawer": "/components/Drawer/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-drawer>
    ...
</mit-drawer>

API

参数 说明 类型 默认值 必须 可选参数
position 出现的位置 String true 'left','right'
visible 可见性 Boolean false true true, false

Grid

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-grid": "/components/Grid/index",
        "mit-grid-item": "/components/Grid-Item/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-grid columnNum="3">
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
</mit-grid>

API

Grid

参数 说明 类型 默认值 必须
columnNum 标题 String true

Grid-Item

参数 说明 类型 默认值 必须
icon icon slot false
title title slot false

Grid

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-grid": "/components/Grid/index",
        "mit-grid-item": "/components/Grid-Item/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-grid columnNum="3">
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
    <mit-grid-item>
        <view slot="icon"><mit-icon type="category" size="40" /></view>
        <view slot="title">我是一个分类</view>
    </mit-grid-item>
</mit-grid>

API

Grid

参数 说明 类型 默认值 必须
columnNum 标题 String true

Grid-Item

参数 说明 类型 默认值 必须
icon icon slot false
title title slot false

Icon

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-icon": "/components/Icon/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-icon type="category" size="30" color="red" mit-class="fontClass"></mit-icon>

API

Grid

参数 说明 类型 默认值 必须
type 名字 String true
size 字体大小，单位rpx Number false
color 字体颜色 String false
mit-class 字体样式类 String false
注：如果给了size和color属性，mit-class不会覆盖size和color样式。

Input

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-input": "/components/Input/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-input>
    ...
</mit-input>

API

参数 说明 类型 默认值 必须 可选参数
placeholder 输入框内描述文字 String true
label 左边文字 String false
number 是否使用数字键盘输入 Boolean false false
disabled 禁用 Boolean false false
value 默认文字 String false
radius 是否圆角 Boolean false false
borderColor 自选边框颜色 Boolean false false
lengthLimit 长度限制 Number false false
confirmType 键盘右下角完成文字 String "done"
focus 自动获取焦点 Boolean false false
type 文本框类型 String false false 'text', 'password', 'idcard', 'digit'
placeholderClass placeholder类 String false false
placeholderStyle placeholder样式 String false false

事件

事件名称 说明
change 绑定变化时触发
focus 获取焦点时触发
blur 失焦时触发

Modal

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-modal": "/components/Modal/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-modal>
    ...
</mit-modal>

API

参数 说明 类型 默认值 必须 可选参数
visible 是否可见 Boolean true true,false
title 标题 String false
vertical 纵向按钮 Boolean false false
footer 底部按钮 Array false false
footer数组参数
color 底部按钮颜色 String false false
text 底部按钮文字 String false false
event 按钮上具体事件 Function false false
closeable 该按钮可否关闭对话框 Boolean false false

NoticeBar

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-notice-bar": "/components/NoticeBar/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-notice-bar>
    ...
</mit-notice-bar>

API

参数 说明 类型 默认值 必须 可选参数
text 通知文字 String false
closeable 是否可关闭 Boolean false false
transform 是否可开启跑马灯 Boolean false false

Panel

与其他组件配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-panel": "/components/Panel/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-panel>
    ...
</mit-panel>

API

参数 说明 类型 默认值 必须 可选参数
title 标题 Boolean false true
withoutBorder 不带边框 Boolean false false true, false

Panel

与其他组件配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-panel": "/components/Panel/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-panel>
    ...
</mit-panel>

API

参数 说明 类型 默认值 必须 可选参数
title 标题 Boolean false true
withoutBorder 不带边框 Boolean false false true, false

Radio

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-radio": "/components/Radio/index",
        "mit-radio-group": "/components/Radio-Group/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-radio-group bind:change="onradioChange">
    <mit-radio title="西瓜" value="watermelon"></mit-radio>
    <mit-radio title="香蕉" value="banana"></mit-radio>
    <mit-radio title="苹果" value="apple"></mit-radio>
    <mit-radio title="梨" value="pear"></mit-radio>
</mit-radio-group>

API

radio

参数 说明 类型 默认值 必须
title 标题 String true
value radio的value值，当value为空时，取title值 String false
checked 默认选中 Boolean false
disabled 不取选 Boolean false

radio-Group

参数 说明 类型 默认值 必须
change 点击的时候触发的时间 Function false

Radio

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-radio": "/components/Radio/index",
        "mit-radio-group": "/components/Radio-Group/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-radio-group bind:change="onradioChange">
    <mit-radio title="西瓜" value="watermelon"></mit-radio>
    <mit-radio title="香蕉" value="banana"></mit-radio>
    <mit-radio title="苹果" value="apple"></mit-radio>
    <mit-radio title="梨" value="pear"></mit-radio>
</mit-radio-group>

API

radio

参数 说明 类型 默认值 必须
title 标题 String true
value radio的value值，当value为空时，取title值 String false
checked 默认选中 Boolean false
disabled 不取选 Boolean false

radio-Group

参数 说明 类型 默认值 必须
change 点击的时候触发的时间 Function false

Row, Col

使用指南

我们采用了24格栅格系统，将一个设计区域分割成24份，使用时需要row和col一起使用，具体示例如下。

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-row": "/components/Row/index",
        "mit-col": "/components/Col/index"
    }
}
 

Step 2

在wxml文件里添加组件代码

<mit-row mit-class="row">
    <mit-col mit-class="col" span="24">
        <view class="grid-content">span 24</view>
    </mit-col>
</mit-row>

API

row

参数 说明 类型 默认值 必须
gutter 栅格间隔,单位rpx false
mit-class 额外样式 String false

col

参数 说明 类型 默认值 必须
span 栅格占位格数, Number true
offset 栅格左侧的间隔格数 Number false

Switch

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-switch": "/components/Switch/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-switch name="sw1"/>

API

参数 说明 类型 默认值 必须 可选参数
name name String true
large 大小 Boolean false
color 自定义颜色 String false false
disabled 禁用 Boolean false false
事件名称 说明
change 绑定变化时触发

Tabs

与Tabs-Cell配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-tabs": "/components/Tabs/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-tabs>
    ...
</mit-tabs>

API

参数 说明 类型 默认值 必须 可选参数
brandColor 自定义品牌色 String false
scroll 是否可滑动 Boolean false false

Tabs-Cell

与Tabs配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-tabs-cell": "/components/Tabs-Cell/index"
    }
}

Step 2

在wxml文件里添加组件代码

<mit-tabs-cell>
    ...
</mit-tabs-cell>

API

参数 说明 类型 默认值 必须 可选参数
active 是否选中 Boolean false false

Panel

与其他组件配合使用

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-panel": "/components/Panel/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-panel>
    ...
</mit-panel>

API

参数 说明 类型 默认值 必须 可选参数
title 标题 Boolean false true
withoutBorder 不带边框 Boolean false false true, false

Toast

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-toast": "/components/Toast/index",
    }
}

Step 2

在wxml文件里添加组件代码

<mit-button size="large" type="default" bindtap="showBase">基础样式</mit-button>
<mit-button size="large" type="default" bindtap="showSuccess">成功！</mit-button>
<mit-button size="large" type="default" bindtap="showFail">失败！</mit-button>
<mit-button size="large" type="default" bindtap="showNetwork">网络连接失败！</mit-button>
<mit-button size="large" type="default" bindtap="showLoading">加载中</mit-button>
<mit-toast id="toast"></mit-toast>

Step 3

在js文件中使用

const { Toast } = require('../../components/Mixins/Toast');
 
# 详细代码使用请查看demo
Page({
    showBase() {
        Toast({
            content: '普通的tosat提示！'
        })
    }
})

API

Toast

参数 说明 类型 默认值 必须
content toast显示内容 String true
type toast类型 可选值为 success / fail / network / loading String false

toptips

使用指南

Step 1

在页面对应的json文件中引入组件

{
    "usingComponents": {
        "mit-toptips": "/components/Toptips/index"
    }
}
 

Step 2

在wxml文件里添加组件代码

<mit-button size="large" type="default" bindtap="showToptips">通用样式</mit-button>
<mit-button size="large" type="default" bindtap="showSuccess">success</mit-button>
<mit-button size="large" type="default" bindtap="showWarn">warn</mit-button>
<mit-button size="large" type="default" bindtap="showError">error</mit-button>
<mit-button size="large" type="default" bindtap="showTimes">自定义事件时间</mit-button>
<mit-toptips id="toptips"></mit-toptips>

Step 3

在js文件中使用

const { Toptips } = require('../../components/Mixins/Toptips');
 
# 详细代码使用请查看demo
Page({
    showBase() {
        Toptips({
            content: '这是一个通用样式'
        })
    }
})

API

toptips

参数 说明 类型 默认值 必须
content toptips显示内容 String true
type toptips类型 可选值为 success / warn / error String false
duration 延迟时间，单位秒 Number 1.5（秒） false

Readme

Keywords

Package Sidebar

Install

npm i mitoo-weapp

Weekly Downloads

3

Version

0.1.1

License

MIT

Unpacked Size

136 kB

Total Files

174

Last publish

Collaborators

  • angel8731
  • wang_125309
Try on RunKit
Report malware