移动端电商项目总结

我就是我 2023-06-01 12:50 7阅读 0赞

**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');

\})

\});

这样，在手机端你就可以通过手指滑动来实现图片轮播了。

附：相关插件组件的网站链接

[https://www.html5tricks.com/9-jquery-image-slider.html][https_www.html5tricks.com_9-jquery-image-slider.html]

[http://layer.layui.com/][http_layer.layui.com]

[http://yanshi.sucaihuo.com/jquery/25/2534/demo/][http_yanshi.sucaihuo.com_jquery_25_2534_demo]

[https://blog.csdn.net/u013185616/article/details/53195820][https_blog.csdn.net_u013185616_article_details_53195820]

[https://blog.csdn.net/yangwenxue\_admin/article/details/44537065][https_blog.csdn.net_yangwenxue_admin_article_details_44537065]

[http://dev.dcloud.net.cn/mui/ajax/][http_dev.dcloud.net.cn_mui_ajax]

转载于:https://www.cnblogs.com/angel648/p/11079613.html

[https_www.html5tricks.com_9-jquery-image-slider.html]: https://www.html5tricks.com/9-jquery-image-slider.html
[http_layer.layui.com]: http://layer.layui.com/
[http_yanshi.sucaihuo.com_jquery_25_2534_demo]: http://yanshi.sucaihuo.com/jquery/25/2534/demo/
[https_blog.csdn.net_u013185616_article_details_53195820]: https://blog.csdn.net/u013185616/article/details/53195820
[https_blog.csdn.net_yangwenxue_admin_article_details_44537065]: https://blog.csdn.net/yangwenxue_admin/article/details/44537065
[http_dev.dcloud.net.cn_mui_ajax]: http://dev.dcloud.net.cn/mui/ajax/