前端移动端用到的各别技术以及所遇问题总结（未完结）

1.技术性

1）FastClick

它是一个简单易用的库，消除了移动端浏览器上物理点击和触发一个click事件之间的300ms延迟。
原理：在检测到touch事件时，会通过DOM自定义事件立即模拟一个click事件，并把300ms后真正的click阻止掉。

import FastClick from 'fastclick'
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
  }, false);
}

今天在通过局域网用移动端访问下发现，ios端在点击input输入框时会出现没反应的现象，除非在多次点击后才会弹起键盘。且安卓端并没有这个bug。查阅发现，原来是引用了FastClick插件。
解决办法：
在安装的fastclick源码中找到这段代码，加入targetElement.focus();这句话

FastClick.prototype.focus = function(targetElement) {
        var length;
        // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
            length = targetElement.value.length;
            targetElement.focus();//加入这一句话就OK了
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

2）移动端兼容显示@2x,@3x图

@2x，@3x是屏幕显示模式，它可以理解为一个点等于多少像素。@2x就是一个点=2个像素。
我在less文件中编写如下：

/* 根据dpr显示2x图/3x图 */
.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')";
  }
}

3）兼容不同设备：rem

主要为了兼容不同的屏幕宽度。比如iPhone4的宽度为320，6为375。
rem是相对单位，所以这里关键代码就是通过改变15，去改变你的比例值。我这里封装了一个全局文件。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 15 * (clientWidth / 320) + 'px';//通过调整15来调整比例
            //根据屏幕的宽度来调整字体大小 （iPhone4的宽度就是320，6为375）
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

4）swiper轮播图bug

在使用vant的轮播图有个bug，就是轮播图中的图片数据还未请求完毕时已经初始化完毕，会造成最后一页不动的情况。所以必须在数据请求完成后才可以初始化。
我使用的办法是全局控制。数据在没下载之前加一个提示。具体使用到了vant的Loading。个人理解类似于路由守卫。就是在数据请求完后改变一个标识符的值，通过v-if来控制加载中页面到主面的切换。

5）跨域处理

6）keepalive组件

起因：首页在点击每个分页过程中，每次都会加载一遍。
vue中有的keepalive组件：当它包括你的一个组件后，这个组件就不会每次在发送请求去加载当前页面。把不需要经常改变的做一个缓存.
做法：在路由配置里添加meta:{keepAlive:true}

{path:'category',name:'category',component:Category,meta:{keepAlive:true}},

然后在组件中通过$route.meta.keepAlive的值来控制组件是否缓存

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
	<router-view v-if="!$route.meta.keepAlive"/>

7）路由配置

首先路由配置后，永远不要忘记配置路由出口 routerview

8）better-scroll

this.$nextTick(()=>{
	this.leftScroll = new BScroll('.leftWrapper',{probeType:3})
});

better-scroll：http://ustbhuangyi.github.io/better-scroll/doc/api.html

9）登录按钮忘记阻止默认事件

在我登录按钮点击后，逻辑上来说登录成功保存用户信息后，会跳转至主页面，但是却在当前页面进行了刷新操作。
一开始以为是请求操作是异步的问题，所以改用action来保存用户信息而不是mutation，但并没有变化。
后来发现是form标签下会有默认事件，走form的action属性，所以要阻止默认，而是走button的click事件。