首页 > 技术文章 > uni-app h5项目最近学习到的东西

aoshilin 2021-04-01 21:09 原文

1.封装带有失效时间的本地缓存localStorage,思路就是在设置缓存时候带一个时间戳,取出的时候用当点时间和设置缓存时间相减获取时间差,代码如下(uni-app h5):

class Storage{
        constructor(name){
            this.name = 'storage';
        }
        //设置缓存
        setItem(params){
            let obj = {
                name:'',
                value:'',
                expires:"",
                startTime:new Date().getTime()//记录何时将值存入缓存,毫秒级
            }
            let options = {};
            //将obj和传进来的params合并
            Object.assign(options,obj,params);
            if(options.expires){
            //如果options.expires设置了的话
            //以options.name为key,options为值放进去
                uni.setStorageSync(options.name,JSON.stringify(options));
            }else{
            //如果options.expires没有设置,就判断一下value的类型
                   let type = Object.prototype.toString.call(options.value);
                   //如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去
                if(Object.prototype.toString.call(options.value) == '[object Object]'){
                    options.value = JSON.stringify(options.value);
                }
                if(Object.prototype.toString.call(options.value) == '[object Array]'){
                    options.value = JSON.stringify(options.value);
                }
                uni.setStorageSync(options.name,options.value);
            }
        }
        //拿到缓存
        getItem(name){
            let item = uni.getStorageSync(name);
            //先将拿到的试着进行json转为对象的形式
            try{
                item = JSON.parse(item);
            }catch(error){
            //如果不行就不是json的字符串,就直接返回
                item = item;
            }
            //如果有startTime的值,说明设置了失效时间
            if(item.startTime){
                let date = new Date().getTime();
                //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期
                if(date - item.startTime > item.expires){
                //缓存过期,清除缓存,返回false
                    uni.removeStorageSync(name)
                    return false;
                }else{
                //缓存未过期,返回值
                    return item.value;
                }
            }else{
            //如果没有设置失效时间,直接返回值
                return item;
            }
        }
        //移出缓存
        removeItem(name){
            uni.removeStorageSync(name)
        }
        //移出全部缓存
        clear(){
            uni.clearStorageSync()
        }
    }
    export default Storage

存和取:

//
let storage = new Storage();
    storage.setItem({
        name: `snapSign`,
        value: true,
    expires: 600000
                        })
//
let storage = new Storage();
storage.getItem("snapSign")

2.微信打开页面会因为各种举报违规无法打开,通过获取打开的浏览器是微信还是普通浏览器,指导用户复制链接在浏览器打开:

//判断是否微信浏览器登录或者普通浏览器登录
                    var ua = window.navigator.userAgent.toLowerCase();
                    console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
                    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    // 微信中打开
                    uni.showToast({
                        icon:"none",
                        title:"微信中打开"
                    })
                    } else {
                        // 普通浏览器中打开
                        uni.showToast({
                            icon:"none",
                            title:"普通浏览器中打开"
                        })
                    }

3.接入阿里云进行人机验证和安卓app调用h5页面调试

 

推荐阅读