关于移动端h5页面的那些知识点

　　最近一直在写移动端页面，因为以前写移动端写的比较少，因此这次踩过许多坑。特此总结一下：　

　　一、<input type='button'>背景色在ios中的兼容性，颜色发白
　　　　解决办法：在全局样式中加入如下代码：
　　　　input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

 

　　二、在vue中使用jquery weui中的地区选择器时，经过点击事件来初始化地区选择器，第一次点击无效，第二次点击才触发
　　　　解决办法：在mounted生命周期中执行初始化事件，在onClose事件中调用另一个函数以获取选择器选择的值。这样在其余地方就可使用这个值了。

 

　　三、ios端按钮和输入框自带圆角问题：
　　　　解决办法：
　　　　-webkit-appearance : none ; /* 解决ios上按钮的圆角问题 */
　　　　border-radius: 0; /* 解决ios上输入框圆角问题 */

 

　　四、vue中点击事件阻止冒泡：@click.stop

 

　　五、clipboard.js的使用：
　　　　按钮触发：按钮我用的是div，pc端能正常使用，ios上失效（安卓不清楚，没测过）。折腾很久，最后尝试将div换成button按钮后，pc、ios均正常

 

　　六、swiper轮播图（4.x版本）时遇到的问题：
　　　　（1）、设置slider容器可以同时显示的slides数量：能够设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量
　　　　（2）、slide可以根据惯性滑动：设置freeMode为true
　　　　（3）、设定初始化时激活slide的索引：设置initialSlide的值，默认为0
　　　　（4）、当slider容器中同时显示多个slides时，让激活的slides居中：设置centeredSlides为true
　　　　（5）、分页器样式设置：设置pagination对象的type属性，当type值为bullets时，会以圆点显示；当type值为fraction时，则会以分式形式显示（形如：1/三、2/三、3/3等）；当type为progressBar时，则会以进度条形式显示，即切换slide时，上方会显示进度条
　　　　（6）、swiper默认显示三个，中间显示所有，两边显示部分：设置以下：
　　　　　　spaceBetween: 10 // 表示每一个slide间的间隔
　　　　　　slidesPerView：1.2 // 设置slider容器同时显示slides的数量。
　　　　　　centeredSlides：true // 让中间显示的slides居中
　　　　（7）、swiper动态加载数据轮播滑动异常，也没法自动轮播（自动轮播的前提是要设置autoplay:true）：须要设置observer:true来启动动态检查器，这样就能够自动自动轮播了，也能手动操做了，然而新的问题来了，手动滑动后，离开滑块，没法继续自动轮播，须要设置autoplay:{disableOnInteraction:false}如今就能够正常轮播了。若是想要循环轮播，则添加loop:true（此时新的bug出现了，就是轮播的时候跳过了第一张跟最后一张，目前还未解决）。

 

　　七、vue遮罩层阻止默认滚动事件（适用于遮罩层自己没有滚动事件的，不然自己的滚动事件也会被阻止）：@touchmove.prevent

 

　　八、h5页面点击元素会出现灰色背景：body {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

 

　　九、发现页面在ios上能正常上下滑动，而安卓上不行，pc端也不能滑动，可是经过鼠标滚动是可行的，这时候有多是css文件中加入了touch-action:none致使的，这句代码做用是阻止页面滚动，将它去掉就行了。坑爹的，困扰我很久了。

 　　

　　十、ios上双击强制缩放问题：

　　　　解决办法：*{touch-action: manipulation}   // 该方法还能移除整个文档的触发延迟，对于IE10，须要使用-ms-touch-action

 

　　十一、vue图片懒加载（vue-lazeload）,不能动态切换图片（如，切换tab时，图片没法动态改变）

　　　　解决办法：为每一个img标签添加一个key属性。<img v-lazy="imgUrl" :key="imgUrl">

　　

　　十二、使用translate致使元素内字体模糊：

　　缘由：translate中的参数为非整数。常见于translateX(百分比)、translateY(百分比), translate(百分比,百分比)。

　　解决办法：由于translate中参数百分比实际上是相对于操做元素自己的宽或高的百分比，因此能够调整所要操做的元素的宽或高，已达到百分比后的值是整数，这样就能解决元素内字体模糊的问题

 

　　1三、App嵌入h5页面（使用vue）

　　问题：若是App端须要在页面跳转时拦截到跳转路径，使用vue的路由跳转方法时，App端是拦截不到的，由于vue是单页面应用，根本不存在页面的跳转。

　　解决方案：使用window.location.href方法跳转（注：若是当前页面使用window.location.href跳转，且路径中带有查询参数，在跳转后的页面中仍然可使用this.$route.query来获取查询参数）

 

　　1四、给复选框绑定事件。

　　若是须要给复选框绑定选中和取消事件，能够将checkbox用label包围起来，给label绑定change事件，不要直接使用click事件，由于这样获取到checkbox的状态是反的，换句话说他获取的只是点击瞬间checkbox的状态，而不是改变后的状态。

 

　　1五、为元素添加多重圆角。

　　如：   

　　可这样实现：box-shadow: 0 0 0 6px rgba(255,255,255,0.60), 0 0 0 13px rgba(255,255,255,0.10);

 

　　1六、input在ios上存在重影边框问题：

　　解决办法：去掉默认样式，上边框的阴影，点击时的蒙版　

input {
    outline: none;
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

　　1七、判断是否为微信浏览器：

function isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
  } else {
      return false;
  }
}

 

　　1八、判断当前设备是哪一种设备，如ios、安卓、移动端等等。

var browser = {
  versions: function () {
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核                
      presto: u.indexOf('Presto') > -1, //opera内核                
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核                
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核                
      mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端                
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端                
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器                
      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器                
      iPad: u.indexOf('iPad') > -1, //是否iPad                
      webApp: u.indexOf('Safari') == -1//是否web应该程序，没有头部与底部            
    };
  }()
}

　　如判断是不是ios,只须要这样使用：browser.versions.ios。如为true则为ios，不然不为ios

 

　　1九、复制功能

　　方法1：html部分：

<!-- 此处可为任意标签。 -->
<p id="input">自古评论出人才</p>

 

　　js部分：

function copyContent() {
  var copyDOM = document.querySelector('#input');  
  var range = document.createRange();  
　// 选中须要复制的节点
  range.selectNode(copyDOM);
　// 执行选中元素
  window.getSelection().addRange(range);
    var successful = document.execCommand('copy');  // 表示是否支持复制功能
  try {  
    var msg = successful 
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  
  window.getSelection().removeAllRanges();  // 移除选中元素
}

 

　　复制方法2：

　　此处须要使用input标签。

<input type="text" value="hello" id="input">    // 若是是vue下，且内容动态改变的，则能够不用value，直接v-model便可

　　js部分：

var copyDOM = document.querySelector('#input');  
copyDOM.select();
document.execCommand('copy');
copyDOM.blur()

 

　　20、h5页面中判断本地是否装了某app，若有则打开，不然跳转到指定连接。

function openApp (openUrl, callback) {
  //检查app是否打开
  function checkOpen(cb){
      var _clickTime = +(new Date());
      function check(elsTime) {
          if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
              cb(1);
          } else {
              cb(0);
          }
      }
      //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
      var _count = 0, intHandle;
      intHandle = setInterval(function(){
          _count++;        
          var elsTime = +(new Date()) - _clickTime;
          if (_count>=100 || elsTime > 3000 ) {
              clearInterval(intHandle);
              check(elsTime);
          }
      }, 20);
  }
  //在iframe 中打开APP
  var ifr = document.createElement('iframe');
  ifr.src = openUrl;
  ifr.style.display = 'none';

  if (callback) {
    checkOpen(function(opened){
        callback && callback(opened);
    });
    // //客户端检测微信直接跳应用宝连接
    // var browser = BrowserInfo();
    // //使用微连接
    // var encodeUri = encodeURIComponent(openUrl);

    // if (browser.isWeixin) {
    //   window.location.href = '你的微链url&android_schema='+encodeUri;
    // }else{
    
    // }
  }
  document.body.appendChild(ifr);      
  setTimeout(function() {
      document.body.removeChild(ifr);
  }, 2000);  
}

　　用的时候只需像这样（其中openUrl为须要打开app的连接，由app端提供，jumpUrl为须要跳转的指定连接）：

openApp(openUrl, function (res) { 　　if (res == 0) { 　　　　window.location.href = jumpUrl 　　} })