当前位置：首页 > news >正文

利用kimi编程助手从0到1开始搭建小程序！

news 2025/8/29 22:55:36

电脑崩了，更新5次小程序，什么都不剩！（但是遗留下来了一些东西，开源的思维和不断地对于技术的使用和掌握“一个软件更多的哲学：（01）优秀的ui页面设计（02）更加细化的数据结构存储（去发现更多的数据存在点，可以培养出更好的用户依赖！）”。）

开源竞争（自己没有办法完全掌握技术的时候就开源掉，培养出更多的依赖，让更多的人完善你的技术，那么这不就是在砸罐子吗？一个行业里面你不去砸罐子，其他人就会砸罐子，你不如先砸，还能听个响。）

项目的逻辑结构图：

pages

miniprogram
├── pages
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── lieFlat
│ │ ├── lieFlat.wxml
│ │ ├── lieFlat.wxss
│ │ ├── lieFlat.js
│ │ └── lieFlat.json
│ ├── checkIn
│ │ ├── checkIn.wxml
│ │ ├── checkIn.wxss
│ │ ├── checkIn.js
│ │ └── checkIn.json
│ └── detail
│ ├── detail.wxml
│ ├── detail.wxss
│ ├── detail.js
│ └── detail.json
├── Diet
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── 18HourFasting
│ │ ├── 18HourFasting.wxml
│ │ ├── 18HourFasting.wxss
│ │ ├── 18HourFasting.js
│ │ └── 18HourFasting.json
│ ├── 24HourFasting
│ │ ├── 24HourFasting.wxml
│ │ ├── 24HourFasting.wxss
│ │ ├── 24HourFasting.js
│ │ └── 24HourFasting.json
│ ├── 32HourFasting
│ │ ├── 32HourFasting.wxml
│ │ ├── 32HourFasting.wxss
│ │ ├── 32HourFasting.js
│ │ └── 32HourFasting.json
│ ├── 40HourFasting
│ │ ├── 40HourFasting.wxml
│ │ ├── 40HourFasting.wxss
│ │ ├── 40HourFasting.js
│ │ └── 40HourFasting.json
│ └── 48HourFasting
│ ├── 48HourFasting.wxml
│ ├── 48HourFasting.wxss
│ ├── 48HourFasting.js
│ └── 48HourFasting.json
├── Learning
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── EnglishLearning
│ │ ├── EnglishLearning.wxml
│ │ ├── EnglishLearning.wxss
│ │ ├── EnglishLearning.js
│ │ └── EnglishLearning.json
│ ├── MathLearning
│ │ ├── MathLearning.wxml
│ │ ├── MathLearning.wxss
│ │ ├── MathLearning.js
│ │ └── MathLearning.json
│ └── ComputerScienceLearning
│ ├── ComputerScienceLearning.wxml
│ ├── ComputerScienceLearning.wxss
│ ├── ComputerScienceLearning.js
│ └── ComputerScienceLearning.json
├── Shaping
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── Aerobics
│ │ ├── Aerobics.wxml
│ │ ├── Aerobics.wxss
│ │ ├── Aerobics.js
│ │ └── Aerobics.json
│ ├── AnaerobicExercise
│ │ ├── AnaerobicExercise.wxml
│ │ ├── AnaerobicExercise.wxss
│ │ ├── AnaerobicExercise.js
│ │ └── AnaerobicExercise.json
│ └── FlexibilityStretching
│ ├── FlexibilityStretching.wxml
│ ├── FlexibilityStretching.wxss
│ ├── FlexibilityStretching.js
│ └── FlexibilityStretching.json
├── HealthExercises
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── EightSectionBrocade
│ │ ├── EightSectionBrocade.wxml
│ │ ├── EightSectionBrocade.wxss
│ │ ├── EightSectionBrocade.js
│ │ └── EightSectionBrocade.json
│ ├── Baduanjin
│ │ ├── Baduanjin.wxml
│ │ ├── Baduanjin.wxss
│ │ ├── Baduanjin.js
│ │ └── Baduanjin.json
│ ├── MuscleTendonChangeClassic
│ │ ├── MuscleTendonChangeClassic.wxml
│ │ ├── MuscleTendonChangeClassic.wxss
│ │ ├── MuscleTendonChangeClassic.js
│ │ └── MuscleTendonChangeClassic.json
│ ├── TaiChi
│ │ ├── TaiChi.wxml
│ │ ├── TaiChi.wxss
│ │ ├── TaiChi.js
│ │ └── TaiChi.json
│ ├── Stretching
│ │ ├── Stretching.wxml
│ │ ├── Stretching.wxss
│ │ ├── Stretching.js
│ │ └── Stretching.json
│ ├── StandingPile
│ │ ├── StandingPile.wxml
│ │ ├── StandingPile.wxss
│ │ ├── StandingPile.js
│ │ └── StandingPile.json
│ └── GeneralStretching
│ ├── GeneralStretching.wxml
│ ├── GeneralStretching.wxss
│ ├── GeneralStretching.js
│ └── GeneralStretching.json
├── Cleaning
│ ├── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── ClothesCleaning
│ │ ├── ClothesCleaning.wxml
│ │ ├── ClothesCleaning.wxss
│ │ ├── ClothesCleaning.js
│ │ └── ClothesCleaning.json
│ ├── ShoesCleaning
│ │ ├── ShoesCleaning.wxml
│ │ ├── ShoesCleaning.wxss
│ │ ├── ShoesCleaning.js
│ │ └── ShoesCleaning.json
│ ├── PantsCleaning
│ │ ├── PantsCleaning.wxml
│ │ ├── PantsCleaning.wxss
│ │ ├── PantsCleaning.js
│ │ └── PantsCleaning.json
│ ├── Underwear
│ │ ├── Underwear.wxml
│ │ ├── Underwear.wxss
│ │ ├── Underwear.js
│ │ └── Underwear.json
│ ├── Underpants
│ │ ├── Underpants.wxml
│ │ ├── Underpants.wxss
│ │ ├── Underpants.js
│ │ └── Underpants.json
│ ├── Socks
│ │ ├── Socks.wxml
│ │ ├── Socks.wxss
│ │ ├── Socks.js
│ │ └── Socks.json
├── app.js
├── app.json
└── app.wxss

制作出这段代码的文字部分：

帮我从0开始搭建这个小程序，该微信小程序里面有两个tarbar页面（“成长列表“和”躺平显示”）转接页面一个总列表（在成长列表的显示页面中有饮食/养生/塑形/学历提升/清洁的页面跳转口，点击饮食页面之后会有18小时轻断食,24小时轻断食,32小时轻断食,40小时轻断食,48小时轻断食,的页面跳转口，饮食（18小时轻断食,24小时轻断食,32小时轻断食,40小时轻断食,48小时轻断食,）

目前来说，自己细化程度还不够，同时个人在细化软件时间的还要加强（这里分享一个方法：使用forest进行软件时间的细化！同时还有一个软件叫做“禅定空间”，可以对于代办事迹进行四象限法则的运用，然后运用一个记忆助手实现对于遗忘的有效对抗。）。

养生(八部金刚功，文式易筋经，易筋经，八段锦，太极，拉伸，站桩)点击养生页面之后会有八部金刚功，文式易筋经，易筋经，八段锦，太极，拉伸，站桩的页面挑战口，以此类推，塑形（有氧运动和无氧运动），学历提升（英语学习，数学学习，专业课学习），清洁（脸部清洁，帽子清洁，衣服清洁，鞋子清洁，内衣清洁，袜子清洁）），成长列表点击其中每一个大类之后，会进入小类当中可以进行打卡，打卡的次数将其存储在云数据当中！

使用kimi编程助手，实际情况：我自己对于计算机的知识还是一个盲点的状态，所以我不会停止使用技术的。利用完全的分布式结构，形成一条由分布式学习法形成系统性知识结构！

分布式的思维用到编程生活中：

定时定点对于代码进行打卡，这里我发出一个感叹，在我们平时的生活中，我们总是以人为参考系，可是最近我有一种想法，就是完全以数据为参考系，以数据为参考系，你就可以和各种各样形形色色的人，进行接触。

以数据为参考系，是你的制胜法宝吗？是的，那你为什么还敢说出来呢？因为开源竞争（自己没有办法彻底掌握技术的时候就开源掉，培养出更多的依赖，让更多人完善你的依赖，那么这不就是在砸罐子吗？一个行业里面总会有人砸罐子的，你不去砸，其他人就会砸，你不如先砸，还能听个响。）

一个躺平显示（躺平显示这个页面显示，饮食/养生/塑形/学历提升/清洁这些项目的总次数，点击以后开始跳转，分别开始显示这些页面以下相关次数增加

饮食（18小时轻断食,24小时轻断食,32小时轻断食,40小时轻断食,48小时轻断食,）

养生(八部金刚功，文式易筋经，易筋经，八段锦，太极，拉伸，站桩)，

塑形（有氧运动和无氧运动），

学历提升（英语学习，数学学习，专业课学习），

清洁（脸部清洁，帽子清洁，衣服清洁，鞋子清洁，内衣清洁，袜子清洁）。）

次数增加逻辑就是，增加了一个小项目之后，大的项目的逻辑也开始进行一个增加，躺平显示点击其中每一个大类之后，会进入小类当中从云数据库中进行调用以显示进行成长列表数据的显示。

目前的代码包：

app.json

{"pages": ["pages/index/index", "pages/lieFlat/lieFlat" ,"pages/checkIn/checkIn","pages/detail/detail","pages/Diet/index/index","pages/Diet/18HourFasting/18HourFasting","pages/Diet/24HourFasting/24HourFasting","pages/Diet/32HourFasting/32HourFasting","pages/Diet/40HourFasting/40HourFasting","pages/Diet/48HourFasting/48HourFasting","pages/Learning/index/index","pages/Learning/EnglishLearning/EnglishLearning","pages/Learning/MathLearning/MathLearning","pages/Learning/ComputerScienceLearning/ComputerScienceLearning","pages/Shaping/index/index","pages/Shaping/Aerobics/Aerobics","pages/Shaping/AnaerobicExercise/AnaerobicExercise","pages/Shaping/FlexibilityStretching/FlexibilityStretching","pages/HealthExercises/index/index","pages/HealthExercises/EightSectionBrocade/EightSectionBrocade","pages/HealthExercises/Baduanjin/Baduanjin","pages/HealthExercises/MuscleTendonChangeClassic/MuscleTendonChangeClassic","pages/HealthExercises/TaiChi/TaiChi","pages/HealthExercises/Stretching/Stretching","pages/HealthExercises/StandingPile/StandingPile","pages/HealthExercises/GeneralStretching/GeneralStretching","pages/Cleaning/index/index","pages/Cleaning/ClothesCleaning/ClothesCleaning","pages/Cleaning/ShoesCleaning/ShoesCleaning","pages/Cleaning/PantsCleaning/PantsCleaning","pages/Cleaning/Underwear/Underwear","pages/Cleaning/Underpants/Underpants","pages/Cleaning/Socks/Socks"],"window": {"navigationBarTextStyle": "black","navigationStyle": "custom","navigationBarTitleText": "健康生活小程序"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "成长列表"},{"pagePath": "pages/lieFlat/lieFlat","text": "躺平显示"}]},"style": "v2","renderer": "skyline","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"defaultContentBox": true,"tagNameStyleIsolation": "legacy","disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

/pages/index/index

/pages/index/index.wxml

<view class="category-list"><view class="category-item" wx:for="{{categories}}" wx:key="name" data-name="{{item.name}}" data-key="{{item.key}}" bindtap="goToSubCategory"><text>{{item.name}}</text></view>
</view>

/pages/index/index.wxss

Page({data: {categories: [{ name: '饮食', key: 'Diet' },{ name: '养生', key: 'HealthExercises' },{ name: '塑形', key: 'Shaping' },{ name: '学历提升', key: 'Learning' },{ name: '清洁', key: 'Cleaning' },]},goToSubCategory: function(e) {const categoryKey = e.currentTarget.dataset.key;// 构建跳转URL，确保你的子分类页面路径正确let url = `/pages/${categoryKey}/index/index`;wx.navigateTo({url: url});}});

/pages/index/index.json

{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"}
}

/pages/index/index.js

/* pages/index/index.wxss */
.page {display: flex;flex-direction: column;align-items: center;justify-content: flex-start;min-height: 100%;background-color: #fff;padding: 20px;}.category-list {width: 100%;margin-top: 20px;}.category-item {width: 100%;padding: 15px;margin-bottom: 10px;background-color: #f8f8f8;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);display: flex;align-items: center;justify-content: space-between;font-size: 18px;color: #333;transition: transform 0.3s, box-shadow 0.3s;}.category-item:last-child {margin-bottom: 0;}.category-item:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}.category-name {flex-grow: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 为没有子页面的分类项添加样式 */.category-item--empty {cursor: default;opacity: 0.5;}.category-item--empty:hover {transform: none;box-shadow: none;}

（索引的页面结构统一采用此逻辑！）

以pages/Learning/index为列子：

pages/Learning/index/index.wxml

<!--pages/Learning/index/index.wxml-->
<view class="subject-list"><block wx:for="{{subjects}}" wx:key="name"><view class="subject-item" data-name="{{item.name}}" data-key="{{item.key}}" bindtap="goToSubject"><text>{{item.name}}</text></view></block>
</view>

pages/Learning/index/index.js

Page({data: {subjects: [{ name: '英语学习', key: 'EnglishLearning' },{ name: '数学学习', key: 'MathLearning' },{ name: '专业课学习', key: 'ComputerScienceLearning' },]},goToSubject: function(e) {const subjectKey = e.currentTarget.dataset.key;wx.navigateTo({url: `/pages/Learning/${subjectKey}/${subjectKey}`});}});

pages/Learning/index/index.wxss

/* pages/Learning/index/index.wxss */
.subject-list {display: flex;flex-direction: column;padding: 10px;}.subject-item {margin: 10px 0;padding: 10px;background-color: #f8f8f8;border-radius: 5px;text-align: center;font-size: 16px;color: #333;transition: background-color 0.3s;}.subject-item:hover {background-color: #ebebeb;}

数据库的存储功能不采用本地存储，而是采用微信云中云数据库。

前端页面设计开始：

已经访问了微信公众平台，注册成为开发者，并创建了小程序！

在小程序的管理后台，开通云开发服务。

开发者工具设置

下载并安装微信开发者工具。
使用你的小程序AppID登录开发者工具。

初始化云开发环境

在开发者工具中，打开云开发的控制台。
创建一个新的云环境，或者使用默认的环境。

开始搭建小程序的前端页面：

配置全局设置

开始完善成长列表这个显示页面：

成长列表已经完善成功：

完善养生操索引里面的逻辑

完善养生操里面的逻辑当点击养生操里面（进入到"pages/HealthExercises/index/index",时）开始将我引到到其他相关页面。八部金刚功，文式易筋经，易筋经，八段锦，太极，拉伸，站桩这几个页面，先完成index页面的基础索引结构！

各个大项目的索引逻辑已经完善成功：

完善养生操里面的增加逻辑

当我进入到八部金刚功，文式易筋经，易筋经，八段锦，太极，拉伸，其中一个页面的时候，每一个页面都是独立存在的页面，我在这个页面要完成以下几个功能：进入到这个页面中自动打卡，并显示已经连续练习了该项目的基础天数，同时显示出这个连续练习最高项目的基础天数，当自己练习完了以后，将这个记录进行封存，当用户开始查看的时候，方便直接查看！同时显示出今天已经练习的时间和已经累计练习的时间，同时配置出适当的生命周期，当用户进入到这个页面的时候，开始查询相关的数据，同时显示养生操的次数（一个单独存在的数据库，当点击这个项目的时候，养生操的数字也开始进行一个变化），练习单个项目的次数，有一个按钮，按钮的名字叫做“增加次数”，点击增加次数的时候，总的项目和养生操的项目会同时进行+1，加完1之后，需要快速在页面显示中更新出来！备注：当我点击叫做“增加次数”之后，让其过了60s以后再次开始点击。

要完成你描述的页面功能，我们需要实现以下几个关键点：

页面布局：使用WXML来创建页面结构（页面布局显示：连续打卡天数，最高连续打卡天数，养生操练习次数，八部金刚功打卡次数）。
页面样式：使用WXSS来设计页面的样式。
数据加载与显示：使用JavaScript来从云数据库加载数据，并在页面上显示。
打卡逻辑：当用户进入页面时，自动进行打卡。
数据更新：当用户点击“增加次数”按钮时，更新云数据库中的数据（点击按钮之后，养生操和八部金刚功里面的数据开始进行一个同步加一），并在页面上显示最新的数据。
防作弊机制：确保用户在60秒内只能点击一次“增加次数”按钮。

心得分享：

感觉自己能够做的事情始终是有限的状态，先完善页面逻辑结构（可以用中文的方式开始编程，事后让kimi帮助你变成英文状态！速度提升杠杠的，同时代码转换率也是很高的！ai在有一些细节点的上略微显示的有些不足，但是帮助个人进行编程的提效的速度可以说，非常快，快的让人没有办法能够想象！）

以前的迭代更新的模式也要进行一个改变，就像人工智能知道如何给自己生成最适合自己的意识神经元一样（即科研人员让人工智能给自己一个可以让自己拥有生命的神经元方向！），使用ai的实践过程中，自己也可以不断地获取知识，获取信息，这个时候，自己的思维也会得到一个更加开阔的前进方向！

关于ai形式下，其实我觉得，ai恰恰可以从最大程度激发一个人的潜力：

我在和ai不断地磨合的过程中，我学习知识的速度明显快于自己没有运用ai的时候（最为重点的关键：获取知识的经验体系更多的是项目经验而非书本上的累计经验体系！同时也是一种更加全面的个性化学习），

1024年程序员节来回的路费我花了（340元，只换回来了一句话：我觉得这句话很值钱）：

ai时代，没有任何一个人可以掌握ai，就像老师下午听的会议的时候，所搞得游戏工业化一样（游戏工业化，以前一个不敢想象的事情，现在就开始发现我自己的现实生活当中。）

以及对于设计类和美术类专业学生的忠告（作用对象：江汉大学，而我只是一个小小的普通专科生），但是这句话，让我整个人开始完成了一个蜕变。

我选择开源（我自己没有办法能够完全掌握了ai的时候，我选择开源这个ai，培养出更多的技术以来，让更多的人来帮助我自己完善我的技术，你会说，这不是在砸计算机行业的罐子吗？一个行业里面，你不去砸罐子，其他人就会开始砸罐子！不如，你先砸，你还能听个响声，今天我的电脑崩了，2年积累的各种研究资料和数据，现在就像一张白纸一样，但是能够支撑我翻身的，只需要这样一句话就够了！）

开始就在csdn的笔记中开始记录这些错误，给ai提供关于自己小程序更加准确的训练数据：

随着人工智能不断地使用，程序员最终会变成一个劳动密集型产业（每个人都得掌握相关的编程语言。）