不会小程序设计？10分钟AI工具助你从需求到uniapp开发

原创

半月无霜

发布于 2025-03-29 12:02:49

3520

文章被收录于专栏：半月无霜半月无霜

一、前言

之前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生产力工具，妈妈就再也不用担心，我不会小程序页面设计的问题了

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S12#AI进化论

创意玩法

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S12#AI进化论

创意玩法

登录后参与评论

0 条评论

热度