网站首页 » 前端开发 » 移动WEB » 关于移动端开发的一些忠告
上一篇:
下一篇:

关于移动端开发的一些忠告

有好的开始,你就成功的一半,在移动端开发中也不例外。对于一个项目来说框架的选择以及整个项目的结构布局极其重要。下面就分享下自己在平时开发过程中遇到的一些问题,会文会一直更新。

问题一:要不要选择前端 UI 框架

对于这个问题得根据项目的实践情况来进行选择。比如:你的项目采用了敏捷开发,那么框架对于你来说就很有必要了,但是这里有一个问题需要注意,你得提前跟交互同事、UI 同事沟通好。不然你会发现你的 UI 框架白引了,话说一个这样的前端框架也不小,所以如果你项目中引入了一个 UI 框架,最好在项目中使用到的元素尽量以框架为准,否则你会发现你得重写很多样式代码。但话又说回来,引入了 UI 框架也不一定说要 100% 都按 UI 框架来,有则做,没则不做,项目的需要肯定不止于止,肯定会比这我得多,所以在这中间得有一个取舍(引还是不引)。

问题二:要不要引用类似 jquery 的库

建议引用。虽然文件不小,但是对于你的开发来说,可以节省不少代码不少时间。像这样的类库还有:zepto.js、lodash.js、underscore.js 等等。jquery 和 zepto 可以看作一类,多用于 DOM 操作。lodash.js 和 underscore.js 可以看作是一类,多用于处理数据。

问题三:样式要不要分出多个文件

在这里强烈建议用多个样式文件来存放不同作用的样式。比如:basic.css、model.css、main.css…..。为什么要这么做?

因为这样可以让你更好的管理相关的样式。打个比方:base.css 用来存放一些基本的样式(比如:字体大小、颜色、以及一些标签的重置样式等等),model.css 用来存放一些结构方面的样式(比如:列表模板样式,详情页模板样式),作为一个项目在整体风格上必需是要保持一致的,所以一些模板的重用性是非常高。你就可以把项目中出现的一些页面布局(HTML | CSS)整理成模板,把样式都放到这 model.css 中。model.css 文件要最好要遵循一个规则只可添加代码,不可修改代码。因为你了满足当前的页面的排版而去修改了这里面的样式代码,就会影响到之前用到这个模板的页面展示。所以 model.css 可加不可改这是硬道理。但在实践的开始当中肯定会有不一样的页面,比如:一个页面跟之前写好的一个模板很像,只是有一点点不一样,某些地方多了一些横线,或者字体的颜色不同,字体大小不一样。这个时候你就可以这样做,直接把所需模板的 HTML 复制过来。然后最外层添加一个 div 包起来,给这个 div 添加一个类或者 id。然后通过这个类来复写有变动的样式。这些重写的样式就可以放到main.css 文件中。分出多个样式文件也不会影响到性能什么的,因为发版的时候肯定是得要做文件合并和压缩的。分出多个样式文件只是便于管理,及提高开发效率。

问题四:样式零碎化有什么好处?

我这里说的样式零碎化是指把一些常用的样式单独写出来。比如:

示例
.fs12{font-size: 12px}
.fs14{font-size: 14px}
.text-red{color: red}
.text-blue{color: blue}
.mt5{margin-top:5px}
.mt12{margin-top:12px}
.mr5{margin-right:5px}
.mt12{margin-right:12px}
.yk-cell{display: flex;}
.yk-cell-bd{flex:1;}

有些样式其它框架也是用这样的方式的,但有些样式我就不知道为什么它们没添加到框架里面。比如上面的 fs12,mt5 ,yk-cell 和 yk-cell-bd(用于布局)。个人感觉添加了这样零碎的样式后,开发时感觉更加流畅了。因为这些样式我都可以信手拈来。请想像一个很尴尬的场景,比如:你只是想给一个元素添加一个上边距,老套路就是给这个元素一个类名,然后就在样式表里添加相应的样式。但有没有觉得这样做很不爽,只是添加一个样式就得写那么多代码。但如果你用了这个新套路那么你就可以非常快地完成,只需要给元素添加一个 mt5 类名就可以了。其实这就是众多UI 框架的精髓所在,但我觉得它们做得还不够体贴。这些个样式利用性真的不是一般的强,用了都说好,不过这只是我的个人感觉,你也可以根据你自己的感觉来做一个属于自己的开发模式。

问题五:为什么要添加基准值

我这里说的基准值是指给根元素添加一个值(字体大小),然后在页面开发中在设置一些大小的时候都以这个基准值为参考。也就是使用 rem 作用单位,而不是 px。使用rem 的一个好外就是可以让你很好的控制页面大小。还有一些好处在这里就不多说了,只有让你遇到了你才会觉得 rem 确实用了都说好。不过当你决定用 rem 后,页面中也不一定都必需用 rem ,有些地方可能使用 px 更合适。这个基准值我们是需要动态设置的,可以用下面这段 JS 来进行设置。

设置页面基准值
(function(){
    var html = document.documentElement;
    var htmlW = html.clientWidth;
    console.log(htmlW);
    html.style.fontSize = htmlW/16+"px";
})();
// 或者
(function(){
    var html = document.documentElement;
    var htmlW = html.getBoundingClientRect().width;
    html.style.fontSize = htmlW/16+"px";
})()

这段代码主要是给 html 根元素根据不同的屏幕大小动态添加一个字体大小,10.8 这个数你可以根据自己的实践情况进行修改。

比如:你的设计稿宽为750px,那么你可以把10.8 改成 15 ,也就是把设计稿分成 15 份,每一份为50px,即 1 rem 等于 50px。或者你也可以分成7.5份,那么即 1 rem 等于 100 px。每一份为100px 的话在开发时就比较好换算成 rem 。

设置了基准值的另一个好处就是可以让你更加准确的还原设计稿。

问题六:项目整体要怎么布局

这里说的项目整体布局是指页面通用的布局(大的框架),一般 APP 页面都是分上中下三个部分,那么这三个部分要用何种布局方式呢?

尽量不要用 fixed 来实现页面上面部分的固定布局,不然你出现一些很奇怪的 BUG (在 IOS 下特别严重)。可以通过绝对定位来实现上下两个部分的固定效果。

可以像下面这样:

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>移动布局方案</title>
</head>
<body>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
</html>
CSS 样式
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    padding: 0;
    margin: 0;
}
.header{
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
}
.main{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 50px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /*启用回弹效果*/
}
.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
}

中间的内容滚动如果真的用上面的 overflow-y:auto 和 -webkit-overflow-scrolling: touch; 可能还无法满足你的需求,你可根据实践需要写一个滚动效果。不过这只是一个基本的套路,当你打开淘宝的手机端页面时你会发现他竟然不是用这种套路,而是用更加新的弹性布局来实现这个布局。所以如果可能的话,你不妨也可以试试用弹性盒子模型来实现这个布局。可以参考这里:《移动端布局解决方案》。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/some-tips-for-mobile-development/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END