十一长假后的第一天上班，心情不错，准备给大家分享一篇文章，是我在开发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性能极差；
以上是我经历这个项目后总结的一些经验和技巧，有不合理之处欢迎提出指正，以后也会有更多的内容分享给大家！
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
