我的微搭之路-从0到1弄个简易小项目
前言:什么微搭?微搭(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 更新感想:对照一年前的原文,本次更改了很多内容,微搭变的越来越简便易用,越来越好。 感谢阅读!