如何使用codewave低代码程序完成一个PC端前端页面
最近在学习codewave低代码,现在就记录一下初级工程师需要学会什么
了解codewave
访问链接在此,可以通过手机号码注册一个账号然后再了解codewave
https://community.codewave.163.com/CommunityParent/learncenter
第一个codewave前端项目:采购管理系统
内容包含三个子页面和一个主页面
主页面
这个是我设计的主页面,主要通过线性布局 阑珊布局分布区间,然后往画布里面添加内容即可
子页面的共同区域
通过线性布局和栅格化两个区域 一个4格一个默认格,在四格的位置加上文本,文本内容采购管理 并且设置栅格列右边有一个4大小的边框。在另外一个栅格列里面加入一个面包屑第三种样式,删掉不需要的内容,把供应商管理打上,并且留下两个图标。以上是三个子页面共同的地方,可以复制粘贴。
供应商管理下的逻辑运算知识
加入两个数字输入组件,和三个文本:+ = 和存放结果的文本
并在该子页面添加两个int类的变量,生命周期当然也是只在该子页面
把两个数字输入组件分别绑定variabl1和variab2
在最后的结果文本中添加内容为逻辑相加两个框内分别放入variable1和variable2
改变成按钮点击逻辑
把结果文本删除,然后添加一个按钮,通过点击按钮来弹出运行结果
在添加按钮之后,在按钮的事件中添加一个click事件,双击该事件后进入事件逻辑页面,在该页面上拖拽出消息组件在组件内添加相加组件并且添加variable1和variable2
把按钮点击出结果改成按钮点击后弹窗出结果
首先在页面中拖出一个组件弹窗到左下角反馈类里面,会出现一个model加上数字的框,双击进去修改两行的内容为相加结果和绑定两个变量后的计算结果
其次把原先的按钮click事件里面的消息组件删除,然后从组件里面拉出调用逻辑,并且选择刚刚创建的model逻辑的open,运行即可跳出弹窗
如何在逻辑性编程中加强代码的重复使用率?
首先把添加一个新的按钮名叫计算,在供应商管理的树状下添加一个逻辑opeanModel,在里面调用之前做好的逻辑model_01,这样一个可以重复的逻辑运算就被打包进opeanModel里面了
其次在计算页面也添加一个事件,调用创建的逻辑 opeanModel 这样两个按钮都有了一样的效果
课程见6.2四分钟左右
数据表格设计
把刚刚用到的逻辑相关组件全部删除,只留下线性结构
打开数据里面的supperlist然后根据需求开启或者关闭是否显示
然后再再线性结构添加一个面板,往里面托进更新后的ssupperlist即可以运行出需要的结果