首页 > 代码库 > 总结XX网app中webapp常见的前端错误。

总结XX网app中webapp常见的前端错误。

在2016年12月至2017年1月,这一个月的时间内,我参与了易政网app中webapp前端项目的工作,下面将我在此次项目中犯的错误总结起来,以防下次再犯。

注意点

一:复用

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

二:防止类名冲突

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

三:外链导入

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

四:跟标准

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

五:tap

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

六:滚动条

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

七:原生js

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

 

BUG

一:字体大小和间距问题

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

(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); 

二:换行问题

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

三:ios和安卓原生问题

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

四:后台插入文章问题

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

 

mui的坑

一:mui.back事件问题

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

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

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

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

 

总结XX网app中webapp常见的前端错误。