# h5

**Repository Path**: zonghuan/h5

## Basic Information

- **Project Name**: h5
- **Description**: 前端 -- 手机端
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2015-02-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###1、项目说明
- 本项目为移动端web项目。
- 前端所用的库为zepto。在解决移动端屏幕多样性的问题上，使用了流行的rem解决方案。
- 后端用node模拟接口，可使用java或php实现替换具体的业务接口。
- 前端构建工具为grunt

###2、前端部分
- zepto是移动端js框架，API和jQuery类似，详见<a href="http://www.css88.com/doc/zeptojs_api/">官网</a>。
- 为了应对移动端的多样性，使用rem机制。首先使用&lt;meta /&gt;使浏览器宽度等于屏幕宽度，获取屏幕宽度之后除以20，把该值赋值给html的font-size。这样页面内1rem的就等于1/20的屏幕宽度，也就是说对于任何宽度的屏幕而言，它的总宽度都是20rem。这里是<a href="http://git.oschina.net/zonghuan/h5/blob/master/public/js/lib/count.js">具体的实现</a>。

###3、后端部分
为了更好的和后端对接，这里先用node实现了创建路由和模拟数据。为了方便的创建路由，这里实现了一个<a href="http://git.oschina.net/zonghuan/h5/blob/master/node_modules/scan/index.js">扫描器</a>,app.js会扫描相应的路由js，然后注册到web服务里去，这里是<a href="http://git.oschina.net/zonghuan/h5/blob/master/app.js">具体实现</a>。之后，需要创建一个路由，只用在相应的目录下创建一个<a href="http://git.oschina.net/zonghuan/h5/blob/master/node/controller/index.js">类似于这样</a>的js文件就可以了。

###4、前端构建工具
这个项目使用grunt作为前端构建工具，这里是它的<a href="http://www.gruntjs.net/">官网</a>。<a href="http://git.oschina.net/zonghuan/h5/blob/master/Gruntfile.js">点这里</a>是本项目的gruntFile文件，只定义了一个dev任务，用于watch和代码压缩合并。这里把具体的配置放到<a href="http://git.oschina.net/zonghuan/h5/blob/master/biz.json">biz.json</a>。

###5、总结
本项目目前可以满足基本的移动端web开发需求，接下来可以再完善下gruntfile，目前gruntfile太过简单，如果页面数量多，将难以满足需求。业务组件也需要进一步完善。

###以上。