在2016年12月至2017年1月,这一个月的时间内,我参与了易政网app中webapp前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯。也终于知道之前看的文章中的一段话所代表的意义:

只讲前端,比如:风格的制定、色调、模块、布局方式、交互方式、逻辑等等,如果再加上团队合作,若再没有一个规划的话,要不了多久,那些看起来没问题的代码,就会暴露出各种问题,模块命名、类的命名、文件的组织、共用模块的提取、代码的复用、可读性、扩展性、维护性。它们看起来只是一些简单的小动作,却需要你看得更远,避免将来出问题需要付出更大的代价,甚至被迫整个项目重构,可谓,功在当代,利在千秋~

注意点

一:复用

可复用的地方一定要复用,不然后期改样式会累死...

二:防止类名冲突

在写类名的时候最好加个前缀,不然在后期可能会有css文件合并,到时候有类名冲突就尴尬了...

三:外链导入

js和css文件最好用外链式导入,如果直接放在html中不好查看,(如果其中有的样式没有用到,jsp会报错)。

四:跟标准

项目标准一定要统一好,不要自己弄自己的,跟着标准来。

五:层级嵌套不要太深

建议是不超过4层。

六:tap

webapp中忘记click,使用tap事件。tap事件用js对象触发。

七:滚动条

有的手机中(小米4)会将你设置的overflow:auto的滚动条显示出来,即使你的页面内容没有超出容器宽度也会显示,所以用不到需要滚动的地方就不要加此属性!!!

:实时监听输入框至变化的完美方案:oninput&onpropertychange

oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发。如果使用jquery的话,可以同时绑定这两个事件。

$(element).on('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});

九:避免使用元素选择器

在开始寻找时,浏览器就会遍历HTML中的所有该元素,显然,这是没有必要的;我们的需求和代码结构都是存在着潜在变化的,如果,你使用了元素选择器去定死某个东西,不论是新加进来的东西,还是被复用的东西加到别的结构里去,都极有可能产生样式的冲突。

七:原生js

最好使用js,webapp中对流量依赖很大,最好不要用jquery以及其他库。

BUG

一:字体大小和间距问题

首先导入下面这段代码。这段代码是已iphone6的分辨率制作的,调试的时候以页面图片制作的分辨率来调节。字体大小和间距都要用rem!!

1:js 设置

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=768){
docEl.style.fontSize = 20 * (768 / 375) + 'px';
}else{
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';} };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 

2:媒体查询设置css

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html, body {
font-size: 28.799999999999997px !important;
}
} @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html, body {
font-size: 25.6px !important;
}
} @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html, body {
font-size: 21.333333333333332px !important;
}
} @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html, body {
font-size: 19.2px !important;
}
} @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html, body {
font-size: 17.066666666666666px !important;
}
} @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html, body {
font-size: 16px !important;
}
} @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html, body {
font-size: 14.399999999999999px !important;
}
} @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html, body {
font-size: 12.8px !important;
}
} @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html, body {
font-size: 11.040000000000001px !important;
}
} @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html, body {
font-size: 10.666666666666666px !important;
}
} @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html, body {
font-size: 10px !important;
}
} @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html, body {
font-size: 9.6px !important;
}
} @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html, body {
font-size: 8.533333333333333px !important;
}
} @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html, body {
font-size: 6.4px !important;
}
}

  

二:换行问题

页面中有的文章或者标题数据可能不会自己换行,需要添加white-space:normal;强制换行。为了防止每行最后会有单词,需要添加word-break:break-all;

三:ios和安卓原生问题

ios和安卓可以禁止调整为大字体,ios可能会吧页面中的一串数字解析为电话或者网址而改变样式,可以禁用。ios和安卓的h5控件等样式都不一样,最好用统一样式的插件。

ios有右滑关闭的功能,mui也可以实现,看项目定。

四:后台插入文章问题

后台插入的文章可能有自己的样式,也有可能没有插入到你的元素中,此处需注意。

mui的坑

一:mui.back事件问题

最好不要使用mui-action-back,这只是普通的返回,不会刷新页面。

解决方法:1:重写mui.back=function,详情见mui文档

     2:给个id绑定事件,但是不要加mui-action-back这个类名。

     3:记住要添加window.androidBack事件,需要触发安卓手机中屏幕底部的返回事件。

总结XX网app中webapp常见的前端错误。的更多相关文章

  1. Android TV开发总结(七)构建一个TV app中的剧集列表控件

    原文:Android TV开发总结(七)构建一个TV app中的剧集列表控件 版权声明:我已委托"维权骑士"(rightknights.com)为我的文章进行维权行动.转载务必转载 ...

  2. 天猫京东app中常见的上下滚动轮播效果如何实现?

    前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...

  3. 移动App中常见的Web漏洞

    智能手机的存在让网民的生活从PC端开始往移动端转向,现在网民的日常生活需求基本上一部手机就能解决.外卖,办公,社交,银行转账等等都能通过移动端App实现.那么随之也带来了很多信息安全问题,大量的用户信 ...

  4. APP中常见上下循环滚动通知的简单实现,点击可进入详情

    APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...

  5. 记录常见的问题:encodeURICompnent 解码过程中出现空格 以及 第三方app中使用schema 唤起app

    window.location.href 跳转的时候使用了encodeURIComponent编码了部分参数,但是在第三方app中出现了编码过后的参数换行和空格的情况(部分第三方应用或者java程序) ...

  6. 手机APP有三类:原生APP,WebAPP,HybridApp

    搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo 目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点, ...

  7. Hybrid App中原生页面 VS H5页面(分享)

    本文部分转自  http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...

  8. Hybrid App中原生页面 VS H5页面

    Hybrid App中原生页面 VS H5页面   现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...

  9. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

随机推荐

  1. 【开源java游戏框架libgdx专题】-09-动画的使用

    1.Animation类介绍   Api定义:动画是由多个帧,在设定的时间间隔序列显示.比如,一个跑步的人一个动画可以通过运行时播放这些图像无限拍照他了. 功能用法:管理动画,设置随即播放模式和播放顺 ...

  2. 初识Ajax技术

    Ajax:(Asynchronous JavaScript And Xml)是一种整合了JavaScript.XML.CSS等现有技术 Ajax工作流程:   纯javaScript的Ajax请求   ...

  3. 地址栏访问Action,后来方法执行两次

    SSH框架,在地址栏输入URL访问Action,后台访问会访问两次.很奇怪. 经排查,最终问题在于方法名称写错了.将getOpinionByPN()修改成queryOpinionByPN(),没有问题 ...

  4. (转)织梦dedecms模板。如何让type='image'和不带type='image'的文章同时出现在列表里。

    “节日歌圩”栏目是有内容的,但是文章没有缩略图所以没有在频道首页显示出来,我现在想要有缩略图的文章自然显示,没有缩略图的文章也能出现标题列表(依然按照一行4个标题,可以用一张“无缩略图”的图片来代替缩 ...

  5. PHP magic_quotes_gpc的详细使用方法

    工作中遇到的代码 if (ini_get('magic_quotes_gpc')) { function stripslashesRecursive(array $array){ foreach ($ ...

  6. 你好,C++(31)我终于找到对象啦!6.1 从结构化设计到面向对象程序设计

    第6章 当C++爱上面向对象 很多第一次进入C++世界的人都会问:C++中的那两个加号到底是什么意思啊? C++是由C语言发展而来的,它比C语言多出的两个加号,实际上是C语言的自增操作符,表示C++语 ...

  7. delphi服务程序(service)的调试方法

    方法一: 1.调试delphi 写的服务程序,有这么一个办法.原来每次都是用attach to process方法,很麻烦.并且按照服务线程的执行线路,可能会停不到想要的断点.笨办法是,在proced ...

  8. Linux 4.1内核编译报告

    编译环境 Arch Linux on VirtualBox 下载内核 https://www.kernel.org/ 下载的内核压缩包,此时的最新内核版本为4.1: 解压包 # tar -xvJf l ...

  9. 获取fragment中对应的控件的写法

    getActivity().findViewById(id);//用来关联activity中加载的控件id

  10. phpinfo.php

    ---恢复内容开始--- apache中的配置不对 查看httpd.conf文件中是否有: AddType ...... AddType application/x-httpd-php .php -- ...