小程序JavaScript，css常用工具类

2021-02-11 15:03 247人阅读评论(0)

小程序

时间相关

1，获取当前时间（年月日时分秒）

示例：2020年12月30日20时38分

  // 获取当前时间
  _getCurrentTime() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var date = d.getDate();
    var day = d.getDay();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    var ms = d.getMilliseconds();

    var curDateTime = d.getFullYear() + '年';
    if (month > 9)
      curDateTime += month + '月';
    else
      curDateTime += month + '月';

    if (date > 9)
      curDateTime = curDateTime + date + "日";
    else
      curDateTime = curDateTime + date + "日";
    if (hours > 9)
      curDateTime = curDateTime + hours + "时";
    else
      curDateTime = curDateTime + hours + "时";
    if (minutes > 9)
      curDateTime = curDateTime + minutes + "分";
    else
      curDateTime = curDateTime + minutes + "分";
    return curDateTime;
  },

常用工具方法

1，获取4位或者6位验证码

  //获取随机验证码，n代表几位
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  }

JavaScript

数组相关

1，检查数组里的对象是否包含某个字段

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

find()

var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
var ret2 = objArr.find((v) => {
    return v.id == 233;
});
console.log(ret2);
// return {id:233, name:'jobs'}
// 当返回undefined时，则说明objArr中没有，可以添加

findIndex()

var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
var ret2 = objArr.findIndex((v) => {
    return v.id == 233;
});
console.log(ret2);
// return 3
// 当返回-1时，则说明objArr中没有，可以添加了

2，返回数组里符合某个条件的所有对象

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

    let arr = [{
      name: '小石头',
      age: 18
    }, {
      name: '周杰伦',
      age: 38
    }, {
      name: '易烊千玺',
      age: 18
    }]

    let res = arr.filter(item => {
      return item.age == 18
    })
    console.log(res)//返回一个数组，包含所有符合要求的数据
    //打印结果：[{name: "小石头", age: 18},{name: "易烊千玺", age: 18}]   
    let res2=arr.find(item => {
      return item.age == 18
    })
    console.log(res2)//返回一个对象，第一个符合要求的对象
    //打印结果：{name: "小石头", age: 18}

3，快速复制数组，拼接数组

这里直接使用es6的语法来复制数组和拼接数组，操作如下

    let arr = [1,2,3]
    //复制数组
    let arrnew=[...arr]
    console.log(arrnew)//[1, 2, 3]

    //拼接数组
    let arr1=[1,2,3]
    let arr2=[4,5,6]
    let arr3=[...arr1,...arr2]
    console.log(arr3)//[1, 2, 3, 4, 5, 6]

4，查找数组里是否存在某个元素

includes：返回true或者false，true代表存在，false代表不存在
indexOf：返回-1代表不存在，返回

    let arr = [1, 2, 3, 4]
    console.log(arr.includes(3)) //返回true
    console.log(arr.indexOf(3)) //返回2
    console.log(arr.indexOf(0)) //返回-1

Promise相关

Promise.all

同时执行多个Promise,所有的Promise都成功才成功，有一个失败就失败。

所有的Promise都成功时才成功，返回一个数组包含所有Promise的返回值。
只要有一个失败就失败，返回失败的那个Promise返回的值。如果有多个失败时，就返回第一个失败Promise的返回值。

Promise.race

多个Promise同时执行，进行赛跑，返回第一个成功或者失败的Promise的结果值。

小程序样式和css

小程序专有

1wx:for横向布局

display: inline-block;

2解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

.wrap {
  display: inline-block;
  overflow: hidden
	vertical-align: bottom
}

3，遮罩蒙层

wxml

<!--蒙层 -->
<view bindtap='chooseShare' class="mengceng">
  <view class="mengceng-content" >
    <button open-type="share">发送给微信好友</button>
    <button catchtap='onShareAppMessage'>分享到朋友圈</button>
    <button catchtap='chooseShare'>取消</button>
  </view>
</view>

wxss

/* 遮罩蒙层的样式 */
.mengceng {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333333d1;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}
.mengceng-content {
  width: 80%;
  border-radius: 40rpx;
  background-color: white;
}

文字相关

1,文字超出一行显示省略号

// 单行文本
.wrap {
	overflow:hidden;/*超出部分隐藏*/
	text-overflow:ellipsis;/*超出部分显示省略号*/
	white-space:nowrap;/*规定段落中的文本不进行换行 */
}

2,文字超出N行显示省略号

// 多行文本
.wrap {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  *必须结合的属性*
    -webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式  *必须结合的属性*
    -webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
    word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}

3,css实现不换行、自动换行、强制换行

//不换行
.wrap {
  white-space:nowrap;
}
//自动换行
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
//强制换行
.wrap {
  word-break:break-all;
}

4,CSS实现文本两端对齐

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一个块或行的最后一行对齐方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

5,使用伪元素给文字前后加标识

如我们在文字前后加星星

代码如下：

wxml
wxss

这样我们就可以很方便的实现在文字前后加标识了。

button按钮相关

1隐藏button自带样式

如果是在小程序里使用，记得在app.json里把 “style”: “v2” 设置去除掉

<view class='button_item'>
 <button class='button' open-type="feedback">反馈建议</button>
 <view class='right_arrow' />
</view>

// 下面是样式
.button_item {
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 padding: 2px 20px;
 background: white;
 border-bottom: 1px solid gainsboro;
}

.button {
  width: 100%;
  background: white;
  border: none;
  text-align: left;
  padding: 0px;
  margin: 0px;
  line-height: 1.5;
  font-size: 16px
}

/*  下面是关键去除边框 */
.button::after {
  border: none;
  border-radius: 0;
}

Input和textarea相关

1，input和textarea的placeholder设置居中

<input placeholder="你好ipnut啊" placeholder-class="placeholder-class"></input>
<textarea class="textarea" placeholder="你好textarea啊" placeholder-class="center2"></textarea>

/* 
input的placeholder可以直接使用placeholder-class实现居中 */
.placeholder-class {
  text-align: center;
  color: red;
}

/* 
textarea的placeholder如果想居中，只能通过设置textarea的样式text-align: center 
才可以使placeholder居中 */
.textarea {
  margin: 5rpx;
  border: solid 1px gainsboro;
  text-align: center;
}

.center2 {
  text-align: center;
  color: green;
}

图片相关

1高度撑满,图片铺满屏幕

<view class='bg'>
　　<image src='../../imgs/guide.png' ></image>
</view>
//样式
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -99999;
}
.bg image {
  width: 100%;
  height: 90%;
}

//下面是另外一种方法，有时候会有问题
.myMap {
 position: fixed;
 height: 100%;
 width: 100%;
}

2图片宽度自适应

img {max-width: 100%}

flex布局相关

1子元素宽度被压缩

flex-shrink: 0;

2一行多列，九宫格布局

/* 列表 */
.container-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

/* 项目成员 */
.item-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 1%;
  width: 14%;
  height: auto;
}

/* 图 */
.product-photo {
  width: 100%;
  height: 100rpx;
  /* background-size: 100% 100%; */
  /* border: 1px solid rgba(240, 240, 240, 0.8); */
  background: white;
}

/* 文 */
.product-text {
  /* margin: 30rpx 0 30rpx 20rpx; */
  font-weight: bold;
  align-self: flex-start;
  flex: 1 0 auto;
  font-size: 32rpx;
  color: #292929;
}

常用的css画的图形

1,自己画尖头

.right_arrow {
 border: solid black;
 border-width: 0 3px 3px 0;
 padding: 3px;
 position: absolute;
 right: 30px;
 /* margin-left: 66%; */
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}

持续收集更新中。。。。

转载：https://blog.csdn.net/qiushi_1990/article/details/111997916

查看评论

飞道的博客