前言:什么微搭?
微搭(WeDa),全称是腾讯云微搭低代码开发平台。
微搭将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5应用、PC Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。
微搭以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航。
可以实现简易项目全程不写代码,拖拽完成。
参见:产品概述 https://cloud.tencent.com/document/product/1301/48874
2022.02.22 更新说明:鉴于微搭产品已经做了好几版优化,原文和现状出入很大,特做出更新。
开整:目标是做一个简易的用户反馈项目
第一步 创建应用
1,注册腾讯云账号
https://cloud.tencent.com/register
2,完成实名认证
https://console.cloud.tencent.com/developer
3,登录微搭控制台
https://console.cloud.tencent.com/lowcode
4,创建应用
位置1:快速开始-》创建应用-》新建自定义应用
位置2:应用开发-》新建应用-》从空白创建
*有四种方式可以创建应用,分别是“从模板创建”、“从数据模型创建”、“从空白创建”、“从Excel创建”。
*本文为了多体验一些内容,特意选择“从空白创建”方式(即新建自定义应用),其他创建方式会更加便捷!
如图:
*我们选择创建一个WEB端(H5/PC)项目,名字叫简易用户反馈。
如图:
点击新建后,会直接进入该应用的快速开始页面。
如图:
但个人习惯是先创建数据源,不着急现在就创建页面,所以让我们先回到应用首页。
可以看到我们刚创建的新应用。
如图:
以及应用详情:
接下来,我们先去设置一个用于存储信息的数据源。
第二步 设置数据源
位置:应用开发-》数据源-》数据模型-》新建数据模型
早期参与微搭项目的网友需要注意,微搭数据源做了升级,对照关系如图:
这里我们使用数据模型。
1,新建数据模型
如图:
然后设置数据模型名称、标识和描述,点击开始新建按钮。
这样就新建了一个数据模型。
如图:
2,添加数据模型字段
默认数据模型中有数据标识、创建时间、更新时间等系统模型字段,我们点击模型字段区域底部的“添加字段”,再增加几个。
1)如图:添加用户账号字段
设置字段名称、字段标识,选择数据类型,设置最小最大长度,设置必填,然后点击确定添加。
2)我们还可以设置枚举类型的字段
比如增加一个“涉及APP”的枚举字段。
如图:
可以选择是枚举,然后添加枚举项。
最后再加两个字段:问题描述、登录设备。
如图:
点击确定,数据模型就创建完毕了。
接下来,可以去拖拽控件创建页面了。
第三步 拖拽控件
1,打开应用页面编辑页
位置:应用开发-》应用-》编辑应用-》进入应用页面编辑
如图:
如图:应用页面编辑页
工作台主要分为三个功能区:顶部导航栏、组件页面区、编辑预览区
参见官方图示:
2,拖拽控件
1)表单容器
将左侧组件区域的“表单容器”拖到编辑区
如图:这里还可以快速编辑表单场景和数据源绑定
这里建议使用快速编辑,表单场景选择“新增记录”,
然后数据源绑定里面找到刚才新建的数据模型“用户反馈表”,选择“创建单条记录”。
选择“创建单条记录”后,页面会自动根据数据模型字段添加页面组件内容。
如图:
注意:此时是可以直接发布预览的,项目页面可以到此算作完成。
2)调整组件(可忽略)
这一步其实可忽略,我是因为个人习惯要调整一下组件。
首先删掉我不要的“所属部门”,点击选中该组件,点删除。
如图:
点击删除原来“涉及APP”的组件,从左侧拖拽“表单选择”到编辑区域。
这里仍推荐使用“快速编辑”功能,字段绑定直接输入数据模型中的“涉及APP”字段名称app_name。
右侧属性区域,改了占位符提示以及选项列表内容(和数据字段枚举对齐)。
到底就做好了页面。
第四步 预览和发布
1,预览
位置:页面右上角-》预览
如图:
点击预览按钮,会生成提供一个二维码和链接。
手机扫码效果:
2,发布
位置:页面右上角-》发布
点击页面右上角的发布按钮,会展示发布弹出层,可以选择发布方式(正式版或体验版),可以设置应用版本号。
系统还会自动进行检查,比如我遇到2个检查问题。
提示我数据源未发布,只有发布的数据源才能公开使用,所以在底部直接点发布即可;
还提示我角色组有更新,点发布或忽略即可。
如图:
检查项都处理后,在发布弹出层上面点确定,就会进入发布状态。需要稍微等一会。
如图:
发布成功后,会提供二维码和访问链接。
接下来就可以进行手机或电脑端体验了。
第五步 访问测试
1,扫码或复制H5链接,打开刚做的简易项目页面。
如图:
填写一些信息,然后点击提交。
如图:
页面显示“提交成功”
2,数据管理后台查看写入数据
位置:数据源-》数据模型-》数据管理后台
如图:
点击“数据管理后台”,或者具体数据模型操作列的“管理数据”,会自动跳转打开数据管理后台页面,并能看到系统为我们自动生成的项目数据列表。
如图:
点击“用户反馈表”的管理数据,我们打开看一下刚才页面数据是否录入成功。
如果没看到数据,需留意左上角的数据切换,是否选了正式数据。
如图:
可以看到录入成功了。
总结:虽然我描述的有点啰嗦,但从头到尾操作下来,确实做到了没写任何代码,全程鼠标点击、拖拽,就完成了一个简易项目。
当然低码并不是完全不写代码,一些项目可能还是要写一点代码的,这个后面找机会我再去试试。
2022.02.22 更新感想:对照一年前的原文,本次更改了很多内容,微搭变的越来越简便易用,越来越好。
学习到了!