不敲代码用ChatGPT开发一个App

先说下背景,有一天我在想 ChatGPT 对于成熟的开发者来说已经是一个非常靠谱的助手了,身边也确实有很多同事把它作为一个离不开的助理担当。

但是如果我只是略微懂一点前端知识的新人,了解 HTML、CSS、JS 相关的知识,想开发一个安卓 App ,我应该如何利用 ChatGPT 这样的工具呢?

想法思路

如果让我现在直接去用 ChatGPT 开发一个 App 肯定也不靠谱,毕竟过程中还得看问题,对于比较新晋的开发者来说,debug 也是一个非常上头的工作。但是如果让他帮我生成一个微信小程序,那就能顺利拿捏住了,后面再利用其他工具直接把这个小程序转为 App 就可以了。

思路确定,说搞就搞!

给ChatGPT描述需求

我发现虽然现在ChatGPT能够非常友好的帮助开发者完成各项任务,但是有一个非常重要的前提就是你需要懂得如何有效的给出命令,让他能够理解你的需求描述。这一点非常重要,我个人认为大家平时的工作中也需要有意识的训练自己的文字、语言表达能力。

我这里为了让整个流程更简单一些,我直接让ChatGPT帮我生成一个时钟小程序,能够以大号字体显示当前的时间,另外我希望时间字体是宇宙蓝,背景是纯黑色。

为了让ChatGPT能够更快理解我的描述,我将需求重新排了一个格式:

代码需求:开发一个微信小程序
功能描述:屏幕中间显示当前的日期和时间,日期在上,时间在下。时间的显示需要大号字体,字体颜色为宇宙蓝,整个背景是全屏纯黑色。

接下来就是ChatGPT的表演了:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小程序需求实现

因为我后续需要将小程序转为 App,经过技术的调研,发现现在 FinClip 是可以直接将小程序转为 App ,并且这个工具可以兼容微信代码,于是我直接在 FinClip 创建小程序项目,为方便后续的小程序转 App,开发工具也使用使用的 FIDE。

下面我们看看在上面的实现情况:

在这里插入图片描述

直接把 ChatGPT 生成的代码复制粘贴到开发工具对应的页面中,不要太爽。
在这里插入图片描述

快速生成App

前面也说到了假设我是个只懂 HTML、CSS、JS 相关知识的小白型开发者,直接上手 App 是有难度的,但是做一个小程序是基本能应付的,这里就可以借用 FinClip 开发工具的小程序转 App 功能。
在这里插入图片描述

整个过程跟着弹窗的提示操作就好,没有太大的难度。

后续系统会生成一个工程文件,放到 Android Studio 也能正常打开,并能后续根据自己的需求进行优化更改。
在这里插入图片描述

个人感想

市面中出现了越来越多的 Ai 工具,例如 ChatGPT 还可以用到文字创作、想法启迪等很多场景中,我们只要用的恰当,会实打实的帮我们提升工作的效率。

以上是我以一个完全小白的开发者角度使用 ChatGPT 开发小程序再用其他工具转 App 的实现路径。

另外,实践发现 GPT3.5 可能出现给的代码无法运行的情况,GPT4.0 是没问题的,如果大家使用3.5给出的代码无法用,可以用4.0试试,欢迎大家拍砖。

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明) Chatgpt学习资料项目资料 用于实战ChatgptAI技术 源代码 供参考(代码+使用说明)
### 回答1: <Page> <View> <Image class="logo" src="logo.png" /> <Text class="title">Welcome to ChatGPT!</Text> </View> <ScrollView> <View class="item"> <Image class="item-img" src="item1.png" /> <Text class="item-title">Item 1</Text> <Text class="item-price">$10.00</Text> </View> <View class="item"> <Image class="item-img" src="item2.png" /> <Text class="item-title">Item 2</Text> <Text class="item-price">$20.00</Text> </View> </ScrollView> </Page> ### 回答2: 微信小程序是一种基于微信平台的轻量级应用程序,可以在微信中直接使用,便于开发和传播。下面是一个简单的仿照淘宝APP首页的微信小程序页面代码示例: ```html <!-- index.wxml --> <view class="container"> <!-- 顶部搜索栏 --> <view class="search-bar"> <input class="search-input" placeholder="搜索商品" /> <button class="search-btn">搜索</button> </view> <!-- 轮播图 --> <swiper class="swiper-container"> <swiper-item wx:for="{{bannerList}}" wx:key="index"> <image class="swiper-img" src="{{item.imageUrl}}" /> </swiper-item> </swiper> <!-- 商品列表 --> <view class="goods-list"> <view class="goods-item" wx:for="{{goodsList}}" wx:key="index"> <image class="goods-img" src="{{item.imageUrl}}" /> <view class="goods-name">{{item.name}}</view> <view class="goods-price">¥{{item.price}}</view> </view> </view> </view> ``` ```json // index.json { "navigationBarTitleText": "淘宝首页" } ``` ```css /* index.wxss */ .container { padding: 20rpx; } .search-bar { display: flex; align-items: center; height: 80rpx; background-color: #f2f2f2; padding: 0 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; } .search-input { flex: 1; height: 60rpx; line-height: 60rpx; padding: 0 20rpx; border: none; background-color: transparent; } .search-btn { height: 60rpx; line-height: 60rpx; padding: 0 20rpx; border: none; background-color: #ff5000; color: #fff; border-radius: 10rpx; } .swiper-container { height: 400rpx; margin-bottom: 20rpx; } .swiper-img { width: 100%; height: 100%; } .goods-list { display: flex; flex-wrap: wrap; } .goods-item { width: 50%; padding: 10rpx; } .goods-img { width: 100%; height: 200rpx; } .goods-name { margin-top: 10rpx; font-size: 28rpx; font-weight: bold; } .goods-price { margin-top: 10rpx; color: #ff5000; font-size: 26rpx; } ``` ```javascript // index.js Page({ data: { bannerList: [{ imageUrl: 'https://example.com/banner1.jpg' }, { imageUrl: 'https://example.com/banner2.jpg' }, { imageUrl: 'https://example.com/banner3.jpg' }], goodsList: [{ imageUrl: 'https://example.com/goods1.jpg', name: '商品1', price: 100.00 }, { imageUrl: 'https://example.com/goods2.jpg', name: '商品2', price: 200.00 }, { imageUrl: 'https://example.com/goods3.jpg', name: '商品3', price: 300.00 }] } }) ``` 以上是一个简单的仿照淘宝APP首页的微信小程序页面代码示例,包括了顶部搜索栏、轮播图和商品列表。通过微信小程序开发工具将以上代码保存并部署到微信公众平台,即可在微信中打开预览仿制的淘宝APP首页。 ### 回答3: 要写一个仿照淘宝APP首页的微信小程序页面代码,可以按照以下步骤进行: 首先,需要在微信小程序app.json文件中设置导航栏的背景色、顶部栏颜色等样式。 然后,在页面的json文件中定义页面的布局结构和组件,例如使用swiper组件来展示广告轮播图,使用scroll-view组件来展示商品列表等。 在页面的wxml文件中,可以使用各种组件和标签来实现淘宝首页的样式。例如,可以使用view标签来设置页面的上下布局,使用image标签来展示广告轮播图的图片,使用text标签来展示商品的标题、价格等信息。 在页面的js文件中,可以编写数据和逻辑的处理。例如,可以使用swiper组件的bindchange事件来监听广告轮播图的变化,使用scroll-view组件的bindscrolltolower事件来实现上拉加载更多商品的效果等。 需要注意的是,淘宝APP首页有许多复杂的功能,包括搜索框、导航栏、商品分类等,这些功能的实现需要更多的代码和逻辑。在实际编码过程中,可以根据需求逐步完善页面的功能和样式。 最后,在微信开发者工具中运行小程序,并进行调试和优化,确保页面的效果和交互符合预期。 通过以上步骤的实现,就可以写出一个仿照淘宝APP首页的微信小程序页面代码。当然,具体实现的细节还取决于个人的编码能力和开发需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值