前言：

大概两个月前投身于一个项目中去，项目是一个移动端的项目，所选用的框架是时下比较流行的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")

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

这个问题我之前并没有注意到，甚至不知道自己遇到过，我是通过论坛看到移动端开发会出现300ms的延时，往往会造成点击延迟甚至是点击失效的bug。造成这个问题的原因是由于移动端浏览器存在双击缩放的问题。解决这个问题可以采用：

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

fastClick.attach(document.body); 

　　2）若是项目的兼容性要求比较低的话，可以加上一个meta标签。

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

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

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

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

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

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

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

5、在有输入框时进行其他操作不自动失焦：

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

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

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

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

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

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

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

　　通过webpack自定义路径别名，就可以

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

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

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

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

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

4、Vuex的使用：

　　Vuex对于vue，就相当于Redux对于react一样。它是vue的状态管理模式，在多个组件共享状态的情况下，采用vuex就显得非常重要了。

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

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

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

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

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

如果文章对您来说有用的话可以给我一个star吗？https://github.com/lml19960131/music-ml