不会写代码轻松玩转应用开发 (附带2个案例:iframe框架+自定义图标)

为什么

为什么需要代码组件?

如果不用代码组件Zion就是无代码平台,用了就是低代码平台

代码组件提升了上限,会创造无限可能

为什么要用Cusor?

因为我不会写代码.完全不会

而Cursor是不会写代码人的救星,如果你是这方面的专家,这篇文章或许不是为你准备的

需要什么/准备

能力:你可以不会代码,但是你学习能力有解决问题的勇气

准备:一台能科学上网的电脑(win或Mac均可)

Zion:适用web版本,目前小程序不支持

工具:下载cursor,下载地址:https://www.cursor.com/,安装过程略,免费试用就行,能免费2周,听说2周后删除账号能继续体验,无限续杯

了解代码组件:大概看一下就行https://www.yuque.com/functorz_doc/study_path/xd6tbshovy4y00ax

关于cursor

cursor是魔改的VScode,如果之前没有cscode相关经验的化,建议还是自己了解一下软件的基本操作,

另外刚开始建议cursor最好设置一下:

设置成中文版:

在cursor中必要重要的是打开Composer,全部打开

因为默认cursor会全英文和你交流,我一般会让他用中文和我交流,Rules for AI相当于是全局的Prompt

整体流程说明

整个流程大概是这样的,ai编码是可以全部交给cursor的,但是其他步骤是要自己来做的:

暂时无法在飞书文档外展示此内容

以下是我常用的终端指令

#Zion命令###############################
 
安装zion组件
npm install -g functorz
 
登录
npx functorz signin XXXX@XXXXXX XXXXXXXXX
 
 
初始化(拉取模板)
npx functorz create {yourproject}
 

发布
npx functorz publish


#其他常用命令##########################

进入目录
cd XXX

会到上一级目录
cd ..
 
安装依赖
npm install
 
打包
npm run build
 
测试
npm run dev

案例

那我们还是按照真实的案例来走一遍

案例1:iframe组件

待更新

1/新建项目

首先打开cursor,顶部菜单选择文件/新建窗口,

然后选择,或者新建一个目录,如weishao_iframe

然后你就得到了要给非常纯净的编辑器,如下

2/初始化项目

顶部菜单终端/新建终端,就得到以下界面

如果你之前没有安装过zion组件,最好安装下,虽然我不知道是干嘛的 npm install -g functorz

登录 npx functorz signin XXXX@XXXXXX XXXXXXXXX

XXXX@XXXXXX XXXXXXXXX分别是你的zion邮箱和密码,如果你之前是手机号登录的,可能需要去zion设置一下

https://zion.functorz.com/userCenter/accountSettings

登录成功后就是以上的界面

接下来是初始化

npx functorz create weishao_iframe

从顶部菜单,文件/打开文件夹,选择刚刚初始化建立的文件夹

因为Cursor如果不是在根目录处理的话,经常目录混乱,所以还是建议每次都在根目录下处理

此时你左侧是这样的,

顶部菜单终端/新建终端

安装依赖

npm install

安装完成就上图所示,可能有一些告警,但是不出错就问题不大

做好这一切好就准备开始ai编码了

3/AI编码

前戏结束,重点来了,终于开始例如Cursor来AI编码了.

向AI描述需求

快捷键ctrl+shift+i(mac好像是cmd+shift+i)

呼出composer

输入prompt

好的需求prompt决定了AI给你的结果,一定要认真对待,以下是我建议的prompt结构

分为业务需求和zion代码组件说明

暂时无法在飞书文档外展示此内容

因为zion代码组件说明会经常用到,所以我会有个文档来专门存放,而且日积月累,会不断的优化这个文档,例如下面的.(本文档暂时不公开)

但是业务需求就比较简单了,如果不复杂的组件一般几行字就能讲清楚

例如

iframe这个组件我的业务需求是

写一个iframe组件,变量是网址,宽度和高度 @zion代码组件说明

没错,写一个iframe组件就是这么简单!

你可能好奇@zion代码组件说明 是什么,在刚刚的composer界面新建一个natepads,命名zion代码组件说明 后创建

在写需求的时候换行后输入@就能出现下面的界面,选择notepad后选择刚刚建好的

输入好后点击回车了,右下角的大模型看各位习惯了,一般我用的是claude3.5

以下就是ai开始分析了

以上是ai处理的的过程,

如果处理完成后会出现以下几个按钮,可以看到cursor最大的特点是多文件编辑,如果点击accept all后就会同意所有修改,

点击后就会更新所有代码了

测试+修改需求

一般很难一步到位,修改需求再说难免,

在终端里面输入测试指令进行测试,如下

npm run dev

终端会给你个链接地址,crtl+点击后在浏览器中查看效果,可以看到,效果如下

并且看到组件中新建了一个夹,结构和文件名符合zion的规范

而且在index.ts中这个组件也声明出去了,

可以看到IframeComponent.tsx中ai帮我设置了3个变量,分别是url,宽度和高度

从app.tsx中可以看到ai给变量设置了一下测试的参数

完了,感觉一步到位了,不过我们还是体验下修改代码的流程

继续打开composer,输入修改需求

ai处理后,点击accept,然后继续之前的测试流程(因为百度不允许iframe,我改成了当前文档的地址)

测试发现高度只有一点点,所以我继续问AI,ai会需改代码,可以看到红色的是删除的,绿色的是新加的,这时候点击acceptall 后就可以看到全屏显示了

3/打包+提交更改

本地测试成功后,就可以本地打包,因为本地打包的时候有时候也会出现问题,能看到问题出在哪,直接pulish到zion的化是不知道问题在哪的,所以还是推荐先本地打包测试

终端中输入

npm run build

很配合,出错了,我们正好可以看下,如何解决,左边是原因,我一般懒得看,直接点击右边的按钮add to composer

让ai来解决

可以看到引入了109-135行内容,就是刚刚出错的代码,然后简单写下问题后回车

继续acceptall,后继续打包

npm run build

恭喜,出现界面说明成功了,可以开香槟了,后面都是些例行操作了