1. uni-app Learning (II)
1.1 easy to use css record
- A degree of transparency of the background color
background: rgba(255,255,255,.6);
1.2. Handy snippet
- store (user login)
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)
}
})
}
}
}
- Window width and height
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 summary
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 package
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
}Introduced
import Storage from '@/common/utils/Storage.js'1.4. Layout of nodes cross state
- uni.createIntersectionObserver, address
- Action: some nodes may be used to infer whether the user can be seen, there can be seen how much of the user
1.5. TabBar operation
- uni.hideTabBar()
- Role: Hide TabBar, there are many TabBar related operations, see here
- Red dot can be displayed, display, etc. subscript
1.6. Uni node selector
- uni.createSelectorQuery (), it can be used to select a particular node operates, reference herein , for lazy loading image
- example
uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
images.forEach((image, index) => {
if (image.top <= this.windowHeight) {
this.list[image.dataset.index].show = true;
}
})
}).exec()- Of course, the picture itself has a property can be set lazy loading, but has some limitations, the reference here , use the
lazy-loadproperty to true can achieve the same effect
1.7 Problems With the layout
- Similar hungry it would like to achieve the effect of the suspension frame, i.e., during the move, the intermediate frame to the top of a component is no longer move back, the effect was similar to the top
- Reference this