对于我这个后端开发来说，一直都有着学习前端的梦想，确实也一直在努力着。奈何前端技术这几年发展太快。后来在去年底，终于抓住了前端技术的小尾巴，学完了vue3、Element Plus、Pinia、vue-router等一系列前端技术。

后来在参加腾讯云HAI活动的时候，又开始学习微信小程序的开发。不论是网页还是小程序也好，在所有涉及页面的开发中，都离不开三个部分：网页元素 + 脚本控制 + 样式开发。而微信小程序这三部分的原生技术：WXML + JavaScript + WXSS。

所以对于一个初学者来说，首先要学习的就是这一些开发语言。但如果真的想要开发一个微信小程序，还需要安装编辑器（例如HBuilder及其各种插件）、选择一些框架（例如uni-app)来满足适配跨平台和集成前端技术的需求。

万事开头难，很多人都会被上面的学习门槛劝退，所以为了解决这些问题，今天就来探究一下拖拽式、低代码、云开发的产品：云开发 Copilot。因为平时比较喜欢古诗词，常常被“昔我往矣，杨柳依依。金我来思，雨雪霏霏”优美诗句情绪感染，所以借助Copilot云开发平台，就做一个唐诗宋词阅读相关的小程序。

云开发 Copilot

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

云开发 Copilot 是在原有的云开发平台上集成了AI开发能力，主要体现在以下几个方面：

1. 截图生成提示词和需求：AI可以通过用户截图中的提示词和需求，生成相应的代码
2. AI生成低代码组件：针对于复杂的业务场景，AI可以根据用户的需求，自动生成相应组件代码
3. AI生成低代码应用：能够依据关键字，自动生成可编辑的应用模板/框架
4. AI生成低代码页面/区块：能够依据关键字，生成可以可视化编辑的页面/区块
5. AI优化低代码组件样式：组件样式中的“CSS with AI”模块，具备AI编写CSS功能

AI创建应用模板

之前我们都是根据云开发平台提供的模版（例如GPT聊天模版），来创建应用，而我们在可视化开发界面，可以选择从AI创建，这样就能通过输入提示语，来生成自己想要的小程序框架。

因为要做一个古诗词小程序，所以这里我把需求总结成一句话，生成小程序的主页。提示词如下：

生成一个古诗词展示的主页，其中最上方是一个轮播框，每个轮播图片可以添加两句诗词， 中间区域是古诗阅读、古词阅读、古诗词填空

点击生成按钮，在右侧就可以预览生成的小程序。

如图，点击使用该生成效果保存精调，就进入到云开发可视化界面，并打开这个模版。

在可视化开发界面，自左向右分为三个部分：小程序元素大纲、小程序预览、小程序组件添加和样式编辑。在元素大纲中选中节点，就对应在预览中标记，进而可以进行样式编辑。

在生成了模版之后，接下来我们就是对样式进行精调、增加页面以及小程序衔接云平台的AI能力。首先就从轮播图开始精调。

轮播图

模版生成轮播图的时候，一共有两个问题：

1. 图片尺寸不一致，且没有平铺在轮播图中
2. 文字没有放在图片上方，而是处于上下排列

对于第一个问题，我们只需要点击小程序中的图片，然后替换素材即可。

[可以借助AI能力生成图片]这里先使用云开发素材库的图片，来保证图片一致。然后在右侧样式界面界面，我们在布局 - 样式中设置图片的宽高，为了适应不同尺寸的终端，这里我将像素px切换成了百分比设置（%）。

接下里就是第二个问题，这里就需要一点css的知识，我这里将定位（position）设置成了固定（fixed），然后调整文字的宽高以及上侧外边距（margin-top），最后文字就在图片上方。

修改之后，我们通过开发调试工具也可以看到设置的样式信息。

轮播图片修改前后对比：

同时，我们还可以对文字的样式、颜色等属性进行设置，在轮播图精调完之后，我们开始看功能模块。

功能模块

这里一共有三个功能模块入口，每个模块虽然功能不一样，在页面设计上有所差异，但是在云开发平台中的创建构建流程都是一样的。

这里我想设计成方框样式的功能模块入口。所以就需要添加新的组件，在云开发平台中，一共提供了三种添加组件的方式：组件、区块和自定义（AI生成低代码组件）。

区块可以理解为多个组件的集合，我们选中小程序中的容器组件，同样可以保存为区块重复使用。

很多时候我们使用内置的区块满足不了预期，使用组件定义也会面临操作繁杂的问题。所以这里我们选择自定义，通过AI生成属于自己需要的区块。点击添加AI内容块到当前位置按钮，进入Copilot页面，同样在这里我们输入自己的需求。

一共有三个功能模块，模块名称分别为：唐诗阅读、宋词阅读、诗词填空。每个模块样式是正方形，居中，里面包括icon和模块名称，且三个模块垂直分布，点击会跳转到对应页面

在输入提示词之后，点击提示按钮就会跳转到生成并添加区块页面。

在这里我们可以查看区块代码生成过程，并预览AI生成的区块。

从预览效果图中可以看出，功能模块入口之间间距过长，且样式过于单调，可以通过继续输入对话让Copilot优化。

模块之间间距过大，需要减少到一半，同时模块入口设置阴影

在多次对话优化之后，得到自己满意的区块，点击确定插入到我们的小程序中。

区块优化

在生成区块之后，我们还可以通过组件样式中的CSS with AI，使用AI优化低代码组件样式。点击CSS with AI，弹出Copilot，会读取选中组件的css，并且根据我们的输入来生成并更新css。

这里我想修改组件颜色为浅蓝色。

如图，AI自动生成css并自动应用到组件样式上。

生成页面

在设计完入口之后，我们就需要为模块挂载页面。同样，我们也不需要自己去实现页面。下新建页面中选择AI生成，输入提示词AI自动生成页面。

生成一个唐诗的展示页面，展示页面自上而下包含两个部分，第一部分是内容展示卡片，撑满页面，卡片宽度和高度都居中，内容包含唐诗标题、作者，诗词，而且都放在同一个卡片中居中显示。第二部分是实现上一首和下一首的按钮。

输入提示词，点击发送，AI就会实时生成页面。

然后修改页面的标题，点击新建，生成页面。

在页面下拉框中，可以看到刚刚新建的诗词展示页面。

css优化

在对诗词添加换行处理之后实现居中之后，我们可以看到卡片中的标题和作者没有居中。

这里同样使用css with AI来优化css。

用同样的方式来调整卡片的上边距（margin-top）。

这里我使用的是AI生成css的方式，除此之外，如图中紫色框所示，还可以通过直接修改样式布局中的外边距，或者直接在Copilot的css编辑中修改（例如将图中20修改为30），然后在对其他组件进行细节微调，最终样式如下：

点击跳转页面

这里预留了三个功能按钮，一个是上方的返回首页，一个是上一首，一个是下一首。我们给这个三个按钮添加跳转导航事件，可以跳转到下一页。

选中图标，点击右侧属性中的点击事件，与打开页面事件进行绑定。

选择首页页面，路由方式选择页面跳转，然后保存。

保存之后，我们点击按钮进行跳转测试。

如图，跳转成功（图中弹窗只有编辑时会显示，生产没有）。但是这时候从唐诗阅读入口没法跳转到唐诗展示页面，这里也用同样的方式，将入口的点击事件与诗词展示页面绑定。

这样就实现了双向跳转。

对于上一首下一首两个按钮，同样绑定诗词展示页面，这样就实现了页面切换。

诗词填空

实现一个词语填空页面，给出诗词的上半句，用户输入下半句，有上一题、下一题，提交按钮。

但是如果用户做完这道题目的话，我想要用AI去判断题目是否正确，所以在这里就需要接入大模型。

接入混元

首先在混元大模型的控制台创建秘钥。

然后在云开发平台的AI+ 菜单的大模型选项下，选择混元，填入混元的秘钥。

通常调用混元大模型我们可以通过API的方式，云平台有两种方式去实现混元模型的调用，分别是云函数和工作流。但是因为工作流不需要写代码，所以我就选择工作流来调用混元。

构建工作流

1.创建工作流

选择云开发平台的工作流选项，创建空白工作流病命名为诗词工作流。

2. 设置触发方式节点

设置工作流的触发方式，这里我们会通过js或者组件调用，所以这里选择是组件行为或调用。

3. 大模型节点

然后新增一个大模型节点。在大模型节点中选择混元。

在这里可以输入固定的提示词，点击节点调试，可以看到大模型组件被成功调用。

4. js节点

然后我又新增了一个js脚本节点。工作流会将最后一个节点的输出内容返回给调用方，如果没有这个js节点，用户将得到混元返回的json串。但是我只想获取混元返回的消息内容（content），也就是一个字符串，所以我在js中新增了json解析逻辑。

这里同样在云开发助手中输入我的需求。

然后生成了解析代码。

双击js节点的脚本代码区域，将代码生成输入到节点中，然后点击测试节点，最后节点输出我们需要的消息内容。

这里要注意的是：我们通过节点名称.output的方式获取前面节点的输出值，节点名称在左侧节点输入栏可以看到。同样，我们也要将上面触发方式节点的输出，通过这种方式绑定到大模型节点提示词中。而触发方式节点的输入就是用户传过来的数据。

再一个就是需要将我们的结果数据return，这样才会被赋值到当前节点的output属性，才能被下一个节点或者调用方获取。

5. 调试节点

最后我们点击流程调试，对所有节点进行整体流程的调试。

如下图所示，查看各个节点的输出，整个流程符合我们的预期。

6. 发布

最后是发布工作流，这样才能被调用。

接入工作流

我们在可视化开发中调用工作流，看看是否可以调用成功。我们的目的是将页面中的上半句和用户输入的下半句传给工作流，然后交给大模型进行分析问题。

1. 绑定变量

所以首先是获取页面的诗词，所以这里需要将页面中的数据绑定到变量上。在代码区新建一个变量：

然后会返回一个变量路径，我们点击文本组件，将变量路径复制到文本内容中，这样就完成了变量的绑定。

上面是静态文本的绑定，然后对于form表单中输入框（input）的绑定，要添加一个值改变的时间，给事件绑定一个变量赋值的动作，然后将var2绑定到输入框中。因为这里是双向绑定，所以变量的值使用event.detail.value。

2. 调用工作流

点击事件绑定调用工作流。

对上面的变量进行组合，生成prompt传递给工作流的节点。

$w.page.dataset.state.var1  + "的下一句是" + $w.page.dataset.state.var2 + "吗？"

可以看到，会根据我们的输入进行变化prompt。

点击提交按钮触发事件，进入到工作流中，点击运行日志，可以查看到我们调用大模型返回的信息。

3. 创建答案展示卡片

我们需要将大模型的返回的内容渲染到页面，使用AI生成区块。

使用css with AI功能对进行微调。

4. 接收工作流返回值

创建一个变量用来接收工作流返回的值，将这个变量命名为workflowResult。

将这个变量路径赋值到卡片的文本中进行绑定。

在提交按钮的调用工作流事件中，设置成功时的回调动作，这里设置为执行javascript。

然后在代码中将工作流的返回值赋值给workflowResult。

最后点击提交，调用工作流并渲染卡片。

在代码区也可以看到workflowResult被修改。

这样，就完成了从用户输入触发工作流，到返回值渲染页面的全过程。

结语

云开发 Copilot 提供了强大的AI能力，页面、组件以及区块的创建，都可以依靠AI完成。同时，再也不用因为记不住复杂的css属性而犯愁，通过输入自己的需求，AI就可以帮你生成并优化css样式。

在开发过程中，遇到了一些小的问题，在云开发官方的帮助下得到了及时的响应与解决。

同时也将遇到的问题和建议整理成文档，通过问卷的形式反馈，希望能够给云开发平台的建设尽一点绵薄之力。