重要消息，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列表），同时也期待你的参与和共建。

avatar
文章
阅读
粉丝