web前端遇到的坑（bug）！！！

前言：看到这个标题，大家肯定有一定的幻想，我想大家都没想错，我今天就是要来说说我遇到的bug，还有解决的方法。

原生JS篇

1、微信屏蔽链接

• 问题：在微信打开下载链接或某些链接，无法直接通过微信页面直接打开？
• 原因：微信内置浏览器屏蔽了链接，比如竞争对手某宝的链接，当然就不会有其他关于商业性的链接（除了自家的或者合作伙伴的某东的链接）。
• 解决方法：使用原生JS获取浏览器版本号及是否是微信打开，通过UI页面提示用户通过分享使用其他浏览器打开即可。

另外附上判断浏览器及是否是微信的代码：

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

2、使用选择器

• 问题：为什么在选择使用选择器的会优先使用id选择器，而不使用class选择器？
• 原因：如果只有一个的，就用id选择器，这样子性能会比较好，因为是从id选择器开始查找的，id选择器只有一个，有唯一性,如果用类选择器（即class）功耗大，就是查找class会遍历一遍。
• 解决方法：所以优先使用id选择器

3、app下载地址

• 问题：app下载地址在不同的终端会有不一样的下载地址？
• 原因：android/ios的下载地址和平台各不一样，还有pc端代开，所以就是需要进行一些判断。
• 解决方法：第一：要判断是否是PC端。第二：不是PC的，要判断是否是微信的。第三：是微信的，又要判断ios、android和其他。第四：不是PC的也不是微信，又要判断ios、android和其他的

另外附上代码：

//检测浏览器版本
function BrowserVersions() {
  var u = navigator.userAgent, app = navigator.appVersion, ua=navigator.userAgent.toLowerCase();
  return { //移动终端浏览器版本信息
    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, //是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, //是否iPad
    weixin: ua.match(/MicroMessenger/i)=="micromessenger"//微信浏览
  };
}
//点击下载
function downLoad(){
  var v = BrowserVersions();
  var btn = document.querySelector('#J_btn');
  var ua = navigator.userAgent.toLowerCase();
  btn.addEventListener('click',function(){
    var url = '';
    if(IsPC()){//如果是PC端，则跳到网站
      	url = web网站地址
    }
    else{//不是PC端的情况
      if (v.weixin) {//在微信下的情况
        if (v.iPhone || v.iPad) {//在ipad和iphone的下载地址
          url = iphone下载地址
        }
        else if (v.android) {//在android的下载地址
          url = android下载地址
        }
        else {//其他的情况跳到手机网页版并读
          url = 手机端web版网页
        }
      }
      else{//不在微信下的情况
        if (v.iPhone || v.iPad) {//在ipad和iphone的下载地址
          url = iphone下载地址
        }
        else if (v.android) {//在android下的下载地址
          url = android下载地址
        }
        else {//其他情况跳到手机网页版并读
          url = 手机web版地址
        }
      }
    }
    window.location.href = url;
  },false);
}

//是否是pc端
function IsPC()
{
  var userAgentInfo = navigator.userAgent;
  var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
  var flag = true;
  for (var i= 0; i< Agents.length; i++) {
    if (userAgentInfo.indexOf(Agents[i]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}

4、闭包及作用域

• 问题：在未知轮播图多少张情况下，设置轮播图跳转到第几页，直接添加点击事件无效？
• 原因：遍历传输的i变量值无法取值
• 解决方法：通过设置闭包，就能访问变量的值

另外附上代码：

for(var i=0;i<box.length;i++){       
    box[i].onclick = function(i){
	      return function(){
	        mySwiper.swipeTo(i,500,true);
	      }
	 }(i);
}	 

5、实现对btn集合进行点击回调

• 问题：多个btn无法进行点击回调？
• 原因：多个相同的class的btn, 点击了无法判断具体是那个btn进行回调
• 解决方法：通过遍历点击btn进行回调

另外附上代码：

function downLoad(){
  var v = BrowserVersions(),
       btn = document.querySelectorAll('.dl-btn'),
       ua = navigator.userAgent.toLowerCase(),
       url = '';
  	  for (var n = 0; n < btn.length; n++) {
	    	btn[n].addEventListener('click',function(){
			      if(IsPC()){//如果是PC端，则跳到并读官网
			       		url = 跳转地址
			      }
		    }
	  }
}	

6、JS变量

• 问题：全局变量和局部变量作用域？
• 原因：全局变量和局部变量作用域不一样
• 解决方法：通过以下例子理解

局部变量(在函数内部声明)

 function(){
     var carName="vovo"
     //只有此处可调用
   }

全局变量(在函数外部声明)

var carName="vovo"
   //此处可调用
   function(){
   //此处可调用
   }

特殊的全局变量（在函数内部，没有用var来声明）

//此处可调用
function（）{
   carName ="vovo"
   //此处可调用
}

6、break 和continue的区别

• break表示跳出距离它最近的当前循环，break后的语句将不再执行。
• continue表示中断循环中的迭代，还会继续执行循环，就是那一条会消除。

7、首屏无法滚动

• 问题：页面加载进来，首屏无法进行滚动？
• 原因：首屏无法识别内容
• 解决方法：设置一个定时器，让首页滚动1px

另外附上代码：

setTimeout(function(){
	//滚动1px
},500)

8、Js默认行为方法、遍历、浏览器方法

• e.stopPropagation(); // 防止冒泡事件
• for( o in data){} // 遍历
• history.back(); // 返回上一页

9、闭包的理解

• 在函数内，又有另外一个函数。
• 在函数内的局部变量，而另外一个函数想用到这个变量，就形成了闭包。
• 缺点导致内存泄漏。

附上代码：

function box(){
     var age = 100;
     return function(){          //匿名函数
           age++;
           return age;
     }
}
var b = box();
alert(b());
alert(b());    //即alert(box()())；
alert(b());
alert(b);            
//     function () {
//   age++;
// return age;
//       }
b = null;  //解除引用，等待垃圾回收

10、获取音乐播放媒体

• 问题：使用jq直接获取音视频的id，无法使用？
• 原因：H5的音视频需要用原生的写法才能获取。
• 解决方法：使用原生获取id方法

代码：

var audio = document.getElementById('J_music');

11、倒计时

• 问题：后端传回倒计时时间戳，前端进行倒计时设置，无法计算时间戳？
• 原因：时间戳需要进行转换为时间。
• 解决方法：Math.floor()

代码：

Math.floor(t/1000/1000/60/24)//求小时
Math.floor(t/1000/1000/60)//求分钟
Math.floor(t/1000/1000)//求秒

12、获取url的参数

代码：

//返回url参数
function returnParam (url){
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // 正则
   var r = window.location.search.substr(1).match(reg);
   if (r != null){ 
   		return unescape(r[2]); 
   }else{		
   		return "";
   }		
}

13、获取当前域名

window.location.href.split('/')[2]

14、兼容模式

document.compatMode == "CSS1Compat" //兼容模式开启
document.compatMode == "BackCompat" //兼容模式关闭

14、js操作属性的方法

• getAttribute原生js各种属性的值查询
• setAttribute设置js各种属性的值
• removeAttribute移除js各种属性的值

15、return的作用

• return true;//返回正确的处理结果
• return false;//返回错误的处理结果，终止处理
• return;把控制权交回给页面

16、对url进行转义加密方法

encodeURIComponent（）

17、正则表达式

• 符合6-12位数字、英文字母或标点符号正则

return str.match(/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\:\;\,\?\_\+\~]{6,12}$/) ? true : false;

解释：

• ‘@A-Za-z0-9’代表大小英文字母和数字。
• ‘!#…’代表标点符号。
• ‘{6,12}’代表6-12位。

18、图片预加载

• 意义：设置加载层，让图片加载完成后，再进入页面，这样能提高用户体验。

19、重复点击按钮多次请求

• 问题：重复点击或多次点击按钮，请求接口，导致访问过多？
• 原因：每一次点击都去请求接口。
• 解决方法：
  第一种，可以通过给button标签添加disabled属性。
  第二种，定义一个全局参数flag，默认为true，根据flag对错进行判断是否请求接口。在请求的之前设置flag为false,请求成功之后再设置为true。

20、empty()删除匹配元素的所有子集

21、confirm()确认信息弹出框

• confirm(‘标题’); //会返回true或false.
  值为true,表示同意，false表示不同意。

22、苹果手机不能自动播放音乐bug

• 问题：苹果手机在自动播放音乐是无效的，安卓手机是可以的？
• 原因：苹果手机对自动播放暂时不是很支持
• 解决方法：a、通过触摸事件来播放音乐 b、进入先禁用音乐

触摸事件播放音乐

 // 播放音频
var myAuto = document.getElementById('J_audio');
myAuto.play();
 
// 解决ios自动播放音乐
var audioAutoPlay = function(){
 
play = function(){
myAuto.play();
document.removeEventListener("touchstart",play, false);
};
myAuto.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
 
audioAutoPlay();

23、canvas曝光功能

代码：

createRevertPic: function (){
var c = commonCtx.getImageData(0, 0, commonImg.width, commonImg.height);
       //chrome浏览器报错，ie浏览器报安全错误信息，原因往下看
for(var i = 0; i < c.height; ++i){
for(var j = 0; j < c.width; ++j){
var x = i*4*c.width + 4*j,  //imagedata读取的像素数据存储在data属性里，是从上到下，从左到右的，每个像素需要占用4位数据，分别是r,g,b,alpha透明通道
r = c.data[x],
g = c.data[x+1],
b = c.data[x+2];
            
//图片亮度：
c.data[x] = r*1.1;
c.data[x+1] = g*1.1;
               c.data[x+2] = b*1.1;
}
}
commonCtx.putImageData(c, 0, 0);
expoImgUrl = commonCanvas.toDataURL('image/jpeg',1);

24、在手机上touch事件不够灵活

• 问题：对box移动不够方便？
• 原因：移动小雪人的是用touchstart 和 touchend事件，可能touch事件对安卓手机的支持不好导致。
• 解决方法：我将touchstart、touchend事件 和 click事件同时加上去，使得事件灵活起来。

25、touchmove事件导致屏幕移动

• 问题：touchmove导致屏幕移动？
• 原因：touchmove本身会移动屏幕
• 解决方法： touchmove事件下面加一个event.preventDefault();//阻止发生默认行为

26、软键盘弹出导致页面变形挤压

• 问题：软键盘弹出导致页面变形会导致挤压？
• 原因：安卓手机默认浏览器内核 和 苹果手机默认浏览器内核不一样 软键盘弹出导致就不样。
• 解决方法：想要让默认页面不变形，就要页面保持一样的高度，就是在页面加载的时候，获取它的高度，在重置的时候再获取它的高度。

代码：

// 解决输入框挤压页面问题
        var winH = $(window).height();
 
        $(window).resize(function(){
 
            var thisH = $(this).height();
            if(winH - thisH > 50){
 
                $('body').css('height',winH + 'px');
            }else{
 
                $('body').css('height','100%');
            }
        });

JQ篇

1、实现列表内容折叠和展开

• 默认第一个列表处于展开状态
• 点击当前列表则为展开，其他为折叠。

代码：

$('.resume-list li').find('.jop-content').hide();//让所有.jop-content先隐藏先   //这个要注意
$('.resume-list').each(function(){//对每个页面进行操作
      var first=$(this).find('li').eq(0);//获取每个页面第一li的值
      first.find('.jop-content').show();//让每个页面的第一个li下的.jop-content默认展开
      first.find('.resume-slidetoggle').html('-')//让每个页面的第一个li下的.resume-slidetoggle的内容变成-
 	  $(this).on('click','.resume-slidetoggle',function(){//点击.resume-slidetoggle事件
          var cont=$(this).closest('li').find('.jop-content')//获取.jop-content  //这个要注意
	       if($(this).html() == '+'){//判断.resume-slidetoggle内容是+，执行以下动作
	                cont.slideDown();//.jop-content向下显示
	                $(this).html('-');//.resume-slidetoggle变-
	         }else{
                cont.slideUp();//.jop-content向上隐藏
                $(this).html('+');//.resume-slidetoggle变-
             }
         });
       })

2、让滚动条进行滚动

• html设置属性 data-id
• js获取id,则让其滚动

$('.nav li').on('click',function(){
           var  id = $(this).attr('data-id');
           var  st = $('#'+ id).offset().top;
           roll(st);
      });

3、让页面滚动到初始位置

$('body,html').scrollTop(0);//让它页面始终在最上面

4、 事件委托

• 当点击的对象是动态添加的，就需要用到事件委托进行绑定事件。

$('.orgin-wrap,.escape-wrap').on('click','#J_next',function(){

 });

5、jq利用data-value进行传值操作

• 在html中使用

  	<div id="J_id" data-value="111"></div>
  

• 在js中获取

  	var val = $('J_id').attr('data-value');
  

VUE篇

1、vue项目兼容ie10

• 问题：vue项目在ie10打开不兼容，页面有报错？
• 原因：vue项目不兼容ie10及以下
• 解决方法：添加babel-polyfill插件，但它仅仅支持ie10及以上浏览器，ie8及以下不支持（vue不支持）

2、iview后台管理系统进行权限管理流程

• 后端返回权限控制菜单列表和按钮显示列表
• 前端在路由直接通过接口控制显示菜单（这个是admin-iview专属的）
• 通过对meta进行设置权限属性access

3、百度地图的使用

• 先在百度地图注册，拿到开发者账号及ak码。在页面引入url加入自己的ak码

• 再根据api初始化中心点

  that.map.centerAndZoom('北京天安门'，12);
  

• 最后可以根据关键字搜索地图位置。

  const  keys = '北京天安门'
  that.local.search(keys);
  

4、vue中根据rules给表单设置验证规则

• 在标签设置

<Form :model="formData" :rules="rules" ></Form>

• 在props设置验证规则

props:{
	posterPicRules: {
		type: Array,
		default: () => {
			return [
				{
					required: true, message: '活动背景图不能为空', triggeer: 'blur'
				}
			]
		}
	}
}

• 最后把规则返回到computed

computed: {
	rules （）{
		return {
			posterPic: this.posterPicRules
		}
	}
}

微信小程序篇

1、富文本html返回给小程序前端

• 问题：后台返回给前端小程序的html，在前端是无法识别并展示的？
• 原因：微信小程序只识别的标签，没有div/p/b，只有view等标签，所以要对html标签进行转换
• 解决方法：使用wxParse插件

2、微信小程序使用腾讯视频插件进行做列表功能

• 问题：腾讯视频列表，如果一次使用腾讯视频插件渲染到页面，会导致请求腾讯视频请求过多？
• 原因：因为腾讯视频组件会根据链接直接请求腾讯视频
• 解决方法：

•   	1、先加载一个列表，给一个视频的预览图，点击图片再加载视频。 用属性wx:if进行渲染腾讯视频组件
  

•   	2、视频的预览图，腾讯有个专属链接http://vpic.video.qq.com//'+  txid  + '_ori_1.jpg'  组成预览图
  

3、radio组件在列表更新时选中状态不变

• 问题：radio组件在列表更新时选中状态不变 ？
• 原因：radio列表不会自动更新，所以要根据索引更新
• 解决方法：增加 checked="{{index.checked}}"

4、图片地址不能直接使用assets文件夹里面的

• 问题：在个别机器里面会不显示图片
• 原因：路径不对，读取不到
• 解决办法：图片上传到公共库里面，直接获取公共库里面的图片地址

5、日期解析有误，导致苹果切换NaN

• 问题：切换日期，苹果手机有问题
• 原因：new Date(传入年月)报错
• 解决办法：new Date(必须传入年月日)，必须传入年月日三个时间

6、canvas同一个id更新不一样的背景或绘画会更新不了

• 问题：canvas同一个id更新不一样的背景或绘画会更新不了
• 原因：微信canvas对id只使用一次，再更新需要卸载canvas
• 解决办法：
  1、可以多个canvas的id，根据不同的画布切换
  2、使用最新的wx.createSelectorQuery方法

  const query = wx.createSelectorQuery().in(this)
  query.select(`#${canvasId}`)
        .fields({   			// 需要获取的节点相关信息
          node: true      // 是否返回节点对应的 Node 实例
        }).exec( (res) => {
        	  const width = 100px
        	  const height = 200px
        	  const src  = ''
            const canvas = res[0].node 
            const ctx = canvas.getContext('2d')
    		  canvas.width = width
    		  canvas.height = height
    		  // 背景图
    		   const bgImg = canvas.createImage()
  	       bgImg.src = src
  	       bgImg.onload = () => {
       	    	ctx.drawImage(bgImg, 0, 0, width, height)
  	       }
    })
  

7、微信小程序showToast跟hideLoading会冲突

• 问题：微信小程序showToast与hideLoading冲突
• 原因：微信原生bug
• 解决办法：1、将showToast放到最后，hideLoading 2、或者将hideLoading加setTimeout延时处理

uniapp篇

1、app的唯一标识 uuid使用

2、打包后需要使用百度/高德地图定位，使用用到key

HTML篇

1、移动端meta

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

2、在input中type类型为button时直接启动js程序

3、其他meta

  <meta name="HandheldFriendly" content="true">//针对手持设备优化
    <meta name="HandheldFriendly" content="320">//微软老式浏览器
    <meta name="screen-orientation" content="portrait">//uc强制竖屏
    <meta name="x5-orientation" content="portrait">//qq强制竖屏
      <meta name="full-screen" content="yes">//uc强制全屏
    <meta name="x5-fullscreen" content="true">//qq强制全屏
    <meta name="browsermode" content="application">//uc应用模式，优先进行h5页面
    <meta name="x5-page-mode" content="app">//qq应用模式

CSS篇

1、tab页面

• 问题： tab页面多个页面，个别页面没有滚动条。
• 原因：个别页面内容过少，导致没有内容。
• 解决方法：在body上面加上全部都有滚动条的样式。

代码：

body{ overflow-y:scroll;}

2、css编写的顺序

口诀：先结构， 后渲染 再其他

• 位置属性(position, top, right, z-index, display, float等)
• 大小(width, height, padding, margin)
• 文字系列(font, line-height, letter-spacing, color- text-align等)
• 背景(background, border等)
• 其他(animation, transition等)

3、css3动画的编写

• 先定义动画

  @-webkit-keyframes bounceInTop{
  0%{opacity:0.3;-webkit-transform:translateY(0)}
  50%{opacity:1;-webkit-transform:translateY(5px)}
  100%{opacity:0.1;-webkit-transform:translateY(10px)}
  }
   
  @-moz-keyframes bounceInTop{
  0%{opacity:0.3;-moz-transform:translateY(0)}
  50%{opacity:1;-moz-transform:translateY(5px)}
  100%{opacity:0.1;-webkit-transform:translateY(10px)}
  }
   
  @keyframes bounceInTop{
  0%{opacity:0.3;transform:translateY(0)}
  50%{opacity:1;transform:translateY(5px)}
  100%{opacity:0.1;-webkit-transform:translateY(0)}
  

• 再使用动画。

  -webkit-animation:bounceInTop 2s infinite;
  -moz-animation:bounceInTop 2s infinite;
  animation:bounceInTop 2s infinite;
  

4、 精灵图/雪碧图

• 先设置一个公共类引入图片链接

  .foot{background:url(../images/foot.png);}
  

• 再设置其他类class

  .foot.foot-one{background-position:0 0;background-color:#fff;}
  .foot.foot-two{background-position:0 -3px;}
  .foot.foot-three{background-position:0 -6px;}
  .foot.foot-four{background-position:0 -9px;}
  .foot.foot-five{background-position:0 -12px;}
  .foot.foot-one,.foot.foot-two,.foot.foot-three,.foot.foot-four,.foot.foot-five{width:100%;height:3px;
  -webkit-background-size:5px 15px;
  -moz-background-size:5px 15px;
  background-size:5px 15px;
  background-repeat:repeat-x;}
  

5、媒体查询

• 主要作用根据不同的屏幕进行不一样的样式设置

@media  screen and (min-width:0\0){ //针对IE浏览器写的样式
    例子
}

6、banner图在不同浏览器居中

.banner{position: absolute;top:0;left:50%;z-index:1;margin-left:-960px;width:1920px;height:420px;overflow:hidden;}

7、控制子集的隐藏和出现

// 给父集增加或减少类.active，.vote-bar为子集
.active .vote-bar{display:block;}

8、动画属性

• 让动画保持到最后一帧。

animation：forwards

• step-end 直接切换到最后一帧动画。

animation: loading 1s step-end infinite -4s;

• animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。both 向前后都被应用

9、溢出隐藏

• overflow-x: hidden; overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

10、Web移动端Fixed布局的解决方案

• ios点击输入框，那些header、footer的fixed定位会跳到上面的bug
  将中间部分的content定位为absolute；

SASS篇

1、前端自动化构建sass

第一、安装环境
a、nodejs
安装方法：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html
b、ruby
c、gulp
安装参考http://www.dbpoo.com/getting-started-with-gulp/
d、sass参考网站：http://www.sass.hk/install-sass.html

第二、问题遇到没查找到gulp-sass的问题，可以在本地安装gulp-sass文件即可解决 命令 npm install gulp-sass --save-dev

2、sass规范

a、注释，html、css、js都要分层次注释好
b、命名要规范，不能随便起名字
c、sass嵌套多层，不能超过3层
d、js少用类选择器，多用id选择器，对于重用的比较多的，可以选择用类选择器，因为id选择器是最快的，id只有一个，使用类却要遍历，就会耗费时间
e、js中，如果用到的对象次数比较多，应该用变量将它获取出来，再利用变量进行
f、sass在.scss文件的文件名前加‘_’到输出的css就不会被输出.

3、sass用法

a、!default;在之前没有定义，就会使用这个值，否则不使用

eg:
 $color: blue;
 $color: red !default;//在之前有定义
 color: $color;//输出为blue   

b、多个变量一起定义(通过nth()来选择)

eg: 
   $color: red blue !default;
    color: nth($color,1);//red
    color: nth($color,2);//blue

c、for的两种方式 @for $var from through 和@for $var from to;
eg:

① @for $i from 1 through 10{
         .span#{$i}{
            width: 100px*$i;
         }
      }
      ②@for $i from 1 to 10{
         //用法同上
      }

d、each方式 each $var in

e、自定义函数

function first($list){
    @return nth($list,1);
}
function last($list){
   @return nth($list,length($list));
}
$list: red blue pink;
color: first($list);//返回red
background-color: last($list);//返回pink

f、for from in 和 for from through

@for $var from in
//input
@for $i from 5 to 1{
   .span:nth-child(#{6-$i}){
      content: $i;
   }
 
}
//output
.span:nth-child(1){
   content: 5;
}
.span:nth-child(2){
   content: 4;
}
.span:nth-child(3){
   content: 3;
}
.span:nth-child(4){
   content: 2;
}

g、@for $var from through
//input

@for $i from 5 through 1{
   .span:nth-child(#{6-$i}){
      content: $i;
   }
}
 
//output
.span:nth-child(1){
  content: 5;
}
.span:nth-child(2){
  content: 4;
}
.span:nth-child(3){
  content: 3;
}
.span:nth-child(4){
  content: 2;
}
.span:nth-child(5){
  content: 1;
}

h、@for from $var to 与@for from $var through的区别
@for from $i5to1输出的$i只会从5-2不会到1
相反@for from $i5through1输出的$i会到1
详情如上面例子

I、@each in

 a、@each $name1,$name2,$name3 in $name{
      .#{ $name}-icon{
        background-color: red;
        border: 1px solid #000;
      }
  }
  b、$animals: (name1,red,default),
               (name2,pink,pointer),
               (name3,purple,move);
     @each $name,$color,$cursor in $animals{
       .#{$name}{
         background-color: red;
         border: 1px solid #000;
       }
     }

SUI篇

1、SUI的路由跳转要在服务器上，才能跳转

• 引入jq和SUI的会冲突

2、是什么问题：sui在页面上用加载中page，安卓手机按返回键导致一直在加载中动画中？

• 为什么：因为sui是多个页面组成的，安卓导致返回上一页id，所以动画一直加载
• 怎么办：解决办法，在页面去掉正在加载的页面，用js上的加载中图标

SVN篇

1、问题：svn更新到一半终止导致出现locked问题。

• 解决办法： cleanup -选break locks-再清理即可

uniapp篇

1、官方操作

2、安装 cross-env

3、可以进行yarn install

4、打包上线配置manifest.json中的h5选项

“h5”: {
“title” : “名字”,
“publicPath”: “./”,
“router” : {
“mode” : “hash”,
“base” : “/h5”
}
}

5、添加weixin.js.sdk放在本地开发依赖devDependencies

6、问题： 安卓手机对"\n"换行符不够兼容，出现canvas水印，文字只出现第一行。
解决办法：用其他字符代替"\n"，用"*"代替。