小程序个人常用代码

发表于： 2020年3月26日 2020年3月26日
分类：微信小程序

注：是我自己在开发过程中用到的一些代码，不能算是教程，只是开发过程中做为参考

image mode 的合法值

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

设置text只显示两行

display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

文字单行显示

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

向下的阴影

box-shadow: 1rpx 0rpx 4rpx 1rpx rgba(85, 85, 85, 0.20);

box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值描述测试
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

获取list列表一个点击的item

var item = event.currentTarget.dataset.item;

input 的event事件

var value = event.detail.value;

防止点击穿透

catchtap

强制设置属性值覆盖

width: 100%!important;

设置边框

border: 1px solid rgba(0, 0, 0, 0.2)

设置背景图片，及排列方式
background-size: contain;
background-size: length|percentage|cover|contain;

设置按钮

从右到左的背景渐变
background: linear-gradient(to left,#EA4A12,#D93E2C);

length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

percentage
以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

文字下划线

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式

设置边框固定

box-sizing:border-box;

list数组添加内容

list.push
arrayObj.unshift([item1 [item2 [… [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, … [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回”“。

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

小程序插件使用wx.createSelectorQuery()获取不到节点信息

发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this)

例如:

const query = wx.createSelectorQuery().in(this)
query.selectAll(‘#id-selector’).boundingClientRect()
query.exec(function (res) {
console.log(res)
})

组件向小程序发送event事件

this.triggerEvent("tabChangeListener", detail);

获取当前年月日

function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
————————————————
版权声明：本文为CSDN博主「qq_21937107」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_21937107/article/details/90081443

发送验证码计时60秒

  //计时60秒
  that.setData({
    ver_s:60
  })
  var timer = setInterval(function () {
    console.log(""+that.ver_s); 
    that.data.ver_s--;
    that.setData({
      ver_s:that.data.ver_s
    });
    if(that.data.ver_s<=0){
      clearInterval(timer);
    }
  }, 1000);

上传图片

 wx.uploadFile({
    url: app.url + '/api/v1/upload/UpLoadFiles',
    filePath: path,
    name: 'file',
    header: { 'content-type': 'application/json' },
    formData: {
      'Data': {
        OpenID: app.openid
      }
    },
    success(res) {
      console.log("图片上传成功",res);

    },
    fail(error) {
    }

  });

选择图片

  wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

字符串转double

parseFloat(value)

字符串转int

parseInt(value)

double保留两位小数

value..toFixed(2)

风的影子

420