总结XX网app中webapp常见的前端错误。
在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常见的前端错误。的更多相关文章
- Android TV开发总结(七)构建一个TV app中的剧集列表控件
原文:Android TV开发总结(七)构建一个TV app中的剧集列表控件 版权声明:我已委托"维权骑士"(rightknights.com)为我的文章进行维权行动.转载务必转载 ...
- 天猫京东app中常见的上下滚动轮播效果如何实现?
前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...
- 移动App中常见的Web漏洞
智能手机的存在让网民的生活从PC端开始往移动端转向,现在网民的日常生活需求基本上一部手机就能解决.外卖,办公,社交,银行转账等等都能通过移动端App实现.那么随之也带来了很多信息安全问题,大量的用户信 ...
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...
- 记录常见的问题:encodeURICompnent 解码过程中出现空格 以及 第三方app中使用schema 唤起app
window.location.href 跳转的时候使用了encodeURIComponent编码了部分参数,但是在第三方app中出现了编码过后的参数换行和空格的情况(部分第三方应用或者java程序) ...
- 手机APP有三类:原生APP,WebAPP,HybridApp
搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo 目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点, ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
随机推荐
- Miller_Rabin codevs 1702 素数判定2
/* 直接费马小定理 */ #include<iostream> #include<cstdio> #include<cstdlib> #include<ct ...
- ADO.NET基础
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- Android设计图(标注、切图)
1.Android: 1)Android的单位是dp 2)分为ldpi/mdpi/hdpi/xhdpi/xxhdpi. 3)分辨率对应DPI ldpi QVGA (240×320) mdpi HV ...
- jquery动画总结
基本动画 show() //直接显示元素,没有动画 show(speed, [callback]) //有动画,有回调函数 hide() //直接隐藏元素,没有动画 hide(speed, [call ...
- Oracle10g、 Oracle11g完美共存
Oracle10g. Oracle11g完美共存 环境描述 客户服务器上已经安装Oracle9i软件并部署多套数据库,现在客户要求安装Oracle11g软件,并且创建11g数据库, ...
- UIView之常用方法
UIView之常用方法 将一个视图添加为子视图,并使之在最上面显示 -(void)addSubView:(UIView *)view; 将指定子视图移动到顶部 -(void)bringSubViewT ...
- ASP.NET Core中使用Razor视图引擎渲染视图为字符串
一.前言 在有些项目需求上或许需要根据模板生产静态页面,那么你一样可以用Razor语法去直接解析你的页面从而把解析的页面生成静态页,这样的使用场景很多,不限于生成静态页面,视图引擎为我们提供了模型到视 ...
- MySQL Server 5.6 解压版安装配置
MySQL解压版下载地址为: http://dev.mysql.com/downloads/mysql/5.6.html#downloads 安装及配置步骤: ①将MySQL的zip包解压到路径C:\ ...
- php设计模式之简单工厂模式
①抽象基类:类中定义抽象一些方法,用以在子类中实现 ②继承自抽象基类的子类:实现基类中的抽象方法 ③工厂类:用以实例化所有相对应的子类 /** * * 定义个抽象的类,让子类去继承实现它 * */ a ...
- JavaScript 学习-变量的作用域和块级作用域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...