1. uni-app学习（二）
1.1. 好用css记录
- 一定透明度的背景色
background: rgba(255,255,255,.6);1.2. 好用的代码段
- 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)
}
})
}
}
}
- 窗口宽高
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)
})
})()
- store汇总
index.jsimport 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. 节点布局交叉状态
- uni.createIntersectionObserver，地址
作用：可以用来推断某些节点是否可以被用户看见、有多大比例可以被用户看见
1.5. TabBar操作
- uni.hideTabBar()
作用：隐藏TabBar，还有很多TabBar相关操作，参看这里
可以进行红点显示，角标显示等等
1.6. uni的节点选择器
- uni.createSelectorQuery()，可以用来选择特定节点进行操作，参看这里，用于懒加载图片
例子
uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
images.forEach((image, index) => {
if (image.top <= this.windowHeight) {
this.list[image.dataset.index].show = true;
}
})
}).exec()
- 当然图片自身有个属性可以设置懒加载，只是有一定局限性，参考这里，使用
lazy-load属性为true能达到同样的效果1.7. 布局上遇到的问题
- 想实现类似饿了吗的悬浮框效果，即上移过程中，中间的某个组件框到顶部后不再上移，呈类似置顶效果
参考这个
