M端总结

Posted 2020-07-19 追梦-dream

最近在项目开发过程中涉及到了移动端，现在对此进行总结。

在此次M端的开发过程中，遇到了许多问题，在此进行一次总结，希望大家在以后的开发过程
中能尽量规避类似的问题，提高开发效率和代码质量。
一、布局
1.移动端开头
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0"/>
一般在写移动端时，会在head标签内添加上面这个meta标签，它的作用在于给手机端建立
一个viewport层，这样才能更好的去展现页面效果。比如有的手机分辨率达到了
1920*1080，这种高分辨率一般在电脑大屏中出现，那么手机那么小的手机，为什么能达到
1920*1080这么高的分辨率呢？因为他的dpi或ppi高。
注释：dpid：ots per inch，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一
英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概
念，android比较喜欢使用dpi，ios比较喜欢使用ppi。
1.单位
dom布局单位的问题，移动端的布局与PC端的布局有所差别，在PC端我们习惯于用px设置
固定宽高的值，而移动端的重点是自适应，所以在许多地方采用的是设置百分比或者以rem
为单位来设置宽高。 宽度一般设置百分比，高度设置rem。
一定要区分清楚什么情况下使用固定大小，什么情况下使用自适应大小。文字类基本都使用
固定大小，图片及背景图片类可酌情考虑自适应大小，具体情况请结合实际，不清楚的地方
可先与同事沟通，或者与产品沟通，务必做到了解需求后再写代码。
当采用rem作为单位时，如果是sublime text编辑器，可以先安装一个cssrem插件，方便自
动对rem单位进行换算。
2.弹性布局
在移动端里比较常见的布局有弹性布局，也就是display:box和boxflex?利用这两个属性可以
较方便的分配一行内的子元素；简单的理解就是能够按等分划分元素。
例如：
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 2/6
<ul style="display:box">
<li style="box-flex:1">1</li>
<li style="box-flex:2">2</li>
<li style="box-flex:1">1</li>
</ul>
结合上面的代码，我们可以这样理解，当把ul设置为弹性盒子时，则ul的三个子元素li都会被
分配各自的比重，我们可以把ul当成单位1，并被划分为了四等分，其中第一个和最后一个li
各占四分之一，中间的li占二分之一。
display:box兼容写法
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-flexbox;
display: flex;
display:box兼容写法
-moz-box-flex: 1;
-webkit-box-flex: 1;
-o-box-flex: 1;
-ms-flex: 1;
flex: 1;
3.boxsizing布局
boxsizing布局比较适合用在自适应场景的开发。比较常见的例如：
这种情况下，把边框长度算入盒模型的宽度中是比较方便的。
4.css3属性
移动端对css3的支持非常给力，除了部分属性需要添加前缀。而且据说移动端使用css3的性
能比css2要高，所以大家优先使用css3属性，同时css3用起来有多方便也就不需要我说了。

二、js代码
技术选型：zepto.js+swiper.js+echarts.js+common.js
1.zepto.js
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 4/6
Zepto是一个轻量级的针对现代高级浏览器的javascript库， 它与jquery有着类似的api。 如
果你会用jquery，那么你也会用zepto。
正如zepto自己所说的那样，它只是个轻量级的js库，所以我们常用的一些jq方法它可能没有
提供，尤其是animate动画，当然，这个并不是特别要紧，大部分的动画都可以直接用css3
动画来实现，少部分有需求的动画，可以用原生js自行定义。
2.swiper.js
swiper是一款专门针对移动端所开发的开源触摸滑动插件，能够满足移动端大部分滑动特效
需求。而且swiper提供了基于zepto开发的插件，更加轻量。swiper的使用也比较方便，基础
引用方式如下：
var swiper = new Swiper(".swiper-container", {
slidesPerView: 3,
setWrapperSize :true
});
swiper常用API:
(1) slidesPerView 设置一个屏幕内元素显示的个数
(2) setWrapperSize 设置swiper自动计算对象的总长度
(3) direction 设置横向或者纵向显示
(4) pagination 设置小图标
3.echarts.js 3.0
echarts从3.0版本开始支持移动端图表。
4.common.js
简单列举common.js中的一些方法：
(1) common.backtop() 返回顶部按钮效果
(2) common.divselect(divselectid,inputselectid,height) 模拟下拉表单
(3) common.touchList(content,num) 调用swiper，左右滑动效果
(4) common.ajax(method, type, params, callback) 异步请求的通用方法
(5) common.getDate(data) 根据时间戳(秒)生成时间 1436412956699 > 20150709 12:00
5.Js代码规范
每写一个新的js方法，都要写好注释，形式如下图：
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 5/6
每一个事件，最好也简单的写上注释，如下图：
6.如何异步获取并渲染数据
var example = function(){
//定义了一个对象
}
（1）方法入口，例如：
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 6/6
house:function(){
var n = 1,
nickname,
typeid;
nickname = $(".nickname").text();
typeid = $(".typeid").val();
//调用发送异步请求的方法
example.sendHouse();
//除了调用请求方法，也可以在这里写一些相关的操作事件，例如点击加载更多
$(".btn-more").click(function(){
n++;
example.sendHouse();
})
}
（2）发送异步请求，例如：
sendHouse:function(nickname,typeid,pageIndex){
//调用通用异步请求方法
common.ajax("Image.s.List","post",{buildnickname:nickname||"bl
sd",typeid: Typeid||"0",PageSize: pagesize||"5",Pageindex: pageinde
x||"0",Requrl:"http://192.168.100.101:8088"},function(res,success){
if(example.loadHouseInfo && res[success]){
example.loadHouseInfo(res[success]);
}else{
console.log("没有提供函数调用...");
}
})
}

 

加群 474471759交流