Uniapp常用插件、工具类库汇总

Antan
1,687 阅读2分钟

前言

uniapp作为一个跨平台框架，在很多中小型公司中备受青睐,作者也用过unbiapp开发过两个项目,这篇文章就是在uniapp使用后的一个总结， 分享一些项目中用到的常用工具类库。

uni-app封装缓存过期方法

缓存在我们的日常开发中还是非常常见的。同样的今天的话题是在uni-app框架中怎么封装一个缓存方法，为什么还要自己封装缓存方法？虽然说uni-app是用缓存的api接口的，也就是uni.setStorage，但是呢，这个缓存api是没有设置过期缓存这一说的，也就是说，你如果没有主动清除的话，这个缓存就会一直在。。。这明显缺了那么一点意思，所以我们来自己封装一个带设置缓存过期时间的一个方法。

export default function myCache(key, value, seconds = 3600 * 24) {

    let nowTime = Date.parse(new Date()) / 1000;
    if (key && value) {

        let expire = nowTime + Number(seconds);
        uni.setStorageSync(key, JSON.stringify(value) + '|' + expire)
        console.log('已经把' + key + '存入缓存,过期时间为' + expire)
    } else if (key && !value) {

        let val = uni.getStorageSync(key);
        if (val) {
            // 缓存存在，判断是否过期

            let temp = val.split('|')
            if (!temp[1] || temp[1] <= nowTime) {
                -uni.removeStorageSync(key)
                console.log(key + '缓存已失效')
                return '';
            } else {

                return JSON.parse(temp[0]);
            }
        }
    }

}

上面代码没什么难点，原理就是将过期时间一块存到缓存中，然后取的时候会通过这个时间判断缓存是否过期。

怎么全局引入这个缓存方法

首先，我们先说一下上述方法所在的文件位置，是 util/myCache.js ,然后我们在main.js文件中引入这个封装的缓存js文件，再挂载到vue全局，最后我们在其他的页面中就能自由使用我们封装的缓存方法啦。

  // main.js文件
  import myCache from './util/myCache.js'
  Vue.prototype.myCache = myCache

那我们要怎么使用呢？其实非常简单。

this.myCache('key','value',20) //存入缓存，最后一个参数是缓存过期时间
this.myCache('key') //只传key一个参数的情况下，就是读取缓存

官方插件市场

request请求、配置简单、批量上传图片、视频、超强适应性

Mui Player 一款优秀的 HTML5 视频播放器框架

图片 视频上传 预览 【简单好上手】

uni-app复制插件

H5对齐API

抽奖插件

avatar
文章
阅读
粉丝