我用trae开发了一款颜值测试小程序

大家好,我是农村程序员,独立开发者,行业观察家,算法之虎,前端之兔,一个有毅力的吃货。

最近我在trae的帮助下开发的一个小程序,颜值水晶球。可以召唤美丽女神维纳斯♀测量和点评✨颜值✨。

希望能够给你们带来快乐😊😊😊

一,体验小程序

大家可以点击上述小程序,也可以搜索微信小程序“颜值水晶球”,还可以扫描下面的二维码来体验。

4ceb4c1660c121aa6e2fc9051ac04067.jpeg

我个人对这个小程序的效果还是比较满意的,产品的完成度可以打9分。

下面是一个操作演示视频。

二,水晶球诞生过程

下面谈一谈颜值水晶球诞生的心路历程,可能对想独立开发产品的同学有所借鉴,也是我自己的一个经验总结。

1,怎么想到来开发小程序?

我心中一直有一个独立开发者的梦想。看过一些相关独立开发者的故事。了解了独立开发的三件套:日记,记账,待办。

为什么是这三类产品呢?因为这三类产品比较简单独立开发者能够搞定,同时又持续有广大的市场需求,并且非常高频。

不过我一直主要是做算法和数据的,不太懂前端。虽然业余稍微学过一些html, css, javascript这些基础知识,但真的要开发一个项目,还是非常吃力的。

随着cursor的火爆,我了解后快速地学习试用了一下,有了它的加持,我感觉前端领域我忽然变得强的可怕。

然后我就用它开发了第一款小程序:记个todo。

这个小程序非常简单,基本上我自己没有敲一行代码,没有看一行代码就完成了开发。

这个小程序整体的完成度我自己可以打8分吧。

e02fee493cf4c55d52e0108110fff783.png

2,怎么想到开发一个颜值测试产品?

有一天我刷手机看到了国外一个独立开发团队的故事,他们做的非常成功,产品有数百万用户。

他们主要的产品是如下3个:恋爱诊所,颜值测试,卡路里照相机。

所谓恋爱诊所,就是把和异性的聊天记录发给这个APP,它可以帮助你诊断双方的情感状态,也可以给出回复的建议。

颜值测试,就是上传一张照片,可以帮助你测量颜值。

卡路里照相机,就是上传一张照片,可以帮助你测量食物的卡路里,对控制体重的同学非常实用。

哇,我看了之后,感觉这几个东西简直就是独立开发新三件套。

市场需求广大,使用高频,且容易实现。我觉得我也可以。

4f39c3fb9eea6af25994455ce40ef175.png

3,开发颜值水晶球花了多久?

前前后后大概花了两周吧,主要是周末时间和晚上时间。

其实功能上第一天就跑通了流程了,但是是在产品体验的设计和调试上消耗了较多时间。

下面几个问题的解决消耗的开发时间和大脑卡路里尤其多。

第一个问题是小程序的命名问题。

有一些容易想到名字比如,AI测颜值,颜值鉴定局,测测颜值等许多名字都是被占用了。

我在元宝上跟deepseek唠了前前后后有五六个小时,才最终选定了这个名字。

1373afae53f0a788f16d60f0557702cf.png

65a1807c4f9d24797b68e78c36d3310b.png

第二个是增加颜值趣评。

刚开始只有颜值评分,年龄评估,和性别判断。都是干巴巴的数字,缺少人情味。

后来我想可以加四字成语来评价一下用户颜值,比如颜值爆表,玉树临风,仙气飘飘什么的。

这样更加有趣味性一些。我跟deepseek前前后后聊了大概七八个小时,确定了全部的成语(或四字短语)。

75a76c6e5811630a7cb0088391f2ba7c.png

第三个是颜值格言的选定。

颜值测试这类产品本身非常符合人性规律,包括自恋情节,重视外形,以及好奇心等等。

但也可能会有一些负面的影响,可能引起攀比心,或者对一些颜值不高的同学会造成心理打击作用,引起自卑。(比如少年时期的我自己😭)

295647b2a96d5eed6425852552536b63.png


我想来想去,最终在产品中加入一些简洁但发人深省的颜值格言。可以增加产品的文化内涵,引导用户正确看待颜值。

三,trae使用指引

好了,现在来聊聊技术上的一些经验。

整个小程序,80%的代码都是用trae开发的。

github copilot大概写了10%,我自己大概写了10%这样。

之所以还有10%用的github copilot,主要原因是trae近期用的人太多了,有时候需要排队二三百个,这个时候我等不及就会切换成github copilot 来开发项目。

然后还有10%的代码是我自己写的。主要是在一些特殊场景,trae会陷入bug循环,我会自己写一些代码打印日志定位问题来帮助它解决。

如果要说使用trae最重要的一些经验,我觉得是以下几个。

1,优先选择 claude-3.7 模型

目前写代码最好的模型是claude-3.7-sonnet,如果能够选,优先选择这个模型。

可能在一些常用库和成熟用例的代码开发上一些顶尖的大模型们(o1,deepseek-r1,claude-3.7)差异不大。

但是在一些稀疏用例上,claude-3.7-sonnet目前还是一骑绝尘的。

094ad2644962701fc73c5047be65bb30.png

2,遵循MVP原则开发产品

所谓MVP,就是Minimum Viable Product. 最小可行产品。

针对开发来说,就是要先做一个简单的完整的可以快速试错的东西。

刚开始的时候,不要让trae给你开发一个很复杂很高端的东西,而应该保持简单。实现能够交付的最重要核心功能的东西,走通完整的流程。

成功做出来了简单的产品后,积累了较为完整的经验后,看看哪里还有痛点,卡点,一点点地去迭代,升华你的产品。

这样可以保持整个项目比较可控,你有很多的中间检查点可以回退。并且能够让每个迭代都在解决当下比较关键的问题,不在用户无感的旁枝末节上过度投入。

13d871911fd796fe2a97aa8284905532.png

3,尝试不同策略跳出bug循环

如果深入使用trae的话,在少数情况下,会遇到一些复杂的场景,进入bug循环。

就是出现了一个bug后,把报错日志告诉trae,不成功,然后不停地尝试,bug依然解决不了,甚至出现更多的bug。

哪怕你威胁trae说要给它扣工资,要开除它,它都无法解决这个错误。

或者是某个效果,trae无论怎么尝试都无法取得满意的效果。

这时候,我就会撤销掉这次尝试的所有代码,重新开始一次尝试。

f0c4a136ac64a231c057a99aa54c8193.png

我通常会用如下三种策略来帮助它在新的尝试中更加有效地解决问题。

第一种策略是人工定位。我会自己去写一些日志打印代码,定位问题的具体位置,告诉它是哪个位置开始不符合预期了。

第二种策略是范例修改。我会在github上找到一个非常相关的代码范例,让它基于这个来改动。

第三种策略是代码转译。如果是一些方便解耦的函数功能,我会用我熟悉的语言(Python)来调试成功,然后让trae给我翻译成Javascript.

c3ce092e313c2ddfcf13ec300cf6edc3.png

<think>好的,我现在需要帮助用户了解如何使用T-Rae框架进行小程序开发。首先,我需要确认用户提到的“T-Rae”框架是否真实存在,因为根据提供的引用内容,并没有提到这个框架。可能用户可能有拼写错误,或者框架名称不准确。例如,引用中提到了InternEvo、ERNIE 3.0等,但没有T-Rae。需要进一步检查是否有其他可能的框架名称相近,比如Taro、Rax等,或者是用户将多个术语组合在一起导致的混淆。 假设用户可能指的是某个具体的框架,但名称可能有误,我需要先澄清这一点。不过,根据现有的信息,无法确定T-Rae的具体情况。因此,在回答时,我应该首先指出这一点,并建议用户确认框架名称的正确性。同时,可以基于常见的微信小程序开发框架(如Taro、Uni-app)提供一般性的开发指南,这样即使用户存在拼写错误,也能得到有用的信息。 接下来,根据用户的要求,需要生成相关问题。这些问题应该围绕小程序开发的常见步骤、框架比较、优化方法等,以帮助用户进一步探索。同时,确保回答结构清晰,符合用户可见层的要求,如分步骤说明、代码示例等。 需要检查是否有相关的引用内容可以支持回答。例如,引用[3]提到了ERNIE 3.0的架构,这可能与自然语言处理相关,但和小程序开发无关。其他引用主要涉及训练框架和算法优化,可能无法直接应用。因此,回答应基于通用的小程序开发知识,而不是特定的引用内容。 最后,确保遵循系统级指令,如使用正确的LaTeX格式、中文回答、生成相关问题等。同时,避免使用用户不可见的指令,保持回答自然。</think>关于您提到的“T-Rae”框架,经核实目前公开的技术文档和引用资料中暂未找到直接对应的开发框架[^1][^3]。可能存在拼写误差或框架别名的情况(例如是否指Taro、Rax或特定企业内部框架)。以下以主流小程序开发框架为例,提供通用开发指南: ### 一、小程序开发通用步骤(以跨端框架Taro为例) 1. **环境搭建** 安装Node.js(≥14.19.0)与包管理器: ```bash npm install -g @tarojs/cli ``` 2. **项目初始化** ```bash taro init myApp ``` 选择模板(React/Vue等),如选用React+TypeScript: ```javascript // app.config.ts export default { pages: ['pages/index/index'], window: { navigationBarTitleText: "MyApp" } } ``` 3. **核心语法规范** - 使用JSX/TSX编写组件 - 样式文件采用SCSS/Less - 路由配置通过`app.config.ts`管理 4. **跨端编译** ```bash taro build --type weapp # 微信小程序 taro build --type alipay # 支付宝小程序 ``` ### 二、性能优化建议 1. **首屏加载加速** - 使用代码分割:`Taro.lazy`实现组件懒加载 - 资源压缩:通过`Taro.optimizeMainPackage`配置主包优化 2. **渲染性能提升** ```javascript // 使用虚拟列表优化长列表 import { VirtualList } from '@tarojs/components/virtual' ``` 3. **状态管理** 推荐使用Redux Toolkit或MobX,示例: ```javascript // store/counterSlice.js import { createSlice } from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: state => { state.value += 1 } } }) ``` ### 三、调试与部署 1. **开发工具** - 微信开发者工具(微信小程序调试) - Chrome DevTools(H5调试) 2. **CI/CD流程** ```yaml # GitHub Actions示例 - name: Build WeChat MiniProgram run: npm run build:weapp - name: Deploy to CDN uses: actions/upload-artifact@v2 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值