晓风博客

一片荒芜的地方

网络极客移动APP经验总结

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

概述

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

  1. 后端使用PHP和Codeigniter框架实现
  2. 前端采用Ratchet框架。
  3. 数据抓取主要采用PHP Curl类
  4. DOM分析采用simple_html_dom这个插件
  5. 使用SVN作为版本控制系统
  6. 使用JSON作为数据交换格式
  7. Zepto.js作为javascript框架
  8. 应用地址:点击进入

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

心得

1. 关于用户登录

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

2. 关于数据库表格设计

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

3. 移动端的HTML meta标记

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

1
2
3
4
5
6
<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、校验密码等。

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

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

1
2
<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的判定不准。从形式上来看就会感觉网页有卡顿。所以不再非不得已的情况下不要我觉得还是不要使用absolutefixed的比较好。

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
21
<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>

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