大家好,我是独立开发者陈东东。在如今这个移动互联网时代,技术创新将带来商业模式的完全颠覆,伴随着小程序的诞生,移动互联网行业也迎来了新一波的浪潮。 无数大小公司纷纷开始开发自己的小程序产品,前端的技术栈要求里也新增了 微信小程序 这项技能。
1.功能简介 🍵
Hey UI 是基于微信小程序原生语法,实现的CSS UI框架,面向全层次的小程序开发者,低门槛开箱即用的前端 UI 解决方案
-
简单易用:采用微信小程序的原生语法编写,只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发。
-
扩展性强:支持 按需引入 和 自定义的主题色 ,生成多种风格,满足个性化产品需求;同时还具有很强的 扩展性 ,轻松实现组件的二次开发。
-
文档详细:为了能让更多开发者接触之初,就能够熟练的用Hey-UI开发自己的小程序应用,我们对每个属性 、用法 、和 案例都做了详尽的描述。
1.1 源码与体验
- Github仓库:github.com/geekxzClub/…
- Gitee仓库:gitee.com/geek-club/h…
- 使用文档地址:heyui.geekxz.com
1.2 主要功能
Hey UI 是基于 微信小程序原生语法 实现的CSS组件库。遵循简洁,易用的设计规范。
在软件开发的过程中,部分功能或视图的实现是一个重复性的工作,微信小程序从诞生到现在,不过两年时间(2017/1/09 ~ 2019/2/12),生态圈对比 Vue, React 来说实在过于单调, 而且很少有在设计和实用性上都很突出的产品,能够在实际开发中帮助到开发者的产品更是屈指可数。
所以,我们在深思熟虑后,决定要动手设计并开发一个与小程序相匹配的组件库。
目前的功能:
-
基础组件(颜色Color、文本Text、图标Icon、阴影Shadow、边角Corner、按钮Button、主题Theme)
-
布局组件(弹性布局Flex、栅格布局Grid、浮动布局Float、列表List、折叠面板Collapse、瀑布流WaterFlow、索引列表IndexList)
-
视图组件()
-
表单组件(单行输入Input、多行输入Textarea、单选Radio、多选框Checkbox、开关Switch、选择框Picker、图片选择器ImagePicker、评分Rate)
-
动画组件(动画Animation)
-
导航组件(顶部导航BavBar、底部导航Tabbar、选项卡Tabs、分类导航Category、底部导航Footer)
-
操作反馈(提示Toast、消息Message、模态框Dialog、弹出层Popup、底部弹出操作ActionSheet)
-
其他(树tree、滑动验证码Slide verify、自定义日历Calendar、滑块Slider)
2.效果展示 🍵
微信小程序展示
3.如何使用
直接通过git下载 heyui 源代码,然后直接小程序开发者工具导入项目即可.
git clone https://github.com/geekxzClub/heyui-wechat.git
3.1. 初始化你的项目
使用微信开发正工具新建项目.
3.2. 安装Hey UI
下载源码解压获得/template
,复制目录下的 /heyui
,/component
,/libs
,/static
文件夹到你的项目根目录.
App.wxss
引入关键Css main.wxss
,icon.wxss
.
/**app.wxss**/
@import "heyui/heyui.main.wxss";
@import "heyui/icon.wxss";
/* 引入主题色 */
@import "heyui/theme.wxss";
@import "app.css"; /* 你的项目css */
....
3.3 引入
3.3.1 引入核心的函数库
在js
中引入 h-string.js
,h-array.js
,h-is.js
import { HString } from '/libs/h-string.js';
import { HArray } from '/libs/h-array.js';
import { HIs } from '/libs/h-is.js';
var Hstring = new HString(); //实例化
....
3.3.2 使用函数库
Hstring.toString()
....
至此,Hey UI 已成功引入至你的项目中了!
4.其他
4.1 贡献代码
我们的代码基于 develop 分支开发,欢迎提交 Pull Request 进行代码贡献。在提交 Pull Request 之前,请详细阅读我们的开发规范,否则可能因为 Commit 信息不规范等原因被关闭 Pull Request。
4.2 讨论与交流
微信群:加入微信群请先添加开发者微信:geekxz,备注HeyUI。QQ群:689112212 或扫描二维码。
5.结语
在未来我们将持续演进,与微信小程序一样,Hey UI 目前还处于不断完善的过程中,我们会关注微信官方的每一次更新,以及收集更多用户的反馈,致力于打造一个更好的小程序UI库!。期待你收到你的意见与建议(issue列表),同时也期待你的参与和共建。