云开发 Copilot ——让开发变得更简单

声明：本篇博客为云开发 Copilot体验文章，非广告

前言：

游客体验

云开发 Copilot实战：

一、图片生成需求

二、云开发 Copilot实现需求

三、AI生成低代码页面

Copilot 的亮点功能

使用场景

云开发 Copilot开发的前景展望

前言：

在云开发AI+中，腾讯云提供一系列与 AI 相关的功能，如大模型接入、 Agent 等，帮助开发者为自己的小程序、web 或者应用快速接入 AI 能力，同时也提供了云开发 Copilot，来加速用户的开发，帮助用户更快构建自己的应用。下面博主将会为大家实战使用云开发 Copilot来助力开发。

云开发 Copilot是云开发推出的一款 AI 开发辅助工具，可以帮助用户快速生成多种类型的应用功能，包括低代码应用、页面、组件、数据模型、CMS 内容等，帮助开发者快速构建自己的小程序、web 等云开发应用。可以帮助用户加快开发效率，提升开发体验。

使用说明：https://docs.cloudbase.net/ai/introduce

视频演示可以看一下：云开发 Copilot：AI 开发应用功能演示_哔哩哔哩_bilibili

游客体验

云开发 Copilot现在属于新鲜出炉，相信大多数人接触云开发Copilot不是很多，来体验Copilot的占大多数，下面讲一下如何使用。云开发 Copilot提供了无需登录的游客版，即无需登录即可使用云开发 Copilot 部分功能，这一点做的非常好。下面将展示一下具体流程。

体验地址：云开发 Copilot 游客版（<--点击链接跳转）
游客可以免费体验截图生成需求、AI答疑等功能
AI 生成应用/组件/区块等功能需要开通云环境限时免费使用

云开发 Copilot实战：

大家也可以在云开发平台中使用云开发 Copilot，这样可以把云开发 Copilot生成的需求以及代码在云开发平台实现出来，并且可以预览效果，不满意时可以再次调整。在云开发平台中使用云开发 Copilot，前提是拥有腾讯云账号，在登入账号后，可以选择使用已有的云开发环境，这里推荐开通微搭免费体验版开通地址，点击蓝字跳转，界面是下面这样的，点击立即体验。新人用户是免费体验一个月的，大家放心冲就行。

一、图片生成需求

然后体验云开发 Copilot 功能：进入云开发 Copilot 或者可以在云开发平台中右下角找到并使用。进来云开发平台右下角就会有云开发小助手的提示界面。云开发 Copilot 可以解答用户使用过程中的问题，也可以帮助用户开发应用/页面/区块/组件等。在这里你可以根据云开发小助手的提示进行开发，方便了很多。

当然，在使用云开发 Copilot 时，你可以通过截图生成提示词和需求，帮助 AI 生成相应的代码。这样可以更便利，免得自己手打需求更麻烦。并且可以针对于复杂的业务场景，AI 可以根据用户的需求，自动生成带有逻辑的相应的组件代码，帮助开发者快速实现业务功能。具体操作如下:

首先需要点击图片生成需求（图一红色方框里面），点击之后会变为图二一样，会有提示与@图片生成需求对话。

之后，你可以上传一张截图（设计稿、参考的网站截图等），云开发 Copilot 会自动生成相关的需求提示词（图三）。

再配合云开发 Copilot，可以快速把需求变成代码，快速实现你的需求，并且可以根据自己的想法进行调节、美化。

二、云开发 Copilot实现需求

这样云开发 Copilot 会根据我们提供的照片，写出具体的需求文档。如下图，对照我们发送给云开发 Copilot的照片，我们发现一些很细节的地方云开发 Copilot都给写出来了，比如在颜色这一块，云开发 Copilot都会具体到颜色，#ffffff（白色）、深蓝色 (Hex: #1e3a8a)，但是一般我们拿到需求文档有的只给你写一个深蓝色，但是在转化为代码时，我们还是要转化为Hex: #1e3a8a，这个数值程序员是不会记的，还是要花费时间去查，但是云开发 Copilot会给到具体的颜色数值代码，非常好评。这个功能非常强大，当你作为产品经理，需要写需求文档，但是老板只是开了一张讨论会，你就可以把PPT给拍下来，发给云开发 Copilot，它会通过截图生成提示词和需求，即快又准，这样的员工老板不爱谁爱。

我们得到了云开发 Copilot 给的需求文档，那么如何在云开发平台给实现出来呢？各位看官不要着急，听我细细道来，首先需要登录上云开发平台->可视化开发->从空白创建，当进入的时候不要着急这写代码，需求文档已经被云开发 Copilot写出来了，你现在需要做的就是，把需求复制粘贴到云开发 Copilot，让他帮你写代码，感觉云开发 Copilot功能是不是很强大，你可以完全不用写代码，就能实现需求，程序员的福音。

我们等待加载完毕，进来开发界面后，会发现右边有添加一栏，下面有非常多的功能，包含：AI代码块、文本、普通容器、按钮等等，大家可以根据自己的需求进行选取。这里我们的AI代码块才是重点，首先点击AI代码块。

点击完了之后，会得到下面的界面，此时我们需要点击【编辑JSX代码】。

接下来我们发现出来了一个JSX组件编译器，此时不要慌，没让你写代码呢，把刚才生成的需求文档给复制过来，粘贴到下图红色方框里面，点击小飞机执行。然后让它思考一会，代码就会自动的生成到JSX编译器里面了，也可以看到当前的效果了。

效果图如下：

我们继续往下做，多加几个JSX代码块，此时我感觉生成的不符合我的想法，那么我就可以再发送自己的需求，比如：把“把握当下”分成两行显示，即：“把握”之后换行。不需要自己修改代码，直接把需求发给云开发 Copilot，它会自动给你修改代码。接下来我们多加入几个，点击预览按钮，看一下成品。

三、AI生成低代码页面

当然云开发 Copilot也可以根据你提供的一句话，生成初始的低代码页面/应用。云开发 Copilot能够依据关键字迅速生成小程序/web 应用，操作简单且高效。只需一句话，即可生成可编辑的应用，该应用支持发布至小程序和网页。那么如何使用呢？

首先在云开发平台可视化开发中，找到从AI创建或者在云开发小助手界面中找到AI生成页面。

输入对页面或区块的功能、样式等相关描述，如有需要可指定色彩主题等其他细节，然后点击生成按钮。如果在云开发小助手上生成的，它会出现一个【智能调用】，点击一下就会跳转到AI生成页面，并自动输出结果。如果是在AI生成应用上生成的，可以直接出现结果。

当然在云开发小助手生成的界面时，会带有具体的代码，也可以看到功能是如何实现的。下面是生成商家点餐页面的部分代码。

实现首页

在首页中展示所有菜品分类和推荐菜品。

<view class="container">
  <view class="category" wx:for="{{categories}}" wx:key="index">
    <text>{{item.name}}</text>
    <view class="dishes" wx:for="{{item.dishes}}" wx:key="index">
      <text>{{dish.name}} - {{dish.price}}</text>
    </view>
  </view>
</view>
实现菜品详情页

在菜品详情页中展示单个菜品的详细信息，并提供加入购物车的功能。

<view class="container">
  <text>{{dish.name}}</text>
  <text>{{dish.price}}</text>
  <button catchtap="addToCart">加入购物车</button>
</view>

// pages/detail/detail.js
Page({
  data: {
    dish: {}
  },
  onLoad: function (options) {
    // 获取菜品详情
  },
  addToCart: function () {
    // 加入购物车逻辑
  }
})
实现购物车页

在购物车页中展示顾客已经选择的菜品，并能进行结算。

<view class="container">
  <view class="cart-item" wx:for="{{cartItems}}" wx:key="index">
    <text>{{item.name}} - {{item.price}}</text>
  </view>
  <button>结算</button>
</view>
// pages/cart/cart.js
Page({
  data: {
    cartItems: []
  },
  onLoad: function () {
    // 获取购物车数据
  }
})

这里用AI生成界面的提示词“生成一个培训机构主页，培训课程包括...”，这里AI生成的是低代码界面，什么是低代码界面？低代码界面（Low-code Interface）是指通过图形化界面和拖拽式操作，帮助用户快速构建应用程序或软件系统的一种方式，而无需深入编写大量代码。它为开发者或非技术人员提供了一种简化的软件开发流程，使得即使没有编程经验的人也能够通过配置和可视化界面来创建功能丰富的应用。

当前AI只是给出了低代码的界面，可能不满足你的要求，需要继续往里面添加功能。此时我们就可以在当前的低代码界面的基础上进行功能扩展。首先点击【使用该生成效果保存精调】，就会到我们的开发界面上进行修改了。具体修改可以继续往下看。