uni-app开发中遇到的技巧

原创已于 2022-03-23 22:53:18 修改 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2022-03-23 18:37:37 首次发布

框架专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在uni-app开发中的一些实用技巧，包括搜索框的防抖处理、解决数组顺序问题、去除数组重复项以及如何持久化保存历史记录到本地。通过防抖函数减少搜索事件的频繁触发，使用Set处理数组重复，以及利用uni-app的本地存储API进行数据管理。

1.搜索的防抖处理

这里是一个搜索框，ui组件库内定义了每次搜索框的值发生变化都会触发input事件函数

  <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>

在js代码中进行防抖处理

input(e){
        // console.log(e.value)
        // 定义一个延时器,规定500毫秒以后执行，并赋给this.timer
        // 清除延时,因为每次搜索框内的值变化都会执行清除，就会将上一次变化的延时清除掉，然后再下一行代码进行新的延时，就完成了防抖的处理
        clearTimeout(this.timer)
       this.timer = setTimeout(()=>{
          console.log(e.value)
        },500)
      }

清除延时,因为每次搜索框内的值变化都会执行清除，就会将上一次变化的延时清除掉，然后在下一行代码进行新的延时，就完成了防抖的处理

data() {
      return {
        // 定义一个延时器timerID
        timer:null,
        // 搜索关键词，用于后续发送请求
        kw: ''
      };
    },

input(e) {
  // 清除 timer 对应的延时器
  clearTimeout(this.timer)
  // 重新启动一个延时器，并把 timerId 赋值给 this.timer
  this.timer = setTimeout(() => {
    // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
    this.kw = e.value
    console.log(this.kw)
  }, 500)
}

2.解决数组前后顺序的问题

computed: {
  historys() {
    // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
    // 而是应该新建一个内存无关的数组，再进行 reverse 反转
    return [...this.historyList].reverse()
  }
}

遍历这个计算属性的数组即可

 <uni-tag :text="item" v-for="(item, i) in historys" :key="i"></uni-tag>

3.解决数组重复的问题

data() {
      return {
             // 搜索关键词，用于后续发送请求
        kw: '',
             // 搜索关键词的历史记录
        historyList: []
      };
    },

当触发点击事件将，输入关键词后，data中的kw，会随着input函数中进行改变，当触发延时后，将value值给到kw，此时调用保存历史关键词的方法 this.getSearchList()

input(e){
        // console.log(e.value)
        // 定义一个延时器,规定500毫秒以后执行，并赋给this.timer
        // 清除延时,因为每次搜索框内的值变化都会执行清除，
        //就会将上一次变化的延时清除掉，然后再下一行代码进行新的延时，
        //就完成了防抖的处理
        clearTimeout(this.timer)
       this.timer = setTimeout(()=>{
          // console.log(e.value)
          // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
              this.kw = e.value
              // 根据关键词，查询搜索建议列表，触发接口请求函数
                this.getSearchList()
                
        },500)
      },

在保存的方法内，首先将当前的历史关键词数组转为一个set类型，这个类型只会存储唯一值，

也就是说set中不会有两个相同的元素

然后调用delete方法，这里是指，假如之前有这个关键词，就删掉，然后调用add方法添加到末尾，达到一个顺序排列的效果

// 保存搜索关键词为历史记录
saveSearchHistory() {
  // this.historyList.push(this.kw)

  // 1. 将 Array 数组转化为 Set 对象
  const set = new Set(this.historyList)
  // 2. 调用 Set 对象的 delete 方法，移除对应的元素
  set.delete(this.kw)
  // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
  set.add(this.kw)
  // 4. 将 Set 对象转化为 Array 数组
  this.historyList = Array.from(set)
}

最后通过array.from方法，将一个类数组，也就是set类型，转换为真正的数组

4.将数据持久性保存到本地，历史记录，

在生命周期函数加载的时候重新读取本地数据

saveSearchHistory() {
          // 直接把搜索关键词 push 到 historyList 数组中
          // this.historyList.push(this.kw)
          // 1. 将 Array 数组转化为 Set 对象
            const set = new Set(this.historyList)
            // 2. 调用 Set 对象的 delete 方法，移除对应的元素
            set.delete(this.kw)
            // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
            set.add(this.kw)
            // 4. 将 Set 对象转化为 Array 数组
            this.historyList = Array.from(set)
             // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
              uni.setStorageSync('kw', JSON.stringify(this.historyList))
      }

接收两个参数，第一个是字段名，第二个是值，这里通过 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串

uni.setStorageSync('kw', JSON.stringify(this.historyList))

查看官方文档，

uni.setStorageSync(KEY,DATA) 用于存储本地记录

uni.getStorageSync(KEY) 用于读取本地记录

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。这里转成一个数组

onLoad() {
  this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}

还可通过这种方式清空本地的历史存储

 uni.setStorageSync('kw', '[]')