每周技术记录（一）

第一次用markdown编辑，格式有点小丑……

async():

useRef():

const test=useRef(value);

• useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数。返回的对象在组件的整个生命周期中持续存在。

---

小程序优化：

• 原本：ETag的更新要一条条去比对是否更新。

• 问题：需要多次访问数据库。加载速度变慢。

• 优化：访问一次数据库就将整个表拿下来在存储在本地。

• 方案：首先直接拿到整个表，拿到之后格式转换一下，原本是表，将它转化成数组存储在本地中。

const downloadEtagAll = async (PromiseArea) => {
  const _ = wx.cloud.database().command
  let res=(await wx.cloud.database().collection("Rules").where({
    rules: _.exists(true)
  }).get()).data
  let obj={}
  res.forEach(item=>obj[item._id]=item.rules);
  PromiseArea.setSuccess({
    dataArea:obj
  })
}

• command.exists(true)：判断表中是否含该对象。
• obj={}:原本的数据为表，转化为数组形式。
• forEach:遍历数组。

---

小程序promise优化：

• 小程序中使用回调函数去实现异步操作，但是会造成很多的缩进导致代码很长。
  • 使用async / await 去优化，可以让代码更简洁。
  • 配合try /catch 。

示例：

requestUserInfo(openid) {
    return new Promise((resolve, reject) => {
      wx.cloud.callFunction({
        name:'getUserInfo',
        success:res=>{
          if (res.result.list.length!=0) {
            resolve(pull)
          }else{
            reject(res)
          }
        },
        fail:e=>{
          console.log(e)
          reject(e)
        }
      })
    })
  }

更改后：

async requestUserInfo() {
    let res = await wx.cloud.callFunction({
      name: 'getUserInfo',
    });
    try {
      if (res.result.list.length != 0) {
        let pull = res.result.list[0]
        pull.todayEvent = pull.todayEvent[0]
        pull.exp = pull.todayEvent.exp;
        pull.LiveGips = pull.todayEvent.LiveGips;
        let set = new Set(pull.authList)
        pull.authList = [...set]
        wx.setStorage({
          key: 'userInfo',
          data: pull
        })
        return pull
      } else {
        throw new Error(res)
      }
    } catch (error) {
      throw new Error(e)
    }
  }

---

小程序小笔记：

1.标签滚动后置顶：

采用position:sticky;

.tabs{
  color: #b2b2b2;
  position: sticky;
  top: 0;
  z-index: 999;
}

如果是组件中需要声明

  options:{
    virtualHost:true
  },

position:sicky;top:0;在移动端中存在bug，1px的算法问题，会导致置顶时与上方存在缝隙，下面的内容会通过缝隙展现出来。

.tabs{
  color: #b2b2b2;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 -1px #fff;
}

• 用一个不对盒模型尺寸、位置产生任何影响的1像素高的阴影来覆盖掉这个缝隙

2.移动端文字果断省略显示

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

• overflow:hidden; 设置了这个属性，text-overflow属性才会生效。
• text-overflow: ellipsis; 用来在多行文本的情况下，用省略号"…"隐藏超出范围的文本内容。
• display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
• -webkit-line-clamp: 2; 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
• -webkit-box-orient: vertical; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

3.动画过滤，使动画不那么生硬。

.active {
    color: black;
    transition: transform .18s ease;
    transform: scale(1.03);
    position: relative;
}

• transition后面接过度时间。