重要消息,Hey UI V1.0 发布啦!

2,238 阅读4分钟

大家好,我是独立开发者陈东东。在如今这个移动互联网时代,技术创新将带来商业模式的完全颠覆,伴随着小程序的诞生,移动互联网行业也迎来了新一波的浪潮。 无数大小公司纷纷开始开发自己的小程序产品,前端的技术栈要求里也新增了 微信小程序 这项技能。

1.功能简介 🍵

Hey UI 是基于微信小程序原生语法,实现的CSS UI框架,面向全层次的小程序开发者,低门槛开箱即用的前端 UI 解决方案

  • 简单易用:采用微信小程序的原生语法编写,只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发。

  • 扩展性强:支持 按需引入 和 自定义的主题色 ,生成多种风格,满足个性化产品需求;同时还具有很强的 扩展性 ,轻松实现组件的二次开发。

  • 文档详细:为了能让更多开发者接触之初,就能够熟练的用Hey-UI开发自己的小程序应用,我们对每个属性 、用法 、和 案例都做了详尽的描述。

1.1 源码与体验

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.效果展示 🍵

微信小程序展示

宣传图.png

主1.png

主2.png

主3.png

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列表),同时也期待你的参与和共建。