手把手教你用云开发 Copilot做一个随机吃什么小程序-并接入ai智能体

原创

怪盗LYL

发布于 2024-12-19 00:32:17

59220

代码可运行

文章被收录于专栏：AIAI

运行总次数：0

代码可运行

一、创建环境

打开https://console.cloud.tencent.com/lowcode 扫码登录，点击立即体验。

随便填填

创建成功以后就可以开始搭建了。二、搭建页面：

可以通过ai搭建：

我让ai写一个随机吃什么的需求，然后用这个需求生成组件并创建应用，这样一个简单吃什么的应用就做好了
因为要演示更多功能，所以这里选择其他方法创建。
可以给一个图片生成需求。
记得切换小助手。

当前版本需要选一个智能体在叉号回到初始页选择创建页面（2024-12-17）
反馈会增加智能体（2024-12-18）

1.创建页面，修改名称

左上角可以创建页面和对页面进行重命名等操作。

打开组件管理可以拖动组件。

点击左侧大纲树或者点击设计区域组件默认显示组件属性

常用的组件属性可以编辑，如点击事件，跳转，是否展示等。
详细的样式可以在样式里修改，提供了位置、高度等。
不够的可以绑定css样式：

具体样式代码在右下角代码编辑器中写（注意使用谷歌浏览器）

3.创建变量

左下角变量区域分为创建页面变量和全局变量。页面变量：当前页面有效全局变量：多个页面都可能用到的值，如果在其他页面需要修改可以用全局

我的头部要一个时间提醒，所以创建了一个文本页面变量。

2.执行事件

这个标题是刚进来就展示，在选择页面时候右下角可以选择页面刚加载执行什么操作，选择表达式。获取时间并赋值给了变量，变量鼠标悬停即可展示变量路径，复制即可。

3.绑定变量

有了变量我们使用文本组件的文本属性绑定。

4.页面跳转

除了显示页面还需要有个设置菜谱的页面，右上角新建页面以后。用按钮绑定跳转事件，可以传参数或者不传参数。

5.全局变量的使用

全局变量在多个页面具有唯一性。

在一个页面修改全局变量其他页面同步修改。

6.自定义JavaScript方法

点击开始需要循环显示食物名称，创建一个开始方法，判断如果未点击状态点击将按钮文字变量设置成停止，设置展示文字的状态为显示，并把状态改成关闭同时用定时器随机赋值要显示的文字。并且展示跳转智能体的按钮。

// 定义一个定时器变量，用于存储定时器的标识
let timer;

// 模块默认导出一个函数，接收包含事件和数据的对象作为参数
export default function({ event, data }) {
    // 定义启动定时器的函数
    function startTimer() {
        // 设置定时器，每100毫秒执行一次内部的匿名函数
        timer = setInterval(() => {
            // 获取应用数据集状态中的meulist，这里meulist可能是一个菜单列表之类的数组
            const meulist = $w.app.dataset.state.meulist;
            // 生成一个1到meulist长度之间的随机数，然后向上取整
            const r = Math.ceil(Math.random() * meulist.length);
            // 将meulist中随机索引（r - 1）对应的元素设置为页面数据集状态中的foodName
            $w.page.dataset.state.foodName = meulist[r - 1];
        }, 100);
    }

    // 定义停止定时器的函数
    function stopTimer() {
        // 清除之前设置的定时器
        clearInterval(timer);
        // 再次获取应用数据集状态中的meulist
        const meulist = $w.app.dataset.state.meulist;
        // 重新生成一个1到meulist长度之间的随机数，然后向上取整
        const r = Math.ceil(Math.random() * meulist.length);
        // 将meulist中随机索引（r - 1）对应的元素设置为页面数据集状态中的foodName
        $w.page.dataset.state.foodName = meulist[r - 1];
    }

    // 如果页面数据集状态中的button_boolen为true
    if ($w.page.dataset.state.button_boolen === true) {
        // 将button_boolen设置为false
        $w.page.dataset.state.button_boolen = false;
        // 将按钮文本设置为"停止"
        $w.page.dataset.state.buttun_text = "停止";
        // 启动定时器
        startTimer();
        // 设置页面数据集中wenziwidth的width为80%，这里wenziwidth可能是与文字宽度相关的对象
        $w.page.dataset.state.wenziwidth.width = "80%";
        // 将ai_boolen设置为false，这里ai_boolen可能与某种人工智能相关的状态
        $w.page.dataset.state.ai_boolen = false;
    } else {
        // 如果button_boolen不为true，即false时
        // 停止定时器
        stopTimer();
        // 将button_boolen设置为true
        $w.page.dataset.state.button_boolen = true;
        // 将按钮文本设置为"开始"
        $w.page.dataset.state.buttun_text = "开始";
        // 设置页面数据集中wenziwidth的width为60%
        $w.page.dataset.state.wenziwidth.width = "60%";
        // 将ai_boolen设置为true
        $w.page.dataset.state.ai_boolen = true;
    }
}