webApp项目总结

2017-1-16 hanbin JavaScript

A.项目背景:

最近花了将近1周的时间做了一个移动端的demo,因为是自己练习东西很少.

B.所用技术:

VueJs  + requireJs+zeptoJs

C:总结:

1.适配问题
由于是移动端的项目,所以第一个遇到的问题当然是如何在所有的移动设备上面能正常显示页面,比如小屏幕5S,大屏幕6P。如果横向百分比,纵向固定,这样的话会发现一些大屏幕机子上面的快是矮胖矮胖的。这次我想适配上面用rem+百分比,这样做出来的页面在不同机型上面的字体大小是不一样的,高度也是按照比例的,更加贴近原生app的效果。具体的做法是取一个根字体大小,这里我就根据28px当做基础字体,在commonjs里面写一段获取屏幕宽度的代码var winWidth = document.body.clientWidth;
document.querySelector('html').style.fontSize = winWidth/750 * 28 + 'px';然后就能设置不同屏幕的根字体大小了。


2.移动端上传图片

如图所示:


找到了一个上传插件webuploader.下面用代码来说明怎么用(一定要注意这个插件依赖JQ,对版本有限制的)。

html:


js:


3.注册登录。

如图所示:


这次用了vuejs做了注册,比用jq写的代码更加容易修改,以后维护的话也更加方便。

html:

js:

总结:
这个demo用了vuejs,感觉数据驱动的话可以避免操作Dom的繁琐,由于是第一次用,为了完成,还是用了比较多的dom操作。


网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2018 www.elight.cn, All Rights Reserved