前端学习---移动端vue开发踩坑记

前言：

大概两个月前投身于一个项目中去，项目是一个移动端的项目，所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和之前本身学习时的一些总结，包括一些通用的移动端开发要注意的事项、vue开发遇到的一些问题。本文的目的是为了在之后的开发中咱们能够避免这些坑，提升咱们的开发效率。

 

1、移动端开发特有问题：

一、移动端样式的兼容性：

在当前移动端的开发要面对各类不一样的手机，不一样的手机DPI也是不一样的，好比Iphone 8的DPI就是2，Iphone 8P的DPI就是3。为了让页面能够兼容不一样的手机，解决方案以下：

　　1）对手机的视口进行设置强行无视设备的真实分辨率，设置最大最小的缩放比例而且禁止用户进行缩放，从而达到统一的分辨率的效果。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,use-scalable=no"

 　　2）针对不一样的手机对2x和3x的图片进行处理：我采用stylus本身定义了一个方法来解决。在须要的地方直接引入便可。

bg-image($url) background-image url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image url($url + "@3x.png")

二、移动端点击延时的问题：

这个问题我以前并无注意到，甚至不知道本身遇到过，我是经过论坛看到移动端开发会出现300ms的延时，每每会形成点击延迟甚至是点击失效的bug。形成这个问题的缘由是因为移动端浏览器存在双击缩放的问题。解决这个问题能够采用：

　　1）采用一个插件fastclick解决，代码也十分简洁，在入口 注册后，直接采用下面代码。其实也能够本身实现fastclick的功能：自定义click阻止默认click事件的冒泡及默认行为。

fastClick.attach(document.body);

　　2）如果项目的兼容性要求比较低的话，能够加上一个meta标签。

<meta name="viewport" content="width=device-width">

三、在IOS在英文输入首字母大写：

　　采用input的autocapitalize属性对首字母大小写进行设置：

<input type="text" autocapitalize="none" class="box">

四、长时间点击页面会发生闪退的问题：

　　在进行移动端项目调试的时候，可能出现的一个问题就是长时间按住会出现闪退，能够经过如下代码解决。

element {-webkit-touch-callout: none;}

五、在有输入框时进行其余操做不自动失焦：

　　本项目中有一个搜索界面，在搜索时对搜索结果进行下滑，输入框不会自动失焦，手机键盘不会隐藏，因而能够采用对元素进行手动blur。

六、移动端左右滑动会出现白条：

　　在项目开发以前能够对项目进行CSSreset：设置html，body的width为100%，overflow：hidden就能够了。

 

 

2、Vue使用时遇到的一些问题：

这部分并非什么高深的技术文章，而是记录遇到的一些问题。

0、最重要的一点，也是放在最前面：Vue的生命周期真的很重要！很重要！重要！在使用vue进行开发的过程当中，项目越大、须要的时间类型越多、数据越多等就会愈来愈感受生命周期的重要性。在vue的官方文档中对生命周期有着很详细的说明，你们能够自行阅读。

一、文件路径过于冗长或者相对路径过于麻烦：

　　经过webpack自定义路径别名，就能够

// build/webpack.base.js
{ resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '~': resolve('src/components') } } }

 

二、组件中的样式会相互影响。

　　经过为组件中的style标签添加scoped属性就会是组件的样式不会外溢。Vue的scoped是经过为组件添加惟一的属性标识来实现样式不会污染其余组件同名元素的。

三、vue对输入的文字时时响应：

　　用过vue的人都知道，vue有一个很是重要的功能就是实现了双向数据绑定，这对于咱们开发来讲有着很重要的用途。可是我在进行一个搜索组件开发的过程当中就发现了一个问题，因为搜索的数据是经过线上抓取的，当在输入框输入要搜索的信息时，搜索列表会自动加载出来。每次按键都会发送一个请求，这样就大大增长了流量的消耗。因而我采用了一个数据节流的方法，设置了一个延时函数，每0.3S对输入的数据进行检查，而不是同步数据绑定。

四、Vuex的使用：

　　Vuex对于vue，就至关于Redux对于react同样。它是vue的状态管理模式，在多个组件共享状态的状况下，采用vuex就显得很是重要了。

　　由于组件一旦多了起来，不一样组件之间数据的流动就会变得十分繁琐而且难以维护，尤为是在兄弟组件进行通讯时，就显得格外麻烦。当兄弟组件进行通讯时，首先须要一个父组件，子组件经过$dispatch向父组件进行通讯，而后再由父组件进行广播事件$broadcast传递给各个子组件。真个过程十分繁琐而且难以调试。

　　在使用vuex遇到了这个问题：对vuex的使用时每次Store载入新的数据都会形成卡屏的现象，在了解vue的原理后知道这是因为为了获得数据到试图的响应式变化， 会对Store中的每一个对象添加setter和getter方法以实现对数据的监听（脏检查），可是有大量数据进入store的时候， 对每一个对象都进行这样的操做会消耗大量的时间，所以形成卡屏的现象。我想采用的方法是是应用freeze方法冻结对象， 避免vue对每一个对象都进行操做，不直接访问state里的属性，而是采用改变Index使vue的getter间接访问。

五、父子元素同时绑定click事件：

　　在开发的过程当中，咱们常常会遇到父子元素都绑定一个事件，当点击子元素的时候因为事件的冒泡机制会形成对父元素事件的触发。在原生JS中咱们能够采用event.stopPropagation()阻止时间冒泡。那么在vue中如何解决这个问题。咱们只须要在click后面加上一个.stop就能够了。

 

以上就是最近一段时间针对移动端开发和vue使用所遇到的一些状况。若是有不会的地方，能够留言给我，或给我发邮件lml19960131@126.com。让咱们共同进步！^_^

 若是文章对您来讲有用的话能够给我一个star吗？https://github.com/lml19960131/music-ml