移动端实践之音悦tai

        githubd地址:https://github.com/CassielLee/musicAPP.git

       今天刚刚完成移动端一个音乐APP的页面搭建,原生APP的官网地址为:http://m.yinyuetai.com/,下图为我自己搭建的静态效果图,除了实现页面结构的搭建,还用原生JS实现了很多动态效果,例如无缝滑屏组件、移动端APP常见的橡皮筋效果、快速滑屏、防抖动、即点即停等,每个功能的详细实现会写在之后的博客中,在这次开发中将一部分功能抽取封装,封装的部分代码在cl.js文件中,此外,我也将APP打包,文件为:音悦tai.apk,有兴趣的同学可以下载安装看看效果~

        这是我第一次做移动端APP页面的搭建,算是体验一波移动端前端开发的流程吧,感觉和开发PC端网页还是挺不一样的,

个人感觉移动端的页面难度高一点,因为涉及到的窗口较多,另外还有适配问题,不过之所以觉得难,还是因为经验少吧~

       在这次开发中遇到的问题:

           1、适配问题,适配方案不止一种,可以根据实际需求选择最合适的(设计图页面较小的时候,可以采用固定+流体布局,就不用采取适配方案了),其实适配问题的难点是在于理解适配产生的需求和每种适配方案适配的原理,这其中涉及到我之前写到过的三个视口以及像素比的问题;

           2、事件点透,这个问题我也是刚遇到,还没有仔细研究,事件点透发生的主要原因是因为pc端网页的事件在移动端页面上也能触发,比如:onclick,但是会延迟一段时间(依稀记得是0.3s吧),所以如果在移动端页面上绑定一个pc端事件的话,这个事件可能触发多次;

           3、关于样式,这次写样式用的是less,虽然最终是将样式勉强搞定,但是在过程中还是遇到不少问题,主要是对less继承和混合用的不熟练,特别是在继承的时候要不要加all,如果不加all的话,就只能继承一层内容;

            4、关与组件的封装,将部分组件抽取,封装在js文件中,但是没有封装成模块,这也是不足的一点;

             5、在写业务代码时,有时候在获取某个元素的样式的时候,获取不到(可能是还没有渲染或者是加载到页面中),这时候可以利用setTimeout方法来延迟一小段时间获取属性;

              6、就是关于功能实现的问题了,在这里暂不叙述,在之后专门写每个功能的时候在详细说明;

               7、不足之处:没有实现在页面空白处滑动来切换整个内容区;

发布了50 篇原创文章 · 获赞 5 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_31207499/article/details/82261313