AI代码开发实践-微信小程序开发

接上回,本人参加了一次小孩学校组织的护学岗,萌生了开发一个微信小程序的水印相机的想法,说干就干。

最近也是在学习用AI编程,索性之前也用一点,今天就尝试一下

工具选择,环境搭建

阿里-通义灵码

通义灵码-灵动指间,快码加编,你的智能编码助手
TONGYI Lingma-Your AI Coding Assistant. Type less, Code more.
通义灵码,是一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云 SDK/API 的使用场景调优,为开发者带来高效、流畅的编码体验。

兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流 IDE;
支持 Java、Python、Go、C/C++、C#、JavaScript、TypeScript、PHP、Ruby、Rust、Scala 等主流编程语言。
通义灵码除了面向个人开发者的提供了个人版之外 ,我这里使用的是个人版本
在这里插入图片描述

百度- 文心快码

文心快码 - Baidu Comate
Coding Mate Powered by AI
基于AI的智能代码生成让你的编码更快、更好、更简单!
Enhance your coding experience with an AI-powered assistant for faster, better, and simpler coding!
Baidu Comate 由文心大模型 ERNIE-Code 提供技术支持,通过对百度多年积累的非涉密代码数据和 GitHub 头部公开代码数据进行训练,为您自动生成完整的、且更符合实际研发场景的代码行或整个代码块,帮助每一位开发者轻松完成研发任务。
在这里插入图片描述

集成的IED为VSCODE

VScode的扩展中搜索2个应用都有对应的插件,安装即可使用都很方便
在这里插入图片描述

开始搭建微信小程序

第一步功能很需求和功能点分析

  • 感情文心快码稍好,功能需求都罗列的比较详细,包裹了需要取得用户的隐私授权。但是都有遗漏,就是需要获取位置信息,这个是需要调用位置信息,2个都没有回答
  • 通义的回答
    在这里插入图片描述
  • 文心快码的回答:
    在这里插入图片描述
    在这里插入图片描述

第二步界面设计开发

  • 通义设计的不完全符合要求,但是直接把页面的代码都生成出来了
    在这里插入图片描述
  • 代码
<view class="container"><!-- 顶部导航栏 --><view class="header"><text class="title">水印相机</text></view><!-- 图片展示区 --><view class="image-container"><image wx:if="{{selectedImage}}" src="{{selectedImage}}" mode="aspectFit"></image><view wx:else class="placeholder"><button bindtap="chooseImage">选择照片或拍照</button></view></view><!-- 水印设置区 --><view class="watermark-settings"><view class="input-group"><text>水印文字</text><input placeholder="请输入水印文字" value="{{watermarkText}}" bindinput="inputWatermarkText" /></view><view class="input-group"><text>水印位置</text><picker bindchange="selectWatermarkPosition" value="{{watermarkPosition}}" range="{{positionOptions}}"><view>{{positionOptions[watermarkPosition]}}</view></picker></view><view class="input-group"><text>水印透明度</text><slider min="0" max="1" step="0.1" value="{{watermarkOpacity}}" bindchange="changeOpacity" /></view></view><!-- 操作按钮区 --><view class="button-group"><button bindtap="previewImage">预览效果</button><button bindtap="saveImage">保存图片</button><button bindtap="shareImage">分享图片</button></view>
</view>
  • 出了一张莫名奇妙的图
    在这里插入图片描述

  • 文心快码,看起来是可以的,但是没有直接生成代码
    在这里插入图片描述

  • 2个共同点就是都有这么一段话

  • 如果你希望获得更精确的效果图(例如基于真实设计工具生成的高保真效果图),建议使用设计工具如Sketch、Figma或Adobe XD来创建更专业的界面设计,并导出效果图。

  • 2个工具感觉都不能生成一个可以看到效果的设计图片,所以感觉应该是不可以用的,在界面设计这块,感觉不能达到可用的状态

第三步逻辑实现

  • 安装要求我有分别要求它们按照设计实现

  • 通义千问,对应的文件index.wxml、index.wxss、index.js、index.json
    在这里插入图片描述
    在这里插入图片描述
    最终拷贝到微信小程序里的效果
    在这里插入图片描述

还可以正常交互
在这里插入图片描述

  • 文心快码,也生成对应的文件index.wxml、index.wxss、index.js
    在这里插入图片描述在这里插入图片描述

    到微信小程序开发工具预览的效果
    在这里插入图片描述
    同样也是可以交换的,但是效果比较简单,和之前需求分析所罗列的功能相差甚远
  • 其实本人最后开发的水印相机是这样的

总结

  • 总体来说,AI开发仍然处于辅助开发的阶段,确实没有达到可以完全取代程序员的地步。其他很多小编提到的用Cursor 1小时开发的App,对于一点基础都没有的人来说,难道真的可以做到吗?对于能够使用IDE(集成开发环境)进行基础编程的人来说,现在也没有说可以完全依赖AI进行开发的,都标注了辅助开发。但是不可否认的是,AI辅助开发可以大大加快代码的开发效率,尤其是一些简单的实现。然而,对于复杂的项目,应用者需要给AI分析得很细,就像需要造一台车,人需要告诉AI详细的零件规格,分解为一个个零件,然后再用这些零件组装为一台车。至于车的打包、上市等环节,AI还是不能取代人类。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/502230.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java的超级玛丽游戏的设计与实现【源码+文档+部署讲解】

目 录 1、绪论 1.1背景以及现状 1.2 Java语言的特点 1.3 系统运行环境及开发软件&#xff1a; 1.4 可行性的分析 1.4.1 技术可行性 1.4.2 经济可行性 1.4.3 操作可行性 2、 需求分析 2.1 用户需求分析 2.2功能需求分析 2.3界面设计需求分析…

麒麟服务器安装kafka--亲测

我这安装的是单机版本的&#xff1a; 下载地址&#xff1a;Index of /kafka/3.9.0 我下载的是&#xff1a;https://dlcdn.apache.org/zookeeper/zookeeper-3.9.3/apache-zookeeper-3.9.3-bin.tar.gz https://dlcdn.apache.org/kafka/3.9.0/kafka_2.12-3.9.0.tgz 一、下载并上…

基于HTML和CSS的旅游小程序

一、技术基础 HTML&#xff08;HyperText Markup Language&#xff09;&#xff1a;超文本标记语言&#xff0c;用于定义网页的内容和结构。在旅游小程序中&#xff0c;HTML用于搭建页面的基本框架&#xff0c;包括标题、段落、图片、链接等元素&#xff0c;以及用于交互的表单…

【操作系统不挂科】操作系统期末考试题库<1>(单选题&简答题&计算与分析题&应用题)

前言 大家好吖&#xff0c;欢迎来到 YY 滴 操作系统不挂科 系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 一.单项选择题&#xff08;每个空2分&#xff0c;共40分&#xff09; 1. 计算机的操作系统是一种&#xff08; B &#xff09;。 A. 应用软件…

Excel重新踩坑5:二级下拉列表制作;★数据透视表;

0、在excel中函数公式不仅可以写在单元格里面&#xff0c;还可以写在公式里面。 1、二级下拉列表制作&#xff1a; 2、数据透视表&#xff1a; 概念&#xff1a;通过拖拉就能实现复杂函数才能实现的数据统计问题。 概览&#xff1a;在插入选项中有个数据透视表&#xff0c;数…

【赵渝强老师】MongoDB写入数据的过程

在MongoDB数据更新时&#xff0c;WiredTiger存储引擎使用预写日志的机制先将数据更新写入到Journal日志文件中。然后在创建检查点操作开始时&#xff0c;再将日志文件中记录的操作刷新到数据文件。换句话说&#xff0c;通过预写日志和检查点机制可以保证将数据更新持久化到数据…

【双层模型】考虑供需双侧的综合能源双层优化模型

目录 主要内容 内容研究 1.模型简介 2 程序释义 部分代码 运行结果 下载链接 主要内容 该程序实现一个综合能源系统的优化调度双层模型&#xff0c;上下层分别采用差分进化算法和规划算法进行求解。模型考虑了多种能源设备&#xff0c;包括燃气轮机、燃气锅炉、风电…

Linux驱动开发(16):输入子系统–电容触摸驱动实验

有关电容触摸的基础知识内容可以参考野火STM32相关教程&#xff0c;这里只介绍电容触摸驱动的相关内容。 本章配套源码、设备树以及更新固件位于“~/embed_linux_driver_tutorial_imx6_code/linux_driver/touch_scream_GTxxx”目录下。 触摸面板通过双面胶粘在显示屏上&#…

QML自定义滑动条Slider的样式

代码展示 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.1Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Slider {id: controlvalue: 0.5background: Rectangle {x: control.leftPaddingy: control.topPadding …

【项目开发】C#环境配置及VScode运行C#教程(学生管理系统)

原创文章,禁止转载。 文章目录 下载.NETVScode配置运行程序下载.NET 官网链接: https://dotnet.microsoft.com/en-us/download选择任意版本下载: 下载完成后,双击运行exe文件,等待安装完成。 在控制台输入: dotnet --version若出现版本信息,说明安装成功: VScode配…

卡码网 ACM答题编程模板

背景&#xff1a; input() 在 ACM 编程中的底层调用原理 1. input() 的核心原理 在 Python 中&#xff0c;input() 的底层实现依赖于标准输入流 sys.stdin。每次调用 input() 时&#xff0c;Python 会从 sys.stdin 中读取一行字符串&#xff0c;直到遇到换行符 \n 或文件结束…

Linux驱动开发(18):linux驱动并发与竞态

并发是指多个执行单元同时、并行执行&#xff0c;而并发的执行单元对共享资源(硬件资源和软件上的全局变量、静态变量等)的访问 则很容易导致竞态。对于多核系统&#xff0c;很容易理解&#xff0c;由于多个CPU同时执行&#xff0c;多个CPU同时读、写共享资源时很容易造成竞态。…

k8s基础(3)—Kubernetes-Deployment

一、 Deployment概述 ‌ Kubernetes Deployment‌是Kubernetes中的一个核心概念&#xff0c;它是一种高级别的控制器&#xff0c;用于管理Pod和ReplicaSet&#xff0c;确保应用程序的高可用性和稳定性。Deployment通过声明式配置来创建和更新Pod和ReplicaSet&#xff0c;从而…

windows11(或centos7)安装nvidia显卡驱动、CUDA、cuDNN

本文是我瞎搞时写的问题汇总及参考文献&#xff0c;记录了一些问题解决的进度及对问题的思考。 最近一次更新时间&#xff1a;2025年1月4日 一、安装或更新nvidia显卡驱动 首先&#xff0c;需要确保你的设备安装了最新的显卡驱动。 &#xff08;1&#xff09;centos7安装显…

【光纤通信】光纤结构

光纤结构主要由折射率较高的纤芯&#xff08;core&#xff09;部分和折射率较低的包层&#xff08;cladding&#xff09;部分以及涂覆层&#xff08;buffer coating&#xff09;组成。 光纤的分类方法有很多种&#xff0c;如按纤芯折射率分布、按纤芯结构、按二次涂覆层结构、按…

急需升级,D-Link 路由器漏洞被僵尸网络广泛用于 DDoS 攻击

僵尸网络活动增加 &#xff1a;新的“FICORA”和“CAPSAICIN”僵尸网络&#xff08;Mirai 和 Kaiten 的变体&#xff09;的活动激增。 被利用的漏洞 &#xff1a;攻击者利用已知的 D-Link 路由器漏洞&#xff08;例如 CVE-2015-2051、CVE-2024-33112&#xff09;来执行恶意命…

Eplan 项目结构(高层代号、安装地点、位置代号)

Eplan中的项目结构分为3个层次&#xff1a; &#xff08;1&#xff09;功能面结构。指明这个系统的功能&#xff0c;有什么用途。在EPlan中&#xff0c;指的就是"高层代号&#xff08;&#xff09;"。 一般指的是线体。 &#xff08;2&#xff09;位置面结构。指明该…

网络安全之高防IP的实时监控精准防护

高防IP是一种网络安全设备&#xff0c;用于保护网络服务不受到各类攻击的影响&#xff0c;确保业务的持续稳定运行。它通过监控、识别和封锁恶意攻击流量&#xff0c;提供高级别的防护&#xff0c;降低业务被攻击的风险&#xff0c;并提升网络的稳定性和可靠性。 一、实时监控的…

RabbitMQ实现生产者消费者

一.启动MQ 注意管理员身份进入cmd才行,我这里是在本地安装的MQ,推荐使用虚拟机安装 二.思路 官方解释RabbitMQ结构: 自我理解RabbitMQ结构: 其实RabbitMQ的服务器就像邮局一样,我们的生产者和消费者对于这个服务器来说都是消费者,因为服务器都可以向两者发送消息 环境准备 …

【计算机视觉技术 - 人脸生成】2.GAN网络的构建和训练

GAN 是一种常用的优秀的图像生成模型。我们使用了支持条件生成的 cGAN。下面介绍简单 cGAN 模型的构建以及训练过程。 2.1 在 model 文件夹中新建 nets.py 文件 import torch import torch.nn as nn# 生成器类 class Generator(nn.Module):def __init__(self, nz100, nc3, n…