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 i 5 t o 1 输 出 的 i 5 to 1 输出的 i5to1i只会从5-2不会到1
相反@for from i 5 t h r o u g h 1 输 出 的 i 5 through 1 输出的 i5through1i会到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",用"*"代替。

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

KEN卓越

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值