开始使用

欢迎使用HooperUI,这里将介绍框架的安装方法和常见事项

简介

关于HooperUI

HooperUI是一个轻量级的移动端UI框架,提供针对当代移动端浏览器的相关CSS组件、JS组件、工具类 和JS组件,我们把所有CSS组件和JS组件进行了模块化划分,您可以通过grunt的相关配置按需引用。

应用场景

您可以把HooperUI应用到您的移动端web页面中,HooperUI可以为您提供丰富的工具以便您进行快速 迭代开发:

  • 完善的UI框架支持
  • 一键式原生web组件自定义渲染
  • 便捷的开发辅助handler JS组件
  • 更适合中文的排版库
  • 适用于移动端的丰富开发组件

下载和安装

下载

你可以在HooperUI官网:http://opensource.hooperui.com/下载和查看相关文档,您也可以到 我们的github上进行相关内容的查看和下载。
HooperUI官网 我们的github

定制模块

当您下载完毕HooperUI的相关源码之后,您会看到如下目录结构:

                    hooperui-dev/
                        ├── document
                        │   └── ...
                        ├── scripts
                        │   ├── zepto.dev.js
                        │   ├── template.js
                        │   └── ...
                        └── styles
                        │   ├── base.css
                        │   ├── normalize.css
                        │   ├── ...
                        │   └── font
                        │        ├── iconfont.ttf
                        │        └── demo.html
                        ├── Gruntfile.js
                        ├── package.json
                        ├── webpack.config.js
                        └── .gitignore
                

我们把所有可以用到的组件进行了分块和划分。 在您下载完毕后,您还不能使用HooperUI,因为所有的组件和模块尚待编译。 在编译之前,您可以对模块进行调整,按需编译。

打开根目录的Gruntfile.js,您可以看到如下代码:

                    uglify: {
                        options: {
                            banner: '<%= banner %>\n'
                            ,sourceMap: true
                            ,sourceMapName: 'dest/hooperui.min.js.map'
                            ,compress: {
                                drop_console: true
                            }
                        },
                        build: {
                            src: [
                                'scripts/zepto.dev.js',
                                'scripts/popalert.js'
                            ],
                            dest: 'dest/hooperui.min.js'
                        }
                    }
                

其中,build中的src目录列表就是即将编译生成的文件列表,您可以按需添加和删除相关的模块。
编译时,会自动将上述列表的文件压缩至'dest/hooperui.min.js' 文件,使用时,直接引用此文件即可。

下表展现了HooperUI的所有JS模块列表和说明,您也可以点击页面导航的JS组件来了解更多:

文件名称组件名称组件功能事项
zepto.dev.js Zepto.js Zepto和HooperUI的基础类库 该组件不可以删除
popalert.js 弹出层组件 该组件重新定义了alert方法,让您的弹出层更完美 需要依赖popalert.css

同样的,您也会看到另一段代码:

                    autoprefixer: {
                        options: {
                            browsers: ['last 2 versions'],
                        },
                        main: {
                            expand: true,
                            flatten: true,
                            src: [
                                'styles/normalize.css'
                                ,'styles/base.css'
                            ],
                            dest: 'dest/autopre/'
                        }
                    }
                

这段代码是CSS的相关合集代码,编译时,我们会把 src数组中的所有文件压缩至 'dest/hooperui.min.css'文件中,请参照js模块对照表,对您的CSS进行按需定制。

安装环境和编译

1、克隆本项目到本地:git clone < 项目地址 >(或直接下载压缩包至本地);
2、进入项目源码目录;
3、执行 npm install安装项目依赖;
4、进入Gruntfile.js添加或删除依赖模块;
5、执行grunt local编译css和js至/dest目录;
6、请引用/dest目录中的最终文件;

当然,您也能在MIT的协议下对本项目进行二次开发,我们为您提供了几种watch命令, 方便您的开发和调试。

  • 在修改或开发完毕后,可以执行`grunt local`编译相关文件;
  • 执行grunt watch可以实时监测所有文件变化,并编译成为最终目标文件;
  • 执行grunt watch-css可以实时监测所有css文件的变化,并编译为最终目标文件;
  • 执行grunt watch-js可以实时监测所有js文件的变化,并编译为最终目标文件;

开始使用

当您的文件编译成功后,即可使用了。下面是一个基础的使用案例:

                    
                    
                    开始
                    
                    
                    
                

当然,我们建议您把script代码放到页面底部。

版本特性

浏览器和设备支持情况

我们基于zepto.js进行设计和开发,所以我们的最低浏览器支持情况和zepto.js相似。 您可以先行参见zepto.js的浏览器支持情况,若并不能满足您的需求,请考虑是否要弃用HooperUI: Browser support - zepto.js

HooperUI仅适用于移动端,所以我们不考虑低版本浏览器。同时,我们使用了autoprefixer.js来 为我们的CSS样式自动添加前缀,默认支持最新两个版本的浏览器(browsers: ['last 2 versions'])。 您可以在Gruntfile.js中自行修改,修改方式参见: autoPrefixer versions queries

新版本特性

您所见的版本是第一个测试版,尚无新特性,请直接阅读相关模块API即可。

ChangeLog

我们已经将代码托管到github和北森gitlab上,您可以到两个网站查看相关log。
Github 北森gitlab

事项

贡献者

hooper's pic 赵昊鹏 HooperUI.com站长,北森前端工程师,热爱UI和交互, HooperUI框架发起人 hooper's pic 张玮琪 北森前端工程师,HooperUI框架JS组件开发者,吃货。

常见问题

HooperUI基于zepto开发,而zepto并未提供Zepto.noConflict方法(请参见: Zepto.noConflict), 因此可能与您的jquery组件相冲突。您需要使用$.noConflict方法来保持您的jquery 与HooperUI不冲突。若不能满足您的需求,您也可以考虑只使用HooperUI的CSS组件,或放弃 HooperUI。

我们将很快发布jquery版HooperUI。

HooperUI的当前版本为jQuery版。

反馈Bug

欢迎各位提交相关bug给我们,我们会虚心接受您的批评和意见。
邮件提Bug 到Github提Bug