admin管理员组文章数量:1443000
不会小程序设计？10分钟AI工具助你从需求到uniapp开发
一、前言
之前2025年的年初开年之时，我立下了一个Flag，那就是写一个记账类型的小程序。
但这件事情迟迟没有动作，为啥呢？我在为小程序页面的设计发愁，也为了代码上的问题发愁。
第一我不会页面的设计，
第二我也不会前端小程序的代码，
再加上这么工作上的内容也变得多起来了，更加没有时间去摸索这件事情了，只好将这件事暂时搁置。
但前些天公司某个业务的需求会议上，我偶然看到某湖原型工具上，有一个AI生成设计图
报着试试的心态，我决定重启记账小程序的计划。
二、某湖的AI生成设计图
点击进入之后，它让我们输入一段需求
我们先试试下面推荐默认的，一个时尚的服装售卖app
可以看到它会根据你简单的描述，生成一系列的需求，我们继续点击生成
生成了，效果是非常好的，我们可以对其进行预览
对其进行修改，它会根据当前页面进行修改，生成v2版本
直到达到自己想要的效果，最令我惊讶的一点是什么直到么
它可以插入到画布，也就是说产品、UI设计可以对这些AI生成的效果进行二次设计
但对于我这种后端程序员来说，代码的预览是非常有用的，一会我用记账小程序来试试，一步生成自己的应用
三、来试试记账小程序
首先，我将我自己的需求交给DeepSeek，让它帮我们润色一下自己的需求
帮我设计一款记账微信小程序前端原型，用简单的话描述小程序原型布局 分为快捷记账页，历史记账页，记账报表页 1、快捷记账页里面，有许多按钮，只需要点击就能记账。记账的金额、备注都是预设好的，时间默认当天 2、历史记账页，可以通过筛选日期，查询过往的记账条目，对其进行查看编辑等操作 3、记账报表页，可以通过筛选日期，生产柱形图，或者饼图等
生成之后，我们将需求交给某湖，让它帮我们生成UI界面
效果非常好，那么这次，我将代码复制到自己的IDE中，准备HBuilderX
创建自己的空白应用，这些就不教了，直接将代码复制到Index.vue中
<template>
<view class="page">
<view class="container">
<!-- 滚动区域 -->
<scroll-view class="scroll-area" scroll-y>
<!-- 快捷记账页 -->
<view v-if="activeTab === 0" class="quick-record">
<view class="header">
<text class="date">{{ currentDate }}</text>
<text class="title">快捷记账</text>
</view>
<view class="quick-buttons">
<view v-for="(item, index) in quickItems" :key="index" class="quick-item" @tap="handleQuickRecord(item)" @longpress="handleEditQuickItem(item)">
<uni-icons :type="item.icon" size="28" :color="item.color"/>
<text class="item-name">{{ item.name }}</text>
<text class="item-amount">{{ item.amount }}元</text>
</view>
<view class="quick-item add-item" @tap="handleAddQuickItem">
<uni-icons type="plus" size="28" color="#666666"/>
<text class="item-name">添加</text>
</view>
</view>
<view class="custom-button" @tap="handleCustomRecord">
<uni-icons type="plusempty" size="24" color="#ffffff"/>
<text>自定义记账</text>
</view>
</view>
<!-- 历史记录页 -->
<view v-if="activeTab === 1" class="history">
<view class="search-bar">
<uni-icons type="calendar" size="20" color="#666666"/>
<text class="current-month">{{ currentMonth }}</text>
<view class="search-input">
<uni-icons type="search" size="20" color="#666666"/>
<input type="text" placeholder="搜索记录" v-model="searchText"/>
</view>
</view>
<view class="record-list">
<view v-for="(group, date) in recordGroups" :key="date" class="record-group">
<view class="date-header">
<text class="date-text">{{ date }}</text>
</view>
<view v-for="(record, index) in group" :key="index" class="record-item">
<uni-icons :type="record.icon" size="24" :color="record.color"/>
<view class="record-info">
<text class="record-type">{{ record.type }}</text>
<text class="record-amount">{{ record.amount }}元</text>
</view>
<view class="record-actions">
<uni-icons type="compose" size="20" color="#666666" @click="handleEdit(record)"/>
<uni-icons type="trash" size="20" color="#666666" @click="handleDelete(record)"/>
</view>
</view>
</view>
</view>
<view class="monthly-summary">
<text class="summary-item">总支出：{{ totalExpense }}元</text>
<text class="summary-item">总收入：{{ totalIncome }}元</text>
</view>
</view>
<!-- 数据报表页 -->
<view v-if="activeTab === 2" class="report">
<view class="chart-header">
<text class="current-range">{{ currentRange }}</text>
<view class="chart-toggle">
<text :class="['toggle-btn', chartType === 'bar' ? 'active' : '']" @tap="setChartType('bar')">柱形图</text>
<text :class="['toggle-btn', chartType === 'pie' ? 'active' : '']" @tap="setChartType('pie')">饼图</text>
</view>
</view>
<view class="chart-area">
<!-- 此处应该是图表区域，用背景色块代替 -->
<view class="chart-placeholder">
<text>图表展示区域</text>
</view>
</view>
<view class="category-list">
<view v-for="(category, index) in categories" :key="index" class="category-item">
<view class="category-info">
<uni-icons :type="category.icon" size="24" :color="category.color"/>
<text class="category-name">{{ category.name }}</text>
</view>
<view class="category-data">
<text class="category-amount">{{ category.amount }}元</text>
<text class="category-percentage">{{ category.percentage }}%</text>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 底部导航栏 -->
<view class="tab-bar">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" @tap="switchTab(index)">
<uni-icons :type="tab.icon" size="24" :color="activeTab === index ? '#4CAF50' : '#666666'"/>
<text :class="['tab-text', activeTab === index ? 'active' : '']">{{ tab.name }}</text>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const activeTab = ref(0);
const searchText = ref('');
const chartType = ref('bar');
const currentDate = ref('2024年3月21日');
const currentMonth = ref('2024年3月');
const currentRange = ref('2024年3月');
const totalExpense = ref('2,580');
const totalIncome = ref('5,000');
const tabs = [
{ name: '快捷记账', icon: 'home' },
{ name: '历史记录', icon: 'calendar' },
{ name: '数据报表', icon: 'chart' }
];
const quickItems = [
{ name: '早餐', amount: 15, icon: 'shop', color: '#FF9800' },
{ name: '午餐', amount: 25, icon: 'shop', color: '#4CAF50' },
{ name: '晚餐', amount: 30, icon: 'shop', color: '#2196F3' },
{ name: '咖啡', amount: 20, icon: 'shop', color: '#795548' },
{ name: '交通', amount: 12, icon: 'shop', color: '#607D8B' },
{ name: '零食', amount: 10, icon: 'shop', color: '#E91E63' }
];
const recordGroups = {
'3月21日 周四': [
{ type: '早餐', amount: 15, icon: 'shop', color: '#FF9800' },
{ type: '午餐', amount: 25, icon: 'shop', color: '#4CAF50' }
],
'3月20日 周三': [
{ type: '晚餐', amount: 30, icon: 'shop', color: '#2196F3' },
{ type: '交通', amount: 12, icon: 'shop', color: '#607D8B' }
]
};
const categories = [
{ name: '餐饮', amount: 1200, percentage: 46, icon: 'shop', color: '#4CAF50' },
{ name: '交通', amount: 500, percentage: 19, icon: 'car', color: '#607D8B' },
{ name: '购物', amount: 800, percentage: 31, icon: 'cart', color: '#FF9800' },
{ name: '其他', amount: 100, percentage: 4, icon: 'more', color: '#9E9E9E' }
];
const switchTab = (index: number) => {
activeTab.value = index;
};
const setChartType = (type: string) => {
chartType.value = type;
};
const handleQuickRecord = (item: any) => {
uni.showToast({
title: '记账成功',
icon: 'success'
});
};
const handleAddQuickItem = (item: any) => {
// 处理
};
const handleEditQuickItem = (item: any) => {
// 处理长按编辑
};
const handleCustomRecord = () => {
// 处理自定义记账
};
const handleEdit = (record: any) => {
// 处理编辑记录
};
const handleDelete = (record: any) => {
// 处理删除记录
};
onMounted(() => {
// 页面加载时的初始化操作
});
</script>
<style>
page {
height: 100%;
}
.page {
height: 100%;
background-color: #f5f5f5;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.scroll-area {
flex: 1;
overflow: auto;
}
/* 快捷记账页样式 */
.quick-record {
padding: 30rpx;
}
.header {
margin-bottom: 40rpx;
}
.date {
font-size: 36px;
color: #333333;
font-weight: bold;
display: block;
margin-bottom: 20rpx;
}
.title {
font-size: 16px;
color: #666666;
}
.quick-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
margin-bottom: 40rpx;
}
.quick-item {
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item-name {
font-size: 14px;
color: #333333;
margin: 16rpx 0;
}
.item-amount {
font-size: 14px;
color: #4CAF50;
font-weight: bold;
}
.custom-button {
position: fixed;
right: 40rpx;
bottom: 140rpx;
background-color: #4CAF50;
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
.custom-button text {
color: #ffffff;
font-size: 12px;
margin-top: 8rpx;
}
/* 历史记录页样式 */
.search-bar {
padding: 20rpx 30rpx;
background-color: #ffffff;
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.current-month {
margin: 0 20rpx;
font-size: 14px;
color: #333333;
}
.search-input {
flex: 1;
background-color: #f5f5f5;
border-radius: 32rpx;
padding: 12rpx 24rpx;
display: flex;
align-items: center;
}
.search-input input {
flex: 1;
margin-left: 16rpx;
font-size: 14px;
}
.record-group {
margin-bottom: 20rpx;
background-color: #ffffff;
padding: 20rpx 30rpx;
}
.date-header {
padding-bottom: 20rpx;
border-bottom: 1px solid #f0f0f0;
}
.date-text {
font-size: 14px;
color: #666666;
}
.record-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f0f0f0;
}
.record-info {
flex: 1;
margin-left: 20rpx;
}
.record-type {
font-size: 14px;
color: #333333;
}
.record-amount {
font-size: 14px;
color: #4CAF50;
margin-left: 20rpx;
}
.record-actions {
display: flex;
gap: 20rpx;
}
.monthly-summary {
background-color: #ffffff;
padding: 30rpx;
display: flex;
justify-content: space-between;
}
.summary-item {
font-size: 14px;
color: #333333;
font-weight: bold;
}
/* 数据报表页样式 */
.chart-header {
padding: 30rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
}
.current-range {
font-size: 16px;
color: #333333;
font-weight: bold;
}
.chart-toggle {
display: flex;
background-color: #f5f5f5;
border-radius: 32rpx;
padding: 4rpx;
}
.toggle-btn {
padding: 12rpx 24rpx;
font-size: 14px;
color: #666666;
border-radius: 28rpx;
}
.toggle-btn.active {
background-color: #4CAF50;
color: #ffffff;
}
.chart-area {
margin: 20rpx 0;
padding: 30rpx;
background-color: #ffffff;
}
.chart-placeholder {
height: 400rpx;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
}
.chart-placeholder text {
color: #999999;
font-size: 14px;
}
.category-list {
background-color: #ffffff;
padding: 30rpx;
}
.category-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f0f0f0;
}
.category-info {
display: flex;
align-items: center;
}
.category-name {
margin-left: 20rpx;
font-size: 14px;
color: #333333;
}
.category-data {
display: flex;
align-items: center;
}
.category-amount {
font-size: 14px;
color: #333333;
margin-right: 20rpx;
}
.category-percentage {
font-size: 14px;
color: #999999;
}
/* 底部导航栏样式 */
.tab-bar {
display: flex;
background-color: #ffffff;
padding: 16rpx 0;
border-top: 1px solid #f0f0f0;
flex-shrink: 0;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.tab-text {
font-size: 12px;
color: #666666;
margin-top: 8rpx;
}
.tab-text.active {
color: #4CAF50;
}
</style>我们直接运行，查看效果
四、最后
有了上面的AI生产力工具，妈妈就再也不用担心，我不会小程序页面设计的问题了
本文标签： 不会小程序设计10分钟AI工具助你从需求到uniapp开发
版权声明：本文标题：不会小程序设计？10分钟AI工具助你从需求到uniapp开发 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1748098734a2807307.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论