十一长假后的第一天上班,心情不错,准备给大家分享一篇文章,是我在开发58同城客户端3.0的一些经验。所涉及到的主要在web前端这块,分三个部分,html,css,js下面来详细说明:
****************** html篇 *****************
1、所有页面文件统一使用html5文档声明,添加如下;
<!DOCTYPE html>
2、html标签添加 lang属性, lang=”zh-CN”,以示中文;
3、编码格式统一为“utf-8”;
<meta charset=”utf-8″ />
4、为移动端网页添加必要的meta值;
<meta name=”viewport” content=”initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width” />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”format-detection” content=”email=no” />
<meta name=”format-detection” content=”address=no;”>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<link rel=”apple-touch-icon-precomposed” href=”http://pic2.58.com/m58/img/icon58b.png” />
<link rel=”apple-touch-startup-image” href=”http://pic2.58.com/m58/img/icon58b.png” />
以上各个属性及值的意义也很直观,不懂的可在网上查询了解。
5、为了兼容低版本的android和ios系统,在编写html页面时尽量少用或不用html5新增标签,页面结构简洁,标签嵌套合理,尽量减少不必要的多层嵌套;
6、由于客户端app的head和foot区域均为native实现,只有内容区域是web,在body标签内统一添加<div id=”ct”>content</div>;(注:只是建议)
****************** css篇 *****************
1、webview,目前我们的页面只在webkit上做兼容,对于特殊的css编写必须加上“-webkit”前缀;
2、目前css3新增了比较实用的属性,在webkit上可以使用,可减少对背景图片的依赖比如:
处理背景渐变效果可用:background:-webkit-gradient(linear,0% 0%,0% 100%,from(#f9fbfc),to(#edeff1));
处理某个元素的移动旋转可用:-webkit-transform:rotate(360deg)
等等…
3、在编写css时尽量避免使用 float 属性,如遇到左右浮动布局,可用以下代码替代:
在此样式display:-webkit-box;下的元素会在同一行上显示,还可以继续扩展,用新增的属性做更多的配置,具体可在网上查询了解。
4、处理css所用到的背景图时,为了提高图片的显示质量可选择使用png24的图片格式,对于颜色值较少的图标可选择使用png8的图片格式;
5、可延续pc端的方法使用图片整合来减少http的请求,建议在整合图片时分类处理;
6、给统一添加的“ct”div设置样式:
#ct{width:100%;height:auto;overflow:hidden;}
注:为了适配不同分辨率下的机型,给“ct”设置宽度为100%,页面会根据不同分辨率自动缩放,页面中的个性化适配也可借助js来完成。
****************** js篇 *****************
1、目前客户端3.0的前端页面是用jqmobi 1.0 作为基础框架,即每个模版页都要引用此框架;
此框架的使用方法和jquery是一样的,会用jquery就会使用它,(注:我们在用)
2、事件注册,移动端的设备均为触摸操作所以在注册事件时建议使用touch事件,目前android 和ios支持的touch事件有以下几种:
touchstart,手指触摸到屏幕上时触发
touchmove,手指在屏幕上移动时触发
touchend,手指离开屏幕时触发
touchcancel,系统取消或中断操作时触发
还有一些其他事件比如 监听旋转事件,缩放事件等等,可根据需求合理应用
3、由于移动端的浏览器和webview对js的执行性能稍显微弱,尽量避免使用js过于频繁的操作dom元素;
4、由于3g,2g网络存在不稳定性等原因,尽量避免过多的ajax异步请求,尤其是大数据量的请求;
5、webview内的页面滚动处理采用系统默认滚动,避免使用js模拟处理滚动效果,android性能极差;
以上是我经历这个项目后总结的一些经验和技巧,有不合理之处欢迎提出指正,以后也会有更多的内容分享给大家!