评论

我的微搭之路-从0到1弄个简易小项目

官方推出了低码平台(微搭WeDa),这篇文章是我个人的一次简易项目搭建尝试,用于熟悉低码平台操作。


前言:什么微搭?

微搭(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 更新感想:对照一年前的原文,本次更改了很多内容,微搭变的越来越简便易用,越来越好。



感谢阅读!

最后一次编辑于  02-22  
点赞 8
收藏
评论

9 个评论

  •  
     
    04-11

    感觉就是脱裤子放屁,有的功能做起来反而麻烦

    04-11
    赞同 2
    回复
  • 🚬ÐäΤ ΤÕじā
    🚬ÐäΤ ΤÕじā
    03-29
    تشش
    03-29
    赞同
    回复
  • 义博云天
    义博云天
    2021-12-15

    牛叉


    2021-12-15
    赞同
    回复
  • PD
    PD
    发表于移动端
    2021-11-17
    牛啊牛啊,收藏一波学习一下
    2021-11-17
    赞同
    回复
  • 宁子仪
    宁子仪
    2021-09-23

    您好,想请问下我这个一直显示提交失败,您之前有遇到过这种情况吗?

    2021-09-23
    赞同
    回复
  • 吴奕群
    吴奕群
    2021-08-26

    点赞关注加收藏 三连

    2021-08-26
    赞同
    回复
  •           
              
    2021-04-11

    请问可以用这个编写上传小程序吗

    2021-04-11
    赞同
    回复 2
    • Dlc
      Dlc
      2021-04-20
      明显不能
      2021-04-20
      回复
    • 青寒
      青寒
      2021-04-24
      可以的。支持H5、小程序。
      2021-04-24
      回复
  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2021-03-24

    棒棒哒(๑•̀ㅂ•́)و✧

    2021-03-24
    赞同
    回复
  • Jasmin
    Jasmin
    2021-03-23

    学习到了!

    2021-03-23
    赞同
    回复 1
    • Dlc
      Dlc
      2021-04-20
      学到了能干啥
      2021-04-20
      回复
登录 后发表内容