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)
				}
			})

		}
	}
}

2. 窗口宽高

export default{
		state: {
			screen:{
				mode:true,//窗口宽度比高度 长
				height:0,//窗口高度
				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',{res.size.windowWidth,height:res.size.windowHeight});
// 					console.log('变化后的窗口宽度=' + res.size.windowWidth)
// 					console.log('变化后的窗口高度=' + res.size.windowHeight)
})
})()

3. 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()

3. 当然图片自身有个属性可以设置懒加载，只是有一定局限性，参考这里，使用lazy-load属性为true能达到同样的效果

1.7. 布局上遇到的问题

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