h5 前端开发小知识

1、设置字体

body{
   font: italic small-caps bold 14px/24px "microsoft yahei";
}

字体：斜体 小型大写字母 粗体 14号大小/24像素行高 [微软雅黑]

2、文本溢出省略号
单行文本

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 行数
overflow: hidden;

3、vue中字符串拼接
普通语法

 :title1="'字符串' + titFontSize"
:class="'字符串'+item.picurl"

for循环中拼接背景图片

<ul>
    <li class="imgStyle" v-for='item in items' :style="{background:'url('+item.imgURL+')'}"></li>
</ul>

Es6模板字符串

:class="`字符串${item.name}`"

require+模板字符串

:src="require(`./assets/logo${index}.jpeg`)" 

4、less 函数 设置px转vw函数

@vm_base: 750;
.vw (@px) {
  @vw: (@px / @vm_base) * 100vw;
}
.vux-header {
  .vw(30);
  padding: @vw;
}

5、sass函数 设置px转vw函数

$vm_base: 750;
@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}
.vux-header {
  padding: vw(30);
}

6、设置状态栏的颜色

function plusReady() {
// 设置系统状态栏背景色
var type = plus.os.name;
  if(type == "iOS") {
    plus.navigator.setStatusBarBackground("#368CBD");
  } else {
     plus.navigator.setStatusBarBackground("#009dff");
  }
}
if(window.plus) {
  plusReady();
} else {
   document.addEventListener("plusready", plusReady, false);
}

7、断点

debugger

8、忽略文件 .gitignore

.gradle/   //忽略.gradle文件夹下的所有文件
*.iml     // 忽略所有的 .iml文件
.idea/workspace.xml     // 忽略某个指定文件

9、h5plus设置安卓底部虚拟按键背景颜色

function plusReady(){
    var main = plus.android.runtimeMainActivity();
    var windowMe = main.getWindow();
    plus.android.importClass(windowMe);
    var Color = plus.android.importClass("android.graphics.Color");
    //如parseColor("#ffffff")设置为白色
    plus.android.invoke(windowMe,"setNavigationBarColor",Color.parseColor("#ffffff"));
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

10、meta标签来控制不让浏览器发送referer

<meta content="never" name="referrer">

a标签设置rel="noreferrer"不发送referer
如果a标签设置了target=“_blank”一定要增加rel="noreferrer nofollow noopener"来堵住钓鱼安全漏洞。如果在a标签上使用了target=“_blank”，并且不加上rel="noopener"属性，那么就是让用户暴露在一个非常简单的钓鱼攻击之下。

<a href="xxx" rel="noreferrer nofollow noopener" target=“_blank”>xxx</a>