移动端电商项目总结

1.Html标签要正确使用

链接跳转使用a标签，文本标签优先使用h或者p，信息登记收集等使用form表单域结构，table表格布局等等；标签的正确使用有利于网页的seo优化，有利于页面结构布局的稳固性。另外要注意，a标签等行内元素里最好不要包裹div等块级元素，在不同手机或者模拟器里可能会出现显示的兼容问题；a标签的触发区域也是需要注意的一个点，最好把它转化为块级元素，使其与父级元素显示范围一致；ul嵌套li的结构中，不要穿插进其他标签，需要添加的内容要使用li标签进行包裹；

2.移动端布局中关于浮动与定位的使用

移动端仍旧需要清楚浮动带来的影响，即子元素浮动父元素没有高的问题仍旧存在，双伪元素清除浮动的方法仍旧需要常备；移动端里定位的使用格外需要注意：直接使用固定的left与top值指定元素定位位置，在不同手机尺寸里可能会出现显示的兼容问题，推荐使用left：50%；margin-left：-20%（看情况设置负值百分比）的方法进行定位，如果是居中显示，则推荐使用css3的transform：translate（-50% -50%）来实现；

3.移动端布局推荐使用rem／flex布局方式

rem更推荐flexble.js进行适配；真机测试是移动端项目上线前必经阶段，多测几个手机版本的适配；

4.推荐使用“去高度化布局”方法进行布局

在网页布局中，尽量不用或者减少使用height为元素规定死高度的布局方法，这样做首先容易出现高度不够或者超出的问题，其次是后期更改麻烦，增加或删除元素都要去修改这个固定的height值；建议写布局时通过上下内边距padding值给盒子上下留出空间，把盒子的高度交给内容与padding来撑开；

5.文件夹，html／css／js／图片等文件不要使用中文字符命名

解析可能会出现乱码；js文件，css文件适当进行合并——一个js文件只添加一个入口函数，初始化的css样式表单与公用的还有单个页面的适当进行合并；后期可以根据项目要求或者公司项目文件夹分级来整理；

6.原生js方法与jq方法不要搞混

如果不清楚，可以打开菜鸟教程参考对应文档查找方法；移动端开发推荐使用zepto.js ，体积更小，方法更适配移动端操作习惯；

7.关于各种插件的使用

第一步：打开官网阅读api文档，查看演示效果；第二步：下载相应的文件，引入自己项目（一般包括js文件，css文件，以及html结构，js初始化代码，很大一部分的插件都需要依赖jq类库，具体参考api文档）；第三步，修改自己页面的样式，调试；

8.项目开发的完整流程

需求讨论（定规范，技术选型，项目文件层及关系的制定等等）；分工；汇总；bug调试；上线测试；第二个版本开始··～～～所以项目上线不是终点，而是新版本的起点。所以要好好做好项目的每一步，按照规范要求。

9.登录注册功能、购物车逻辑很重要；

10.适当借助百度等网络资源，换几个关键词进行搜索，网页资源提供的方法基本可以解决80%的问题；参考答案推荐 csdn 思否博客园简书等网站资源；

11.手机端手指滑动轮播效果

简单的图片轮播用 js 或 jq 即可实现，需要注意的是在移动端，轮播图需要配合手指滑动，如何能让手指滑动的时候图片跟着切换？一个叫做 hammer.js 的移动端手势插件，其在线 cdn 是 https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js , 直接用script 标签在线引进项目文件即可。然后需要在你自己的 js 文件里做如下设置：

$(function(){

var myElement= document.getElementById('轮播 div 的 id 名称');

// 实例化

var hm = new Hammer(myElement);

// 监听 swipeleft 和 swiperight 事件，使手指向左向右滑动切换

hm.on("swipeleft",function(){

$('# id 名称').carousel('next');

})

hm.on("swiperight",function(){

$('# id 名称').carousel('prev');

})

});