网络极客移动APP经验总结

关于移动App Native和Web方式不在本文讨论范围之内，仅仅是经验总结，巩固知识方便以后查阅。

概述

首先简单说明下该APP的组成：

后端使用PHP和Codeigniter框架实现

前端采用Ratchet框架。

数据抓取主要采用PHP Curl类

DOM分析采用simple_html_dom这个插件

使用SVN作为版本控制系统

使用JSON作为数据交换格式

Zepto.js作为javascript框架

应用地址：点击进入

App功能实际上主要是模拟登陆教务系统，然后对成绩、课表等进行抓取，并按照手机排版格式优化输出。除此之外，还对数据进行收集，做数据的二次挖掘。

心得

1. 关于用户登录

直接模拟到教务系统，对中间数据不做任何保留，防止出现安全问题。所以想测试安全性的同学省省吧，在我这测试和在教务系统直接测试是一样的，没有sql inject。因为评论系统是多说的，所以也不存在XXS了。

2. 关于数据库表格设计

这个本身是没有什么好说的，但是本次在设计的时候使用到了JSON。如果一个二维数组想要存储进数据库，可以把某一列数据格式化为JSON后再存储进去，非常方便，PHP需要用的时候再解析出来。不过再要新加数据的话就要全部解析出来，转化成数组再格式化回去，适合没有多少数据量的列。

3. 移动端的HTML meta标记

第一个当然要说的是屏幕比例，第一行meta可以禁用用户双击放大、所小用户屏幕。我们已经为移动端做了优化，放大缩小功能当然是不需要的。而viewport则是设定了网页最大宽度等于设备的显示宽度。第二个meta表示是否禁止ios safari浏览器的工具栏。第三个则是工具栏的颜色调试。

1
2
3
4
5


<head>
	<div id='wx_pic' style='margin:0 auto;display:none;'>
	    <img src='<?php echo $images_url;?>/icon.jpg' />
	</div>
</head>

4. 移动端框架选择：

最初尝试了jQuery Mobile，这款框架功能很丰富，尤其是Ajax方面做的很好。但是性能着实堪忧，在Android的低端手机上反应很慢，有时候进一个网页需要30s + 。这当然是无法忍受的，所以又尝试了很多发现Ratchet不错，这个框架是twitter公司开发出的bootstrap“移动版”。这一点令我很纳闷，bootstrap 3.0本身就是移动优先的，那为何又有一个Ratchet？不过使用之后发现这款框架仍然不够成熟，而且用的人也比较少。后来我甚至去掉了框架里的JS，只是使用了布局和图标。

5. 性能优化：

性能是移动端的瓶颈之一，如果不是引入了jiathis分享和多说评论，我对性能还是很满意的。从测试来看访问速度都很快，毕竟做了很多优化。不过还好，jiathis和多说都是ajax加载的，不会影响太多。说道优化必须说的就是图片优化，这个项目中首先采用了服务器端的gzip优化，将静态资源CSS、JS、图片等在服务器端压缩，然后浏览器会自动解压，节省传输中的带宽。其次对有所有的图片进行了压缩。因为采用了前端构建工具Grunt，所以很方便。Grunt会自动编译Less、压缩所有CSS到style.min.css、压缩所有JS、压缩所有图片。在Google的PageSpeed评分中各项指标都达到了L，只有一项是M。没有H。其实总结来说网页的优化就是：

1.减少不必要使用的JS、CSS。

2.压缩图片。

3.使用字体图标，试过SVG貌似兼容不太好。

4.使用Ajax来加载一些东西，比如外部的JS、校验密码等。

数据交换和存储，页面见传递数据采用JSON这种很方便的格式化之后的数据，这比数组和对象更容易在数据库、后端、前端之间中互相交换。非常方便！

SEO优化、分享时的标题文字和图片优化。每个页面单独有SEO Title和Description，通过单独设计这些文字，页面被分享的时候才会更加吸引人。如果有必要可以借鉴微信朋友圈很火的游戏“围住神经猫”在分享中带上自己的得分等，引起社交攀比，有利于应用推广。同时附上微信分享中的图片设置代码：

1
2
3

<div id="wx_pic" style="margin: 0 auto; display: none;"><img src="<?php echo $images_url;?>/icon.jpg"/></div>

对的，你没看错，是在head标签中加入div#wx_pic我也很郁闷这不是破坏了HTML结构么，但是微信就是这么二。

8. 关于移动端的布局

移动端浏览器对position:fixed支持不是很好，想要尝试固定你的标题栏导航栏之类的可以试试iscroll这个JS框架。除此之外对全局使用position:absolute然后所以页面包含在这个标签内也会有问题，测试发现当网页需要想下翻动时由于浏览器的工具栏有时会隐藏，此种方式会造成position:absolute的判定不准。从形式上来看就会感觉网页有卡顿。所以不再非不得已的情况下不要我觉得还是不要使用absolute和fixed的比较好。

9. 关于移动端的Event事件

移动端的不叫click事件。而且当你使用jQuery的click function的时候会发现有迟钝甚至没反应。因为在移动端的点击事件叫做tap事件，双击double tap等等。推荐在移动端使用Zepto.js作为替代jQuery的选择，用法几乎和jQuery一样，所以不存在学习成本。

10. input标签的tabindex、autofocus、placeholder

各个标签的意义就不用解释了，不懂的请自行百度。只是这次新认识一个tabindex表示tab切换的标签，以及一个小的技巧就是隐藏的submit标签，用来enter提交表单。不需要去做事件监听，性能应该好点。只需要在JS端检测submit事件即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<form class="input-group bind_form" id="jwweb" name="jwweb" onsubmit="return false" action="xxx">
    <div class="input-row">
        <label for="xh">学号：</label>
        <input type="number" placeholder="201193014000" name="xh" autofocus="autofocus" tabindex="1">
    </div>
    <div class="input-row">
        <label for="password">密码：</label>
        <input type="password" placeholder="password" name="password" tabindex="2">
    </div>
    <div class="input-row">
        <label>验证码：</label>
        <a href="javascript:void(0)" id="reloadcode"><img id="codeimg" src="<?php echo base_url("jwweb/getvalidcode");?>" style="
        margin-top: 4px;"></a>
    </div>
    <div class="input-row">
        <label for="cCode">请输入：</label>
        <input type="text" size="4" placeholder="abcd" name="cCode" tabindex="3">
    </div>
    <input type="submit" style="display:none" />
</form>

暂时能想到的就是这么多了，这个项目做完后准备学习一下Node和Angularjs，备战十月份的找工作，如果有哪个公司要招前端的烦劳联系我一下。大四准毕业生，有三年web开发经验，准备在北京找全职工作。会设计、懂代码、前后端通吃。邮箱：mail@liyaodong.com 还有两个月，好好加油！

晓风博客

一片荒芜的地方