移动端H5开发的一些经验与小技巧(持续更新)

目录

前言

当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是我们要兼容微信、app、ios、android... 
今天就给写几个平常开发经常会遇到的问题以及解决办法。

初入前端，若有不足 欢迎指正！

1. audio标签问题

  一般要添加背景音乐的话，我们的第一反应就是使用audio标签，但是这里有一个坑。如果你的项目是一进页面就要播放音乐的话，audio标签在
  微信端是不生效的。
  这时候我们可以添加如下代码：

	document.addEventListener("WeixinJSBridgeReady", function () {
		audioAutoPlay(‘XXX’);//给一个全局函数
	},false);
	//兼容ios微信不能一打开就播放音乐
	function audioAutoPlay(id){ //全局控制播放函数
		var audio = document.getElementById(id),
		    play = function(){
			audio.play();
	    document.removeEventListener(“touchstart”,play,false);
		    };
		audio.play();
		document.addEventListener(“touchstart”,play,false);
	}

原理：

• 我们给一它一个全局的函数，自动执行一次就可以了。

2. video标签问题

说完audio，我们来说一下video。这个video有很多坑。

a. 视频格式。

这个很少出问题，不多解释，有问题一般都是编码格式不对，自己转换一下就可以了。

b. ios11 下功能不可用。

这个情况暂时我只是知道ios11系统有这个问题。解决方案也很简单：
弄一张缩略图放上去，控制播放和暂停的事件写在图片上面就能解决

c. app里面不能控制随心所欲的控制视频的播放和暂停。

解决办法：

var video=$("#video")[0];
    	$("#video").click(function(){
        	      if($(this).hasClass("pls")){
                        video.play();
        	      }else{
                        video.pause();
        	}
        	$("#video").toggleClass("pls")
    	})

如果出现这种情况的话，我们就不能使用系统自带的控制播放和暂停的功能了，需要我们自己封装一段控制播放和暂停的方法出来。

d.微信端自动播放

<!-- 必须加在微信api资源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
  //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
  document.getElementById('car_audio').play(); 
  //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
  document.addEventListener("WeixinJSBridgeReady", function () { 
      document.getElementById('car_audio').play(); 
      document.getElementById('video').play(); 
  }, false); 
    //若是还不能解决，换成这样
    document.getElementById('video2').play();
    wx.getNetworkType({
         success: function (res) {
         console.log('res is',res);
	         document.getElementById('video2').play();
         }
     });
</script> 

3. 弹出键盘问题

ios手机弹出键盘有时候会遮住输入框，给人一种很不爽的体验，但是这种情况很少出现。下面简单介绍一下解决办法：

	keyboardEvent:function($footer,winHeight){
	//这里默认软键盘的高度小于屏幕高度的二分之一
	$(window).resize(function(){
		var currentWinHeight = $(window).height();
		if(isInputsFocus($(‘input’)) && currentWinHeight < winHeight/1.2){
			//键盘弹出
			$footer.hide()
		}
		if(currentWinHeight >= winHeight/1.2){
			//键盘收起
			$footer.show()
		}
	});
}
Var isInputsFocus = function($inputs){
	if($inputs && $inputs.length > 0){
		for(var i=0;i<$inputs.length;i++){
			if($($inputs[i].is(“:focus”))){
				return true
			}
		}
		return false
	}
	return false
}

这段代码可以直接使用。

4. 获取文档滚动高度

常用的获取方式是 document.documentElement.scrollTop 但是在手机上不生效。查了好久也不知道哪里有问题。后来偶然发现document.body.scrollTop 就生效了，但是PC又不行了，所以建议大家做一下判断
###5.zepto获取select文本
我们平常使用的是

$("#select").val()//获取option的value值；
$("#select").find("option:selected").text()//获取option的文本

但是在使用zepto的时候竟然报错。研究好久不晓得是什么原因。后来查了下zepto的api 发现获取方法改了。现在是

$("#select option").not(function(){ return !this.selected }).val()//获取value值
$("#select option").not(function(){ return !this.selected }).text()//获取文本值

5. swiper图片超出父级盒子

给img添加

img{max-width:100%;max-height:100%}

6. 判断手机类型

window.onload = function () {
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
        phoneType = 0;
    } else if (u.indexOf('iPhone') > -1) {//苹果手机
        phoneType = 1;
    } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
        phoneType =2;
    }
};

7. 帧动画的简单实现

var timeout = 1000; //每隔100ms
var index = 1;
var am,
  am = setInterval(function () {
      if (index >= $(".roll").length) {
          $(".roll").removeClass("run");
          clearInterval(am);
          $('.goinfo').removeClass('hide');
              console.log('res enter');
      } else {
          $(".roll").eq(index++).addClass("run");
      }
  }, timeout);

8. 判断手机系统版本

//ios 
      var myua = window.navigator.userAgent.toLowerCase();
      var ver = myua.match(/cpu iphone os (.*?) like mac os/);
      if (ver) {
        console.log("你当前的Ios系统版本为：" + ver[1].replace(/_/g, "."));
        let verNumber = ver[1].replace(/_/g, ".");
        if (verNumber.search(/^10./) > -1) {
          // ios10
        } else if (verNumber.search(/^9.|^8./) > -1) {
           // ios9 / 8
        }
    };

  ///android
      var myua = window.navigator.userAgent.toLowerCase();
      Var version = null;
      if(myua.indexOf("android") > 0){
	var reg = /android [\d._]+/gi;
          var v_info = ua.match(reg);
          version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); 
	console.log(“你当前的Androis系统版本为：” + version)
      }

9. 判断当前是否为微信环境

var myua = window.navigator.userAgent.toLowerCase();
if (myua.match(/MicroMessenger/i) == 'micromessenger' || myua.match(/_SQ_/i) == '_sq_') { // 微信环境}

10. 生成多个随机数

//已知总数和随机数个数，获取随机数
function getrandom(minnum , maxnum ,tatol,size){
var num = tatol; //定义整数
var length= size;  //定义多个整数的数量
var numArr = [];
while(length > 1){
    var rnd = Math.floor(Math.random() * num); //通过JS的随机函数生成随机数
    num -= rnd;
    numArr.push(rnd);
    length --;
}
numArr.push(num);
//console.info(numArr);
return numArr;
}

11. 安卓手机软键盘遮挡问题

最近发现使用swiper的时候 如果在某一个slide 里面有通过定位(postaion)展示在页面下半部分的input时, 获取焦点弹出的软键盘会遮挡输入框,看不到输入的内容. 这是安卓手机内部机制问题, 需要我们稍微做下处理

// 全局添加这一行代码即可(需要jquery || zepto)
$('body').height($('body')[0].clientHeight);

12. 全局标签优化

html,body{

overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/

position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}

13. 多行省略

.overflow-hidden{
    display: box !important;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行出现省略号*/
    /*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}

14. CSS禁用鼠标事件

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

15. flex布局 子元素高度100%不生效

/** 父元素：align-items: stretch; 
子元素： height: auto; **/
.flex-wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  .flex-item {
    height: auto;
  }
}