1. Toy模板网首页
  2. > Toy博客

从0到1实现单机记账APP原理与细节uniApp内含源码 (一)

9月前 作者：静的小白菜 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了从0到1实现单机记账APP原理与细节uniApp内含源码 (一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

单机记账APP演示及源码

具体演示如下面视频所示。免费下载地址：点击进入
预览APP（内含开屏广告）下载地址：http://8.142.10.182:8888/down/aWHWeGaEQE2W.apk
服务器买的便宜，带宽很小所以下载速度慢，主要还是囊中羞涩，哈哈。
内容有点长，将结构、样式、方法都写进去了，可以复制粘贴直接用，资源就去下载地址直接全部下载下来吧。

从0到1实现单机记账APP原理与细节uniApp内含源码 (一)

一、本章详细讲解记账功能页面的实现

1.基本搭建

首先使用HBuilder新建项目（文件>>新建>>项目>>选择默认模板），然后引入uView2.0的UI框架（官网有详细的指引地址连接）。

总共5个页面结构图所示，别的是之前连接自己的服务器，写的登录设置密码的功能，现在改成单机的另外的页面就不需要了。
从0到1实现单机记账APP原理与细节uniApp内含源码 (一)

2.记账页面实现

先看页面，然后我们分别要实现的是收支类型、金额输入、时间选择、备注以及记账。

从0到1实现单机记账APP原理与细节uniApp内含源码 (一)

（1）收支类型

先行铺写收支类型部分的结构和样式，具体的代码如下：

<!--结构-->
<!-- 收支类型 -->
<view class="headNav">
	<text @click.stop="setType(0)" :class="{'navActive':statusPay == 0}">支出</text>
	<text @click.stop="setType(1)" :class="{'navActive':statusPay == 1}">收入</text>
	<view class="navLine" :style="{'left':lineLeft}"></view>
</view>

<!-- 金额 -->
<view class="inputBox">
	<view class="alignItems">
		<u-icon name="rmb-circle-fill" size="26" color="#ffd607"></u-icon>
		<u-icon name="arrow-right" size="20" color="#ffd607"></u-icon>
	</view>
	<text @click.stop="showkey = true" style="min-width: 200rpx;text-align: right;flex: 1;">￥{{money?money:'0.00'}}</text>
</view>


<!-- 分类选择 -->
<view>
	<!-- 支出类别 -->
	<view v-show="statusPay == 0" class="typeTitle">
		<text @click="setKind(0)" :class="{'typeActive':kindNav == 0}">食品饮料</text>
		<text @click="setKind(1)" :class="{'typeActive':kindNav == 1}">衣裤鞋帽</text>
		<text @click="setKind(2)" :class="{'typeActive':kindNav == 2}">居家生活</text>
		<text @click="setKind(3)" :class="{'typeActive':kindNav == 3}">交通游玩</text>
	</view>
	<!-- 收入类别 -->
	<view v-show="statusPay == 1" class="typeTitle">
		<text @click="setKind(4)" :class="{'typeActive':kindNav == 4}">收入</text>
	</view>
	<!-- 转账类别 -->
	<view v-show="statusPay != 2" class="typeBox">
		<view class="selectKind" :style="selKindClass">
			<view class="fillUp"></view>
		</view>
		<view @click="setKindBox(index)" v-for="(item,index) in list[kindNav]" :key="index" class="kindBox">
			<image :src="item.img" class="kindImg" mode=""></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</view>



<!--样式-->
<style>
.headNav {
	position: relative;
	display: flex;
	color: #999999;
	justify-content: center;
}

.navLine {
	position: absolute;
	bottom: 0;
	width: 100rpx;
	height: 10rpx;
	background: #ffd607;
	border-radius: 10rpx;
	transition: ease-out 0.4s;
}

.headNav text {
	font-weight: bold;
	text-align: center;
	width: 220rpx;
	line-height: 80rpx;
	transition: ease-out 0.4s;
}

.navActive {
	color: #333;
}

/* 金额 */
.inputBox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	font-weight: bold;
	line-height: 120rpx;
}

.alignItems {
	display: flex;
	align-items: center;
}

/* 分类选择 */
.typeTitle {
	display: flex;
	line-height: 60rpx;
	color: #999999;
	border-top: 20rpx #F4F4F4 solid;
}

.typeTitle text {
	width: 25%;
	line-height: 80rpx;
	text-align: center;
}

.typeActive {
	color: #333;
	font-weight: bold;
}

.typeBox {
	position: relative;
	font-size: 24rpx;
	color: #999999;
	display: flex;
	flex-wrap: wrap;
	padding: 0 30rpx 30rpx 30rpx;
	border-bottom: 20rpx #F4F4F4 solid;
}

.kindBox {
	width: 172rpx;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.kindImg {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 8rpx;
}

/* 类型选择框 */
.fillUp {
	width: 156rpx;
	height: 144rpx;
	border-radius: 0 10rpx 0 10rpx;
	background: #FFFFFF;
}

.selectKind {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 172rpx;
	height: 160rpx;
	background: linear-gradient(45deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4, #f441a5);
	background-size: 400%;
	border-radius: 0 10rpx 0 10rpx;
	filter: blur(2px);
	animation: animate 8s linear infinite;
	transition: ease-out 0.4s;
}
/* 让颜色动起来的动画 */
@keyframes animate {
	0% {
		background-position: 0%;
	}

	100% {
		background-position: 400%;
	}
}
</style>

具体实现切换的方法思想：
为了实现收支下面小横条的移动所以通过“lineLeft”变量来实现控制，在css样式中 写有transition: ease-out 0.4s;动画属性。
同理选择类别的也是通过“selKindClass”来控制选择框的移动，中间选择框颜色会想弥红灯一样的改变颜色也是通过css中控制的。
具体方法和需要的变量如下所示：

// data() {return { 存放的值如下 }}
selKindClass: "left:-100px;top:0;", // 选择框
statusPay: 0, // 0支出、1收入、2转账
lineLeft: '216rpx', // 收支下的小黄条
showkey: true, // 数字键盘
money: '', // 金额
kindNav: 0, // 分类
//img中资源找不到可以自行下载修改名字
list: [
	// 食品分类
	[{
		"img": "/static/icon/food01.png",
		"name": "早中晚餐",
		"id": 1
	}, {
		"img": "/static/icon/food02.png",
		"name": "饮料",
		"id": 2
	}, {
		"img": "/static/icon/food03.png",
		"name": "蔬菜",
		"id": 3
	}, {
		"img": "/static/icon/food04.png",
		"name": "零食",
		"id": 4
	}, {
		"img": "/static/icon/other.png",
		"name": "其他",
		"id": 5
	}],
	// 衣物分类
	[{
		"img": "/static/icon/dress01.png",
		"name": "衣服",
		"id": 6
	}, {
		"img": "/static/icon/dress02.png",
		"name": "鞋子",
		"id": 7
	}, {
		"img": "/static/icon/dress03.png",
		"name": "帽子",
		"id": 8
	}, {
		"img": "/static/icon/dress04.png",
		"name": "首饰",
		"id": 9
	}, {
		"img": "/static/icon/other.png",
		"name": "其他",
		"id": 10
	}],
	// 居家分类
	[{
		"img": "/static/icon/home01.png",
		"name": "日常用品",
		"id": 11
	}, {
		"img": "/static/icon/home02.png",
		"name": "厨房用品",
		"id": 12
	}, {
		"img": "/static/icon/home03.png",
		"name": "床上用品",
		"id": 13
	}, {
		"img": "/static/icon/home04.png",
		"name": "电器用品",
		"id": 14
	}, {
		"img": "/static/icon/other.png",
		"name": "其他",
		"id": 15
	}],
	// 游玩分类
	[{
		"img": "/static/icon/play01.png",
		"name": "交通费",
		"id": 16
	}, {
		"img": "/static/icon/play02.png",
		"name": "油费",
		"id": 17
	}, {
		"img": "/static/icon/play03.png",
		"name": "娱乐",
		"id": 18
	}, {
		"img": "/static/icon/other.png",
		"name": "其他",
		"id": 19
	}],
	// 支出分类
	[{
		"img": "/static/icon/outlay01.png",
		"name": "工资",
		"id": 20
	}, {
		"img": "/static/icon/outlay02.png",
		"name": "兼职",
		"id": 21
	}, {
		"img": "/static/icon/outlay03.png",
		"name": "福利",
		"id": 22
	}, {
		"img": "/static/icon/other.png",
		"name": "其他",
		"id": 23
	}]
],



// 	methods: {方法如下}
// 收支下方横条
setType(stu) {
	// 下面是后面金额输入时控制自定义数字键盘的显示和隐藏。
	// this.showkey = true
	this.statusPay = stu
	this.lineLeft = stu * 220 + 216 + 'rpx'
	this.statusPay == 0 ? this.setKind(0) : this.setKind(4)
},
// 类别选择
setKind(index) {
	this.selKindClass = "left:-100px;top:0;"
	this.kindNav = index
},
// 类别选择框
setKindBox(index) {
	this.typeStatu = this.list[this.kindNav][index].id
	this.showkey = false
	var topSum = parseInt(index / 4)
	var leftSum = parseInt(index % 4)
	this.selKindClass = "left:" + (leftSum * 172 + 30) + "rpx;top:" + (topSum * 160) + "rpx;"
},
（2）金额输入

金额输入可以将哪个金额的地方设置为input的输入框，为了尝试一下自己能否写一个数字键盘，最终发现还是比较简单的。
具体结构和样式如下：

<!--结构-->
<!-- 键盘 -->
<view v-show="showkey" class="keyboardBox">
	<view v-for="(item,index) in keyboardList" :key="index" class="flexColumn">
		<view @click.stop="countMoney(itemTwo)" v-for="itemTwo in item" :key="itemTwo">{{itemTwo}}</view>
	</view>
	<view class="flexColumn">
		<view @click.stop="delMoney(1)" style="height: 100rpx;">
			<u-icon name="backspace" color="#FFFFFF" size="28"></u-icon>
		</view>
		<view @click.stop="delMoney(2)">C</view>
		<view @click="readyBtn()" class="keyBtn">确定</view>
	</view>
</view>


<!--样式-->
<style>
/* 键盘样式 */
.keyboardBox {
	position: absolute;
	bottom: 0;
	width: 100%;
	display: flex;
	background: #474669;
	color: #FFFFFF;
	font-weight: bold;
	padding: 10rpx 0 60rpx 0;
}

.flexColumn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 100rpx;
}

.flexColumn view {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.flexColumn view:hover {
	background: #656496;
}

.keyBtn {
	width: 100%;
	text-align: center;
	background: #616593;
	line-height: 200rpx;
}
</style>

具体方法和变量如下：

// data() {return { 存放的值如下 }}
// 键盘
keyboardList: [
	['1', '4', '7', '.'],
	['2', '5', '8', '0'],
	['3', '6', '9', '00']
],


// 	methods: {方法如下}
// 输入数字
countMoney(sum) {
	// 小数点
	this.money += sum
},
// 删除
delMoney(stu) {
	if (stu == 2) {
		this.money = ''
	} else {
		var newMoney = this.money.substr(0, this.money.length - 1)
		this.money = newMoney
	}
},
// 确定
readyBtn() {
	this.showkey = false
},
（3）时间选择、备注

时间选择使用了uView中的“u-datetime-picker”组件，正常使用是可以的，我这里使用了formatter过滤器实现一下每个数字后面跟着对应的文字。备注没啥说的。具体结构和样式如下：

<!-- 结构-->
<!-- 时间以及备注 -->
<view class="footBox">
	<view @click="showPicker = true" class="footBoxleft">
		<u-icon name="calendar" size="28"></u-icon>
		<text class="timeTitle">{{addBillTime}}</text>
	</view>
	<input type="text" v-model="remark" placeholder="输入备注内容...">
</view>

<!-- 时间选择框 -->
<u-datetime-picker ref="datetimePicker" :show="showPicker" v-model="datetime" :formatter="formatter"
	mode="datetime" @cancel="showPicker = false" @confirm="setAddTime"></u-datetime-picker>

<!-- 样式-->
<style>
/* 时间以及备注 */
.footBox {
	display: flex;
	padding: 0 30rpx;
	line-height: 80rpx;
}

.footBoxleft {
	display: flex;
	align-items: center;
}

.footBox input {
	display: block;
	flex: 1;
	height: 80rpx;
}
.timeTitle {
	font-weight: bold;
	width: 160rpx;
	text-align: center;
	font-size: 30rpx;
}
</style>

添加完时间和备注在部分小机型上，会出现数字键盘遮挡的现象存在，所有要给整个屏幕注册一个隐藏键盘的事件
具体方法和变量如下：

// data() {return { 存放的值如下 }}
showPicker: false, // 时间选择器
datetime: Number(new Date()), // 时间
addBillTime: '现在', // 用于显示的文字
remark:'', // 备注
yearTime: '', // 年
monthTime: '', // 月


// 	methods: {方法如下}
//点击空白处隐藏键盘(这个事件 需要放在<template> 紧跟的view标签下 @click="setShowkey()")
setShowkey() {
	this.showkey = false
},
// 时间选择框过滤器
formatter(type, value) {
	if (type === 'year') {
		return `${value}年`
	}
	if (type === 'month') {
		return `${value}月`
	}
	if (type === 'day') {
		return `${value}日`
	}
	if (type === 'hour') {
		return `${value}时`
	}
	if (type === 'minute') {
		return `${value}分`
	}
	return value
},
// 设置时间
setAddTime(e) {
	this.yearTime = uni.$u.date(e.value, 'yyyy')
	this.monthTime = uni.$u.date(e.value, 'mm')
	this.addBillTime = uni.$u.date(e.value, 'mm-dd')
	
	this.showPicker = false
},
（4）记账

本地记账以月份为单位，将每次记录的内容追加进去。为了区分每一个数据需要一个ID字段，这就需要一个信息idMax去记录目前最大的ID数，然后每次追加新的数据的时候将idMax加一。**“allMoney”**字段是本月支出总额。方便后续全部账单哪里去展示避免哪个页面初始加载的时候需要计算大量数据。具体数据结构以及结构和样式如下：
从0到1实现单机记账APP原理与细节uniApp内含源码 (一)

<!-- 按钮 -->
<view @click="updateBtn()" v-if="isUpdate" class="updateClass">
	修改
</view>
<view v-else class="lastBtn">
	<view @click="addBtn(1)" class="footBtn left">
		再记一笔
	</view>
	<view @click="addBtn(0)" class="footBtn right">
		保存
	</view>
</view>

<style>
/* 记账按钮样式 */
.lastBtn {
	padding: 80rpx 30rpx 30rpx;
	display: flex;
	justify-content: space-between;
}

.lastBtn .left {
	color: #ff8e07;
	border: 4rpx #ff8e07 solid;
	border-radius: 20rpx;
}

.lastBtn .right {
	color: #333333;
	background: #ffd608;
	border-radius: 20rpx;
}

.footBtn {
	text-align: center;
	width: 300rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: bold;
}

.updateClass {
	margin: 80rpx auto 0;
	color: #333333;
	text-align: center;
	width: 300rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: bold;
	background: #ffd608;
	border-radius: 20rpx;
}
</style>

这个记账页面和修改记账共用，所以在页面加载的时候要判断是记账还是修改，
具体方法和变量如下：

onLoad(option) {
	if (option.type == 'update') {
		this.isUpdate = true
	}
},
onReady() {
	// 判断是否是修改操作
	if (this.isUpdate) {
		let listAcc = uni.getStorageSync('detailAcc')
		this.setType(listAcc.statusPay)
		this.accid = listAcc.id
		this.money = listAcc.money
		this.typeStatu = listAcc.typeStatu
		this.remark = listAcc.remark
		this.yearTime = listAcc.year
		this.monthTime = listAcc.month
		this.datetime = listAcc.datetime
		this.addBillTime = uni.$u.date(listAcc.datetime, 'mm-dd')
		// 设置类型选择框
		this.list.map((kindVal, kindIndex) => {
			kindVal.map((typeValue, index) => {
				if (typeValue.id == this.typeStatu) {
					this.kindNav = kindIndex
					this.setKindBox(index)
					return
				}
			})
		})
	} else {
		this.$refs.datetimePicker.setFormatter(this.formatter)
		this.yearTime = uni.$u.date(this.datetime, 'yyyy')
		this.monthTime = uni.$u.date(this.datetime, 'mm')
	}
},

// data() {return { 存放的值如下 }}
isUpdate: false,// 是记账还是修改


// 	methods: {方法如下}
// 记录
addBtn(isAgain) {
	// 本地存储数据
	let accName = this.yearTime + '-' + this.monthTime
	// 本地存贮数据的ID
	let Pid = parseInt(uni.getStorageSync('idMax') || '0') || 0
	Pid++;
	uni.setStorageSync('idMax', Pid.toString())
	// 需要记录的数据
	let arrAry = {
		id: Pid,
		money: this.money,
		statusPay: this.statusPay,
		typeStatu: this.typeStatu,
		remark: this.remark,
		datetime: this.datetime,
		month:this.monthTime,
		year:this.yearTime,
	}
	// 判断本月有没有存储过数据，有就追加，无就赋初始值
	let arrList = uni.getStorageSync(accName) || {'allMoney':0,'list':[]}
	arrList.list.push(arrAry)
	// 这个步骤是为了全部账单哪里方便显示
	if(this.statusPay == 0){
		arrList.allMoney =  parseInt(arrList.allMoney)  + parseInt(this.money) 
	}else{
		arrList.allMoney =  parseInt(arrList.allMoney)  - parseInt(this.money) 
	}
	uni.setStorageSync(accName, arrList)
	this.$u.toast('记录成功')
	if(isAgain == 0){
		setTimeout(() => {
			uni.navigateBack()
		}, 1200)
	}
},
// 修改
updateBtn() {
	let accName = this.yearTime + '-' + this.monthTime
	
	let arrList = uni.getStorageSync(accName)
	
	let arrAry = {
		id: this.accid,
		money: this.money,
		statusPay: this.statusPay,
		typeStatu: this.typeStatu,
		remark: this.remark,
		month:this.monthTime,
		year:this.yearTime,
		datetime: this.datetime,
	}
	
	let newAllMoney = 0
	arrList.list.map(arr => {
		if(arr.id == this.accid){
			arr.money = this.money,
			arr.statusPay = this.statusPay,
			arr.typeStatu = this.typeStatu,
			arr.remark = this.remark,
			arr.month =this.monthTime,
			arr.year =this.yearTime,
			arr.datetime = this.datetime
		}
		if(arr.statusPay == 0){
			newAllMoney =  newAllMoney  + parseInt(arr.money) 
		}else{
			newAllMoney =  newAllMoney  - parseInt(arr.money) 
		}
	})
	arrList.allMoney = newAllMoney
	uni.setStorageSync(accName, arrList)
	this.$u.toast('修改成功')
	setTimeout(() => {
		uni.navigateBack()
	}, 1200)
},

小结

下章写首页。码字不易点个赞吧文章来源地址https://www.toymoban.com/news/detail-490019.html

到了这里，关于从0到1实现单机记账APP原理与细节uniApp内含源码 (一)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)

    记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)

    家庭记账本小程序 目录 基于SSM的家庭记账本小程序设计与实现 一、前言 二、系统设计 三、系统功能设计  1、小程序端： 2、后台 四、数据库设计  五、核心代码  六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍 ：✌️大厂码农|毕设布道师，阿里云

    2024年04月15日
    浏览(42)
  • uniapp - 实现日期选择器（年月日）组件，兼容 H5、App、小程序，提供组件源码可直接复制运行！

    uniapp - 实现日期选择器（年月日）组件，兼容 H5、App、小程序，提供组件源码可直接复制运行！

    该日期选择器组件无任何第三方依赖，源代码注释详细，高效简洁无 BUG。 本文详细讲解了在uniapp中，如何实现一个兼容h5、app、小程序的日期选择器组件， 你可以直接复制源码，然后再改改颜色什么的项目就能直接用了。 如下图所示，你将获取这样一个日期选择功能的组件

    2023年04月15日
    浏览(56)
  • JavaScript实现飞机发射子弹详解（内含源码）

    JavaScript实现飞机发射子弹详解（内含源码）

    文本主要讲解如何利用JavaScript实现飞机发射子弹，实现过程以及源码讲解。实现效果图如下： 首先，找到飞机和子弹的UI图，gif图最好，这里我用的是jpg图。 飞机： 子弹： 2.把这两个UI图放在代码文件夹中 3.创建初始子弹数和飞机的img，这里我创建的是十个子弹和一架飞机

    2024年02月04日
    浏览(39)
  • 前端实现俄罗斯方块游戏（内含源码）

    前端实现俄罗斯方块游戏（内含源码）

    目录 一、前言 二、功能介绍 三、页面搭建 四、样式设置 五、逻辑部分         今天带领大家完成俄罗斯方块游戏，功能也比较简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 后续也会带领大家用前端一些有趣的小游戏，纯前

    2024年02月12日
    浏览(51)
  • 在inscode中轻松实现坦克大战（内含源码）

    在inscode中轻松实现坦克大战（内含源码）

    「作者主页」 ：雪碧有白泡泡 「个人网站」 ：雪碧的个人网站 「推荐专栏」 ： ★ java一站式服务 ★ ★ 前端炫酷代码分享 ★ ★ uniapp-从构建到提升 ★ ★ 从0到英雄，vue成神之路 ★ ★ 解决算法，一个专栏就够了 ★ ★ 架构咱们从0说 ★ ★ 数据流通的精妙之道★ CSDN最新推

    2024年02月15日
    浏览(32)
  • 记账APP：小哈记账4——记账首页页面的制作（1）

    记账APP：小哈记账4——记账首页页面的制作（1）

            小哈记账是一款用于记账APP，基于Android Studio开发工具，采用Java语言进行开发，同时使用litepal和阿里云数据库进行数据的增删查改，以图标的形式在App的界面上显示。App可以清晰显示收支情况，并以图表的形式展示每月收支情况；同时可以记录消费用途，项目能

    2024年02月12日
    浏览(30)

  • SpringBoot利用Guava实现单机app限流访问

    物料准备： 1.引入Guava依赖 2.定义一个限流注解作用于api接口的方法上 3.定义一个切面，对注解标注的方法实现一个限流访问 使用方法，把@RateLimitAspect 注解添加到需要限流的API接口上即可，如 添加到@GetMapping 或 @PostMapping上

    2024年02月11日
    浏览(34)
  • uniapp - 实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置（详细示例源码及注释，复制粘贴快速植入）全端兼容H5/app/小程序！

    uniapp - 实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置（详细示例源码及注释，复制粘贴快速植入）全端兼容H5/app/小程序！

    百度搜的代码都太难用了而且有bug。。。 本文详细讲解在uniapp中实现一个可拖动的悬浮按钮，并且兼容在 H5/app/小程序中完美运行， 你可以直接复制源码，复制到你的项目中，附带 全局组件注册 的方法（要不每个页面都需要引一次）， 如下图所示，你自己修改样式就行了，

    2023年04月08日
    浏览(49)
  • Android——一个简单的记账本APP

    Android——一个简单的记账本APP

    简述 日期选择采用 CalendarView 控件，时间选择采用 TimePicker 控件，然后通过 switch 控件控制其 VISIBLE 和 GONE 属性，类型通过PopUpWindows弹窗显示，标签通过 SharedPreferences 进行传递。最后插入SQLite数据库中。 实现 获取日期 因为获取的日历控件的月份要比实际少一个月，故因此需

    2024年02月02日
    浏览(37)
  • 基于JavaSpringBoot+uniapp制作一个记账小程序

    基于JavaSpringBoot+uniapp制作一个记账小程序

    你不理财，财不理你，制作一个记账小程序对自己的收入/支出明细进行管理，守护好自己的钱袋子。

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包