本文介绍了微信小程序和uni-app中处理时间相关函数，包括补位添零、倒计时、正计时等，并探讨了uni-app的强制渲染、用户登录流程。同时，详细阐述了uni-app的数据缓存操作，如uni.setStorage、uni.getStorage、uni.removeStorage及其同步版本。此外，还分享了作者在使用uni-app时遇到的问题和经验。
微信小程序和uni-app的时间相关函数
微信小程序
1.补位添零函数
const formatNumber = n => {
// 小于10的加0
n = n.toString()
return n[1] ? n : '0' + n
}
2.十五分钟倒计时
将startTime（开始时间），endTime（结束时间）放在对象里，remainTime ( 时间差 )为设置定时函数相当于递归函数执行动态的时间数字变化。
// 倒计时
function countDown(that) {
var newTime = new Date().getTime();
var endTime = that.data.endTime;
var remainTime = endTime - newTime;
var obj = null;
var t = '';
if (remainTime > 0) {
var time = remainTime / 1000;
var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
min: formatNumber(min),
sec: formatNumber(sec)
}
}
t = setTimeout(function() {
that.setData({
countDownTxt: obj
});
countDown(that)
}, 0)
if (obj) {
if (obj.min == 0 && obj.sec == 0) {
wx.switchTab({
url: '/pages/index/index',
})
wx.setStorageSync('ifLoad', true);
}
}
if (remainTime <= 0) {
clearTimeout(t);
}
}
3.正计时函数
获取当前时间perTime，将其与传入对象中的开始时间startTime进行计算
//正计时函数
function recountDown(that) {
let perTime = new Date().getTime();//获取当前时间戳
let startTime = that.data.startTime;
let mainTime = perTime - startTime;
let obj = null;
let t = '';
if (mainTime > 0) {
let time = mainTime / 1000;
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let hour = parseInt(time % (60 * 60 * 24) / 3600);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
hour: hour,
min: formatNumber(min),
sec: formatNumber(sec)
}
}
t = setTimeout(function() {
that.setData({
countTxt: obj,
});
recountDown(that)
}, 0)
}
4.将时间戳转换成时间格式
//在页面引用函数
oneTime = time.formatTime(startTime,'Y/M/D h:m:s');
/**
* 时间戳转化为年 月 日 时 分 秒
* number: 传入时间戳
* format：返回格式，支持自定义，但参数必须与formateArr里保持一致
*/
function formatTime(number, format) {
var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
var returnArr = [];
var date = new Date(number);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (var i in returnArr) {
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
以上函数均放在微信小程序util.js中，若在其他页面调用函数需要使用module.exports = {}
module.exports = {
countDown: countDown,
recountDown: recountDown,
formatTime: formatTime,
studyTime: studyTime,
scancountDown: scancountDown
} //放置在util.js中
var time = require('../../utils/util.js')
//放在需要引用的页面js中
uni-app
1、强制渲染语句 this.$forceUpdate();
页面数据更改，组件未发生变化，可以在函数里使用强制渲染语句。
2、用户登录
输入标签 + 弹窗 + 接口返回值判断输入是否正确
<template>
<view>
<view class="login">
<test class="onetest">职工考勤管理系统</test>
<view class="oneview">
<test class="twotest">账号: </test>
<input class="account" v-model="username" maxlength="16" focus placeholder="请输入账号" />
</view>
<view class="oneview" style="padding-top: 0px;">
<test class="twotest">密码: </test>
<input class="account" v-model="password" maxlength="16" password type="text" placeholder="请输入密码"/>
</view>
<button class="login-buttom" @click="login">登陆</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username:"nicai",
password:"123456"
}
},
onLoad() {
},
methods: {
login () {
var that = this;
var username = that.username;
var password = that.password;
console.log(username);
console.log(password);
uni.request({
url : 'http://接口/user/login',
method : 'POST',
header:{'content-type':'application/x-www-form-urlencoded'},
data : {
'username': username,
'passwd': password
},
success:res=>{
console.log(res);
var userdata = res.data.data;
var authority = userdata.authority;
if(userdata != null) {
uni.setStorage({
key: 'userdata_key',
data: userdata,
})
if(authority == 1) {
uni.navigateTo({
url: '/pages/homepage'
})
}else if(authority == 0) {
uni.navigateTo({
url: '/pages/userpage'
})
}
console.log(111);
}
if(userdata == null) {
uni.showModal({
title: '提示',
content: '账号或者密码错误，请重新输入！',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
},
})
}
}
}
</script>
<style>
.logo {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.login {
margin-left: 650px;
margin-top: 310px;
padding-top:50px;
width: 539px;
height: 306px;
line-height: 20px;
opacity: 0.4;
border-radius: 6px;
background-color: rgba(11, 11, 11, 93);
text-align: center;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
position: absolute;
}
.onetest {
margin-left: 60px;
height: 32px;
color: rgba(255, 255, 255, 100);
font-size: 30px;
text-align: left;
}
.oneview {
margin-left: 90px;
margin-top: 40px;
padding-top: 30px;
width: 378px;
height: 35px;
line-height: 20px;
display: flex;
}
.twotest {
color: rgba(255, 255, 255, 100);
font-size: 24px;
text-align: left;
margin-right: 8px;
}
.account {
margin-left: 5px;
width: 278px;
height: 28px;
text-align: left;
padding-left: 17px;
color: rgba(255, 255, 255, 100);
box-shadow: 0px 2px 0px 0px #FFFFFF;
}
.login-buttom {
margin-top: 28px;
margin-left: 180px;
width: 190px;
height: 40px;
line-height: 36px;
/* opacity: 0.72; */
border-radius: 5px;
background-color: #0B0B0B;
color: rgba(255, 255, 255, 100);
font-size: 20px;
text-align: center;
box-shadow: 0px 1px 2px 0px #FFFFFF;
}
</style>
3、时间戳转换成时间格式
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
filters: {
formatDate: function (value) {
var date = new Date(value);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate()+1 < 10 ? '0'+(date.getDate()+1) : date.getDate()+1) + ' ';
var h = (date.getHours()+1 < 10 ? '0'+(date.getHours()+1) : date.getHours()+1) + ':';
var m = (date.getMinutes()+1 < 10 ? '0'+(date.getMinutes()+1) : date.getMinutes()+1);
// var s = date.getSeconds();
return Y+M+D+h+m;
},
},
4、将时间戳转换成时长
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
filters: {
lateTime: function (value) {
var obj = null;
if(value > 0 ) {
var time = value/1000;
var min = parseInt(time % (60 * 60 * 24) % 3600 /60);
if(min == 0) {
min = min + 1;
}
var hour = parseInt(time%(60*60*24)/3600);
obj = {
hour: hour,
min: min
}
}
console.log(obj);
if(hour > 0) {
var hm = hour +'h '+ min + 'min';
}
if(hour == 0) {
var hm = min + 'min';
}
console.log(hm);
return hm;
}
},
可以直接在html中引用filers中的函数
<view>{{item.startTime | formatDate}}</view>
5、将数据存入缓存
uni.setStorage({
key: 'userdata_key',
data: userdata,
})
6、将数据从缓存读取
//onLoad
uni.getStorage({
key: 'userdata_key',
success:function(res){
console.log(res);
that.userdata = res.data;
}
})
console.log(that.authority);
数据缓存
存储 获取 移除
uni.setStorage(Object)
将数据存储在本地缓存中指定的key中,会覆盖掉原来的key对应的内容，这是一个异步接口
在本地缓存存数据
storage板块 可以看到缓存中的数据
key:属性名 data:value
uti.getStorage(Object)
从本地缓存中异步获取指定key对应的内容
uni.removeStorage(Object)
从本地缓存中异步移除指定key
uni-setStorageSync(key,value)
将data存储在本地缓存中指定的key中，会覆盖掉原来key对应的内容，这是一个同步接口
下同：
uni-getStorageSyne(Object)
uni-removeStorageSyne(Object)
因为我先接触的是微信小程序，所以刚开始使用uni-app，由于是这几年才出现的编译器，网上资料少得可怜，做课设的过程也踩了不少坑，写这个笔记也是为了看到的人可以少浪费一些查找资料的时间。内容不全，因为本人不太喜欢使用uni-app，后续也没有进一步学习，敲课设的一点点了解就放在这了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
