uni-app学习(二)

1. uni-app学习(二)

1.1. 好用css记录

  1. 一定透明度的背景色background: rgba(255,255,255,.6);

1.2. 好用的代码段

  1. store(用户登录)
export default {
    state: {
        hasLogin: false, //登陆状态
        loginProvider: "", //登陆方式 如 微信
        openid: null, //应用id
        address: {}, //收货地址
        userinfo: {
            nickName: "未登录",
            headimg: "../../static/image/logo.png",
            user_id: "123",
            individuality: "爱你一万年",
            address: "北京市西城区中南海大院1号",
            sex: "男",
            area: "北京-北京-东城区"
        } //用户信息
    },
    getters: {
        userinfo(state) {
            return state.userinfo;
        },
        login(state) {
            return state.hasLogin;
        },
        address(state) {
            return state.address;
        }
    },
    mutations: {
        login(state, provider) {
            state.hasLogin = true;
            state.loginProvider = provider;
        },
        logout(state) {
            state.hasLogin = false
            state.openid = null
        },
        setOpenid(state, openid) {
            state.openid = openid
        },
        setAddress(state, address) {
            state.address = address;
        },
        setUserinfo(state, userinfo) {
            state.userinfo = userinfo;
        }
    },
    actions: {
        isLogin: async function(context) {
            return await new Promise((resolve, reject) => {
                var hasLogin = context.state.hasLogin;
                console.log(context)
                if (!hasLogin) {
                    uni.showModal({
                        title: "您还未登陆,立即登陆?",
                        content: "请登陆后进行访问",
                        success(e) {
                            if (e.confirm) {
                                //登陆
                                uni.navigateTo({
                                    url: '../login/login'
                                })
                            } else {
                                context.commit('logout', "退出")
                                console.log(context.state)
                                console.log("放弃登陆")
                            }
                        }
                    })
                    resolve(false)
                } else {
                    resolve(true)
                }
            })

        }
    }
}
  1. 窗口宽高
export default{
        state: {
            screen:{
                mode:true,//窗口宽度比高度 长
                height:0,//窗口高度
                width:0,//窗口宽度
            }
        },getters:{
            screen(state){
                    return state.screen;
            }
        },mutations: {
            screen(state,screen){
                var width=screen.width || 720;
                var height=screen.height || 1440;
                var mode=true;
                if(width<height){
                    mode=false;
                }
                state.screen={
                    mode,
                    width,
                    height
                };
            }
            
        },actions: {

        }
}
// 监听窗口宽高变化
(function screenListener(){
    uni.onWindowResize((res) => {
        that.$store.commit('screen',{width:res.size.windowWidth,height:res.size.windowHeight});
//                  console.log('变化后的窗口宽度=' + res.size.windowWidth)
//                  console.log('变化后的窗口高度=' + res.size.windowHeight)
})
})()
  1. store汇总 index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from "./store.js"
import win from "./win.js"
Vue.use(Vuex)

const store = new Vuex.Store({
      modules:{
           user:user,
           win:win
           
      }
})

export default store

1.3. storage封装

var Storage={
    /**
     * 异步存入缓存 可对象可数组
     * k        string              键
     * val      array|object|string 缓存的内容
     * expires  int                 有效期
     */
    set(k,val,expires){
        var type= typeof val;
        var expires=expires || 300;
        return uni.setStorage({key:k,data:{data:val,expires:expires+(Date.parse(new Date())/1000),type:type},success: function () {
            console.log('保存成功')
        }})
    },get(k,Func=function(){}){
        try{
            uni.getStorage({key: k,
            success: function (res) {
                var data=res.data;
                if(data.expires){
                    if(data.expires> (Date.parse(new Date())/1000)){
                        Func(data.data)
                        return data.data;
                    }
                    // uni.removeStorage(k);
                    try {
                        uni.removeStorage(k);
                        } catch (e) {
                                // error
                    }
                }
            }})
            
        }catch(e){
            console.log(e)
            return false;
            //TODO handle the exception
        }
            return false;
        
    },remove(k){
        uni.removeStorage(k);
    },reset(){
        // 获取本地说有缓存信息 删除过期的,超长的,净化系统
        uni.getStorageInfo({    
                success: function (res) {
                    console.log(res.keys);
                    console.log(res.currentSize);
                    console.log(res.limitSize);
                }
            }); 
    }
}

var Sync={
    set(k,val,expires){
        var expires=expires || 300;
        var type= typeof val;
        if(type==='object'){
            val =JSON.stringify(val)
        }
        return uni.setStorageSync(k,{data:val,expires:expires+(Date.parse(new Date())/1000),type:type})
    },get(k){
        try{
            var data= uni.getStorageSync(k) || {};
            // console.log(data)
            if(data.expires){
                if(data.expires> (Date.parse(new Date())/1000)){
                    if(data.type==='object'){
                        return  JSON.parse(data.data)
                    }
                    return data.data;
                }
                uni.removeStorageSync(k);
                try {
                            uni.removeStorageSync(k);
                    } catch (e) {
                            // error
                    }
            }
        }catch(e){
            console.log(e)
            return false;
            //TODO handle the exception
        }
    
            return false;
        
    },reset(){
        // 获取本地说有缓存信息 删除过期的,超长的,净化系统
        try {
            const res = uni.getStorageInfoSync();
            console.log(res.keys);
            console.log(res.currentSize);
            console.log(res.limitSize);
        } catch (e) {
            // error
        }
    }
}
export default {
    // CusBASE64: __BASE64,
    set:Storage.set,//异步
    get:Storage.get,
    reset:Storage.reset,
    setSync:Sync.set,//同步
    getSync:Sync.get,
    resetSync:Sync.reset
    // encoder:base64decode
  }

引入

import Storage from '@/common/utils/Storage.js'

1.4. 节点布局交叉状态

  1. uni.createIntersectionObserver,地址
  2. 作用:可以用来推断某些节点是否可以被用户看见、有多大比例可以被用户看见

1.5. TabBar操作

  1. uni.hideTabBar()
  2. 作用:隐藏TabBar,还有很多TabBar相关操作,参看这里
  3. 可以进行红点显示,角标显示等等

1.6. uni的节点选择器

  1. uni.createSelectorQuery(),可以用来选择特定节点进行操作,参看这里,用于懒加载图片
  2. 例子
uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
                    images.forEach((image, index) => {
                        if (image.top <= this.windowHeight) {
                            this.list[image.dataset.index].show = true;
                        }
                    })
                }).exec()
  1. 当然图片自身有个属性可以设置懒加载,只是有一定局限性,参考这里,使用lazy-load属性为true能达到同样的效果

1.7. 布局上遇到的问题

  1. 想实现类似饿了吗的悬浮框效果,即上移过程中,中间的某个组件框到顶部后不再上移,呈类似置顶效果
  2. 参考这个

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sharding-Jdbc源码探究-读写分离

    主从配置中主从的属性逗号理解,也好找到使用的地方,对props是在哪且如何使用的呢? 我找到了这个类:

    老梁
  • dubbo源码研究(一)

    老梁
  • Nacos入门

    我的初衷是想搞一套适合自定义快速开发的框架,把一些必要的技术整合进来,第一想法是尝试下SpringCloud Alibaba,毕竟是阿里开发,适应国人需求,下载...

    老梁
  • R中数据的标准化0-1标准化

    数据标准化,是将数据按比例缩放,使之落入到特定区间,一般我们使用0-1标准化; x=(x-min)/(max-min) >data <- read.csv('1...

    Erin
  • JavaScript中Array数组的几种方法

    涉及到数组的问题,以前基本上我们都是采用for循环的方法来进行遍历,后来在ES5中新增了几种方法来方便我们遍历。这几种方法分别为:forEach(js v1.6...

    无邪Z
  • Echarts+ajax实现叠堆柱状图

    祈澈菇凉
  • mongo登录认证失败, 求教如何解决 5C

    登陆认证两种方式,一种先登陆在认证:db.auth("xxx","xxx"); 一种直接认证:mongo -u xxx -p xxx --authentica...

    拓荒者
  • 【JS】303- 编写更好的 JavaScript 条件式和匹配条件的技巧

    如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地...

    pingan8787
  • 「译」编写更好的 JavaScript 条件式和匹配条件的技巧

    如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地...

    Chor
  • Python实现HMACSHA1生成加密签名

    按key升序,key不为sign,value不为空时,把key和value拼装成x=a&y=b格式,然后使用HmacSHA1算法生成签名。

    橙子探索测试

扫码关注云+社区

领取腾讯云代金券