前端小白是如何利用chatgt用一周时间从做一款微信小程序的

这篇具有很好参考价值的文章主要介绍了前端小白是如何利用chatgt用一周时间从做一款微信小程序的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端小白是如何利用chatgt用一周时间从0做一款微信小程序的

随着chatgpt的大火,真的是在工作上给各行各业的人带来了极大的便利,本人是一个java程序员,其实我自己是一直想开发一款属于自己的小程序的,但是迫于对前端知识的贫瘠,考虑到要学的前端开发知识有很多,比如js,ts,前端框架vue,react…,最难受的是css样式,最简单的效果都要弄好久,每次想一想就放弃了。最近出来的chatgpt,让我对这个想法重新有了信心,然后就是直接开干!

☝确定好方向

为什么要做一个题库小程序呢?

之前帮人家做过自动答题的程序,所以不少人问我有没有相关网站的题库,所以既然别人有这个需求,我觉得还是有做的可行性的。

🚌模仿同类产品

既然想好了要做什么,那我就直接去应用市场,微信小程序搜相关的应用,我一口气下载和看了十几款搜题程序,搜题大侠,题海,刷题神器,聚题库…,总结了几点:

  • 提供了丰富的搜题方式,手动输入文字语音输入拍照识别
  • 提供题库,可以让用户自己练习
  • 用户可以自主上传题库

上面这几点,是用户的基础功能,也就是满足题库app的基本条件。
但是很多题库都没有把三点都做到,有些有拍照但是没有语音输入,有些只有文字输入,有些题库很丰富但是不支持用户自己导入题库,而且绝大多数app动不动就要收费,而且收费还很高,我觉得这可以是我的突破点,作为个人开发者,我的成本肯定比他们低,所以程序在收费方面肯定比他们低或者不收费。

🤔策划产品ui和功能

功能方面,我就先模仿他人的题库app,先把基础的功能做起来,第一步先把搜题功能做好,再做其他的功能。

  • 搜题方式:实现手动输入文字,语音输入,拍照识别题目。
  • 题库来源:我初步想的是爬数据+第三方api+用户上传,这样才能覆盖面广,而且题库也会一直更新。

根据要做的功能就简单画了下草图,自己不懂ui,审美也不太行就只能潦草一点了

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

🥊开发

后台

后台接口想了下,先暂定三个接口,为了接口不被轻易爬取,采用前台加密,后台解密的方式,每次请求都会携带秘钥,解密成功才会正确响应。

  • 查询题库接口
  • 登录接口
  • 百度ocr接口

因为后端是自己老本行,花了一天左右差不多就做完了

前台

前台我首先调查了那几款框架好做微信小程序,就是坑比较少(包括uniapp,taro,原生),因为自己直接稍微接触过一点react,鉴于taroreact的适配性比较好,taro也一直在更新,所以我选择taro(原生也考虑过,但是感觉要多花时间去了解,所以就pass啦)。

准备事项

开发小程序还是有很多准备的工作要做的,

  • 比如得先注册一个微信小程序账号,每次发布就是需要登录这个账号来发布,
  • 选择小程序的类目,这个挺重要的,因为有些类目,个人开发者不能申请,所以要特别小心,因为我做的属于题库,所以我选择了 信息查询和教育两个类目。
  • 想一个容易被记住和被搜索到的小程序名称。
  • 设计一个图标,我自己不会,就在图标网站先找了一个差不多适合的。
  • 用户隐私保护指引,这个需要根据自己的小程序功能来填写,向我这边就需要麦克风和摄像机的权限,这个需要在里面说明用途,更新提交上去,这样才能保证审核可以成功。
根据demo修改

我先去官网clone了个demo下来,下载了微信开发者工具,尝试运行了下,发现还真有用
Taro官网
前端小白是如何利用chatgt用一周时间从做一款微信小程序的

然后自己先把首页的样子,用语言描述给chatgpt,给我画出大概得雏形,然后再进行微调

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

如此往复,我就得到了一个简洁的首页

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

然后就是对接接口啦,查询题库,ocr的接口,还有登录接口统统对接上去。
这里遇到了两个比较坑的地方。

  • 一个是微信官方有一个“微信同声传译”插件,需要自己去市场里申请,结果发现自己死活申请不了,提示“个人主体不能申请”,可是我也看到类似的个人小程序也用了这个插件,这我就很迷糊了,凭什么我就不能申请成功,后面在我穷追不舍的搜索下,终于发现了另外的入口,申请成功!

申请步骤

  1. 去微信服务平台搜一下

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

  1. 找到了微信同声传译,登录后选择给哪个小程序添加,添加成功后去小程序的微信公众平台看已经添加成功了,而且是已通过状态。
    前端小白是如何利用chatgt用一周时间从做一款微信小程序的
  • 获取用户的昵称和头像方式变了,之前只需要调用getUserProfile这个Api,在成功回调中就能获取用户信息,现在已经废弃了,现在需要开发者自己写表单,用户自己填写头像和昵称,感觉这个会让用户操作变得麻烦,所以我暂时先不实现这个功能了,等到那天想到合适的操作逻辑再做

前端小白是如何利用chatgt用一周时间从做一款微信小程序的

这里前前后后花了我三四天的时间(主要是下班来做,上班一般没啥时间),主要是交互和摸清wx的api使用比较花时间,chatgpt在设计界面和交互真的帮了我很大的忙,还有一些前端错误他也能快速定位,并给出解决方案,给我节省了很多时间

发布

最后一步就是上传代码,提交审核,一般一天左右就会审核完成,再点击发布,就能看到上线的小程序,这一刻心情还是无比的激动!🥰

🚧开发总结

使用chatgpt帮助我一个前端小白慢慢搭建起一个小程序的过程中,
缺点在我看来是chatgpt并不会准确无误地给出我想要的答案,大多数是比较符合的,但是肯定不是特别符合,需要自己一点一点的调整。

优点是chatgpt每次告诉你答案的时候往往还会为我解答代码的作用,这让我更快地了解语言的一些特性和框架的使用,节省了自己去官网查文档的时间,这让我感觉自己是真的参与了这个前端开发,而不是随意地copy答案。

最后非常感谢大家看到这,很高兴分享这次的开发过程,总之就是有意思,效率是真的高。文章来源地址https://www.toymoban.com/news/detail-431405.html

到了这里,关于前端小白是如何利用chatgt用一周时间从做一款微信小程序的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端实习第一周周记

    第一天来的时候,十点左右就开始跑代码了,公司发了电脑,但由于自己的电脑环境比较齐全,所以就先用自己的电脑跑的代码。 一共是两个项目,一个pc类似于管理系统,还有一个是微信小程序。 拉代码的过程中遇到的问题: 自己的电脑git切换用户名和密码后拉代码报错

    2024年02月15日
    浏览(24)
  • 如何利用纯前端技术,实现一个网页版视频编辑器?

    介绍:本篇文章打算利用纯前端的技术,来实现一个网页版的视频编辑器。为什么突然想做一个这么项目来呢,主要是最近一直在利用手机剪映来剪辑一些照片或者视频之类的,在剪辑的过程中,突然想到,有没有一种纯网页版的视频剪辑网站呢?于是搜了下,大多为 sass 成

    2024年04月27日
    浏览(32)
  • 如何利用Requestly提升前端开发与测试的效率,让你事半功倍?

    在进行前端页面开发或者测试的时候,我们会遇到这一类场景: 在开发阶段,前端想通过调用真实的接口返回响应 在开发或者生产阶段需要验证前端页面的一些 异常场景 或者 临界值 时 在测试阶段,想直接通过修改接口响应来验证前端页面是否正常 想验证后端服务响应比

    2024年02月03日
    浏览(34)
  • 前端 jQuery 如何将时间转换为yyyy-MM-dd格式的

    可以使用 JavaScript 内置的 Date 对象和其提供的方法来实现将时间转换为指定格式的字符串。具体可以使用以下代码: 上述代码中,我们首先创建了一个 Date 对象,然后使用其提供的 getFullYear() 、 getMonth() 和 getDate() 方法获取了年份、月份和日期。注意, getMonth() 方法返回的月

    2024年02月06日
    浏览(34)
  • 前端如何利用js开启摄像头和关闭摄像头以及他的指示灯

    其实本文章主要想要讲解的就是如何关闭摄像头以及他的指示灯,因为这个事真的很让我苦恼,而开启摄像头其实并没有那么难,只需调用navigator.mediaDevices.getUserMedia方法就行,具体就不细讲了,直接上代码(HTML结构就是一个video标签和两个button按钮,所以就只上js部分了) 开启

    2024年02月13日
    浏览(31)
  • 小白必看、手把手教你利用爬虫爬网页

    接下来从网络爬虫的概念、用处与价值和结构等三个方面,让大家对网络爬虫有一个基本的了解。 网络爬虫及其应用 随着网络的迅速发展,万维网成为大量信息的载体,如何有效地提取并利用这些信息成为一个巨大的挑战,网络爬虫应运而生。网络爬虫(又被称为网页蜘蛛

    2024年02月07日
    浏览(29)
  • 小白弄明白了 unix 时间戳的转换问题

    小白对于将 unix 时间戳转换为日期时间和使用日期时间转换为 unix 时间戳,在项目中见到过很多,每次使用时不是用现有的方法转换就是网上搜索方法。 小白见过各种转换方式觉得moment库很是方便,但是用法较多,所以小白决定整理一下。以后再遇到时间日期转换可能手写代

    2024年02月10日
    浏览(30)
  • 分享:利用闲置电脑当软路由安装OpenWRT系统(小白教程)

    话说软路由系统OpenWRT用起来真是香,里面的好多功能都是普通路由无法实现的,由于众所周知的原因,在这里就不细说,等安装完自己体验吧。 今天就介绍用一台闲置的电脑(自带两个网口)充当软路由,物理机安装OpenWRT。需要准备的硬件有1台闲置电脑、1个U盘,软件有一

    2024年02月15日
    浏览(43)
  • 【前端】对前端小白极为友好的JS DOM入门文章

    在现代web开发中,JavaScript (JS) 是不可或缺的一部分,它使我们能够为网页赋予交互性和动态性。其中,DOM(文档对象模型)技术在前端开发中起着至关重要的作用。本篇博客将带领前端初学者深入理解JavaScript DOM技术,为你构建坚实的基础。 文档对象模型(Document Object Mode

    2024年02月14日
    浏览(28)
  • 算法 时间、空间复杂度的计算(C语言/小白/零基础/新手 + 例题)

    目录 1. 时间复杂度 计算时间复杂度( O(N))的方法:   例1:嵌套循环时间复杂度的计算      例2:双重循环时间复杂度的计算   例3:常熟循环的时间复杂度   例6:冒泡排序的时间复杂度   例7: 二分查找的时间复杂度   例8:斐波那契的时间复杂度         常见的时间

    2024年02月08日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包