欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

移动端开发经验

程序员文章站 2022-03-19 15:25:20
1.如果需要适配多个不同的手机屏幕,建议使用@ media进行媒体查询,通过移动端屏幕的高度进行自适应如下:/* 苹果5 */@media only screen and (max-height: 570px){ .mint-indexlist-content{ height: 470px!important; overflow-y: scroll; } #Third{ height: 460px; }}......

      1.如果需要适配多个不同的手机屏幕,建议使用@ media进行媒体查询,通过移动端屏幕的宽高进行自适应,并搭配flex弹性布局进行设计,能拥有更高的兼容性。

      2.初次渲染的时候,建议动态绑定样式来展示最初的页面效果,在data中设置相应的属性名称,然后再created()中通过this.$nextTick()来渲染你想要的效果。

      3.如果想通过监听某个属性来做某些动态的操作,建议使用watch方法

      4.字体的自适应(需要注意的是并不是所有的移动端都适合使用rem来定义字体)

      5.用好基础的移动端事件,类似touchstart,touchmove,touchend等,一定要做好防抖节流工作,因为在触摸的过程中会不断地通过触发touchmove事件来记录触摸的X轴和Y轴数据,因此会大量的消耗内存,而防抖节流能有效地减少这种不必要的内存资源浪费,能给用户带来更好的体验

      6.当后端数据量较大时,请求时间过长,导致用户体验度下降,首先建议与后端协商,采取分页的方式来限定每次请求的个数;另外,在请求资源的过程中,可以嵌入loading图,这样既能够让用户知道目前正在加载中,也不至于让页面陷入一种呆滞状态,是一种不错的增加用户体验度的方式哦!

     7.使用一些动画来让你的交互更有感觉!如果想快速上手使用简易且富有一定观赏性的动画,简易使用Animate.css(与Vue项目更配哦!)

     8.去掉一些影响美感的默认样式,比如对某个div使用overflow:scroll时,出现的滚动轴其实是很影响美感的,那么我们使用一些方法去掉这些东西,让你的页面看起来更舒心

    9.使用H5中的sessionStorage来记录一些跨页面的参数,其实项目做多了之后,就会发现一个url后面携带很多的参数其实是很不雅观的,我们其实可以通过在一次会话过程中保存你所需要的数据其实是个非常不错的抉择哦!

   10.工具建议:如果是在微信公众号上运行的程序,建议使用微信开发者工具,不但可以debug调试代码,而且相较于chorme浏览器,不仅可以通过选择不同的机型来查看效果图,更可以直观的看到在微信公众号上展示的效果!

   11.整体思路的把握:上面讲的可能偏细节,其实开发程序最重要的一点,就是尽可能少写代码多思考,可能有的人会反驳我的观点。但是我以工作了一年的经验来告诫各位,如果一旦你看了原型就直接上手撸代码(当然,如果对产品原型较为熟悉并且有良好的项目开发经验的话,就当我没说),那么很有可能你会走上敲代码30分钟,后期维护70分钟的道路,而且每次产品需要一点点改动的时候,就要打补丁,可能打几个补丁觉得没啥,但是后期产品的一点点修改,就又要无限制的去看自己写的代码,而且有的代码如果写的不规范,特别是没有养成写注释习惯的工作者而言,将会是无穷无尽的折磨,不仅折磨自己,更重要的是当别人看你代码的时候,心里还要妈卖批好一阵(别问我为什么知道这么多,问就是我也是过来人)。所以,写代码的时候不仅要考虑功能的完整性,而且要考虑兼容性,在这个页面有没有功能和这个功能有并集交集补集的情况,以前太年轻,什么也不懂,导致自己改的代码影响了原有的功能。自己调试的时候都是好的,但是一旦上了测试环境,就会出现各种BUG,所以说多考虑考虑这个功能需要写哪些代码,这些代码有没有可以借鉴或者直接复制原有功能情况。如果有,优先借鉴他人写的代码,因为工作的时候效率也是很重要的,即便是写出了兼容性和稳定性以及扩展性良好的代码,但是花费的时间过长,也是很不推荐的。

本文地址:https://blog.csdn.net/TB199404/article/details/111868192