小程序JavaScript,css常用工具类

小程序

时间相关

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;
  },

2,小程序 wxml里时间戳转日期

  • 1,在utils文件夹里添加名为filter.wxs的文件(命名可以随便),如下图

    在filter.wxs文件里添加下面的代码
// 在wxml里调用
formatNumber = function (n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
/**
 * 将时间戳格式转为 yyyy年MM月dd日hh时mm秒 格式
 */
var formatDate = function (datetime) {
  var date = getDate(datetime);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();

  var time = year + '年' + formatNumber(month) + '月' +
    day + '日' + formatNumber(hours) + '时' + minutes + '分'
  return time;
}
module.exports = {
  formatDate: formatDate
}
  • 2,test.wxml里写下面的代码。注意src里改成自己的文件路径
<!--导入时间格式化工具filter.wxs-->
<wxs src="../../utils/filter.wxs" module="filters" />
  • 3,需要转换的地方,写下面的代码。
<text >{{filters.formatDate(item._createTime)}}</text>

效果图如下

常用工具方法

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;
  }

云开发相关

1,返回随机个数的数据

 wx.cloud.database().collection('questions')
      .aggregate()
      .sample({
        size: 5 //随机获取几道题,比如这里随机返回5道题
      })
      .end()
      .then(res => {
        console.log("随机题库", res)
      })

如我请求两次,返回的题目是随机不一样的

2,判断云数据库里的数组字段是否包含某个值

2-1,包含

这个很简单,直接
数组字段:你要查询的值
如下图

2-2,不包含

3,多条件模糊搜索查询

3-1,多条件模糊搜索

3-2,价格大于10并且小于100

3-3,查询城市或者地址里包含 北京 并且门票价格在10到100之前的景点

db.collection('scenicSpot').where(
          // 地点和价格同时满足
          _.and([
            // 地址或地点满足一个就行
            _.or([{
              place: db.RegExp({
                regexp: place,
                options: 'i'
              })
            }, {
              address: db.RegExp({
                regexp: place,
                options: 'i'
              })
            }]),
            // 价格在10到100
            _.and([{
                price: _.gt(10)
              }, {
                price: _.lt(100)
              }

            ])

          ])
        ).get()
        .then(res => {
          console.log('筛选结果', res)
          this.setData({
            list: res.data
          })
        })

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

5,将数组按照某个字段进行分组

源数据为

[{
	type: '早餐',
	name: '馒头',
	price: 2
},
{
	type: '早餐',
	name: '油条',
	price: 3
},
{
	type: '午餐',
	name: '宫保鸡丁',
	price: 20
},
{
	type: '午餐',
	name: '鱼香肉丝',
	price: 22
}]

想把上面的无序数据进行分组。如想把早餐,午餐分组,转换后如下。

[{
	"type": "早餐",
	"list": [{
		"type": "早餐",
		"name": "馒头",
		"price": 2
	},
	{
		"type": "早餐",
		"name": "油条",
		"price": 3
	}]
},
{
	"type": "午餐",
	"list": [{
		"type": "午餐",
		"name": "宫保鸡丁",
		"price": 20
	},
	{
		"type": "午餐",
		"name": "鱼香肉丝",
		"price": 22
	}]
}]

所用的方法如下

  /**
   对数组进行分组,
   dataList是要分组的源数组
   key: 依据那个字段进行分组
   */
  groupArr(dataList,key) {
    let tempArr = []; //临时数组
    let endData = []; //最终数组
    dataList.forEach(item => {
      if (tempArr.indexOf(item[key]) === -1) {
        endData.push({
          type: item[key],
          list: [item]
        });
        tempArr.push(item[key]);
      } else {
        for (let j = 0; j < endData.length; j++) {
          if (endData[j].type == item[key]) {
            endData[j].list.push(item);
            break;
          }
        }
      }
    })
    return endData
  }

注意事项:使用的时候,分组的依据字段要加引号。如下,我们要依据type字段进行分组

groupArr(dataList,'type')

结果如下

对象相关

1,复制对象的属性到另外一个对象

方法:Object.assign()
如下图所示,把对象b的属性复制到对象a

2,删除对象里无用字段

直接 delete 对象.属性名 就可以删除对象的属性了
如下图所示,把对象a的age和city属性删除了

Promise相关

Promise.all

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

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

Promise.race

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

小程序样式和css

flex布局相关

1,常用属性(如居中)

  /* 上下居中 */
  align-items: center;
  /* 左右居中 */
  justify-content: center;
  /* 竖着排列 */
  flex-direction: column;

2,子元素宽度被压缩

flex-shrink: 0;

3,一行多列,九宫格布局

/* 列表 */
.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;
}

小程序专有

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;
}

scroll-view相关

1,滑动到顶部

 wx.pageScrollTo({
        scrollTop: 0
      })

图片相关

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%}

常用的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);
}

持续收集更新中。。。。

编程小石头 Python PHP MySQL
码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。编程小石头和你一起快乐的学编程。
相关推荐