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

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

article 2025/1/7 3:33:13

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

最近也是在学习用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.kler.cn/a/466865.html