找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序CSS组件库

[复制链接]
查看: 268|回复: 121
最佳答案
0 

5

主题

5

帖子

120

积分

新人求带

积分
120
 楼主| 发表于 2018-12-6 10:45:48 | 显示全部楼层 |阅读模式
开始写moUI之前,笔者开发过一款微信小程序,结果被自己团队其他人吐槽太丑,于是下定决心要出一套样式库,为自己创业项目即将开发的n个小程序做准备。大一下学期期末最后一门大物考完后,闭关四天,边学CSS边写出了第一套组件库Base。

写moUI的时候,微信小程序正走在插件化的路上,所以笔者也 希望moUI不仅仅只是一套样式库 ,而是多人参与开发、反馈和改进的样式组件库平台,利用CSS的变量实现库的深度定制,各样式组件库的组件又能组合使用,使得采用这些组件库开发的小程序并不千篇一律。于是在紧接着暑假小学期,笔者边学ES2015边出了第二套Card。笔者在写前两套样式库时,学习Web开发只四五来个月,大一也并非计算机专业,野生程序猿嘛,写出来的代码多有不规范之处,还望诸位多多见谅。笔者没什么兴趣爱好,唯一算得上、也称得上热爱的,也便只有代码了,对于自己所热爱的,也一定会认真对待、坚持到底。

另外提一下「末坊开放平台」,是笔者目前的一个创业项目,旨在连接大学生及与之相关的人和团体。moUI同时也是平台上为大学生创新创业团队提供的一套开发库,以后也有计划推出其它开发库。moUI的npm可能要等笔者再学学。

Batch.gif
Collapse.gif
Dropdown_0.jpg
Dropdown_1.jpg
index.jpg
Input.gif
List.jpg
Loading.jpg
Modal.jpg
Panel_0.jpg
Panel_1.jpg
Preview.jpg
Progress.jpg
Searchbar.jpg
Switch.jpg
Toptips.jpg

用法:
  1. <import src='./path/to/card.wxml' />
  2. <template is='Modal' data='{{...Modal}}' />
  3. <template is='Toast' data='{{...Toast}}' />
复制代码
  1. import { Modal } from './path/to/card.js';
  2. Page({
  3.   ...
  4.   networkErr: function () {
  5.     Modal.showModal.bind(this)({
  6.       mask: true,
  7.       title: '无网络',
  8.       okText: '确认',
  9.       maskClosable: true,
  10.       onOk: 'handleNetworkErr',
  11.       onCancel: 'handleCancel',
  12.       content: '网络似乎出了点问题,请检查后重试',
  13.     });
  14.   },
  15.   ...
  16.   handleCancel: function (e) { Modal.hideModal.bind(this)({ e }) },
  17.   ...
  18.   serverErr: function () {
  19.     Modal.showToast.bind(this)({
  20.       duration: 2000,
  21.       icon: 'ICON_TYPE',
  22.       iconColor: '#1890ff',
  23.       title: '服务器竟然崩溃了,请稍后再试',
  24.     });
  25.   },
  26.   ...
  27. });
复制代码

moUI-master.zip (1.27 MB, 下载次数: 6)
回复

使用道具 举报

最佳答案
0 

12

主题

854

帖子

6041

积分

S1

积分
6041
发表于 7 天前 | 显示全部楼层
微信小程序正走在插件化的路上,所以笔者也 希望moUI不仅仅只是一套样式库 ,而是多人参与开发、反馈和改进的样式组件库平台,利用CSS的变量实现库的深度定制,各样式组件库的组件又能组合使用,使得采用这些组件库开发的小程序并不千篇一律。于是在紧接着暑假小学期,笔者边学ES2015边出了第二套
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
66666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
6666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
666666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
6666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
66666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

57

帖子

60

积分

等待验证会员

积分
60
QQ
发表于 7 天前 | 显示全部楼层
6666666666666666666666666
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com