2.1 编辑器的介绍和使用原创

大家好，欢迎大家来到腾讯云开发者社区，腾讯云微拉团队共同打造的VR低代码平台，一人构建企业级应用实战训练营。第二章第一节我将为大家讲解微搭编辑器的介绍以及使用。我是腾讯云微拉团队产品经理成平。首先我们介绍一下微拉的一些重点模块。这里我们主要看到的是数据源可视化开发用户权限，还有审批流，因为我们在用全代码开发的时候，可能一个整个完整的流程，就是后端需要去管数据库，他可能需要对数据。做一些表的建立，做一些呃接口的增删改查的一些编写，然后前端它可能主要注焦于一些页面的开发，呃，如果说存在多端的一些要求，他可能还需要起多端的页面开发，然后我们可能还需要一个用户管理的模块去做一些权限登录这些事情。

如果说我们还有一些审批的动作，包括任务，还有一些消息通知这些。如果说我们有支持的话，我们可能需要一个审批流的模块创建出来，所以一个全应用的开发，其实我们是分别分出来了很多种细小的分支，我们有很多事情要去做，但是在V平台上，其实这些我们相当于就给你已经全部都管理好了，在数据源上，你只需要通过可视化的方式去做一些页面上的配置，就可以把这个数据模型，也就所谓的表给建立好。如果说你是外部的数据库，我们也可以支持你直接连接，如果说你的数据来源于是API，或者说是其他地方的其他这种方式，我们也支持你通过自定义的方式去做数据做录入，可以通过API的方式，也可以通过HTTP的请求直接连接过来。我们还提供了大量的as，也就是针对于我们腾讯内部的其他的一些场景应用，比如说企业微信、腾讯会议、腾讯文档这些。

数据源这一块是提到这么多，然后可视化开发这一块，也就是页面的搭建上，我们提供了70多种内置组件，包括我们提供了大量的模板，还有自定义组件，可以支撑你的整个页面的构造。然后我们也提供了一码三端的方式，可以让你编码一套即可生成三端的页面。然后我们也提供了AI的支持，我们可以通过AI问答去知道你应该要做什么，你如果说有不明白的，他会告诉你正确的答案，你也可以根据AI的对话去直接生成页面。可以跟他再继续做，继续做调试，他会帮你把这个页面做的更加的完善。用户权限和审批流，这些是我们内置的功能，我们直接去调用即好即可。所以在我们整个应用的开发上使用VR时，它其实只需要关心于可视化开发和数据源的设计。在用户权限和审批，包括一些额外的工作流，或者说其他的一些设定上，我们只用交给维达去做即可。

而我们的整个开发流程其实和全代码开发流程是一致的，我们如果说要创建一个应用的话，去开发一个应用，那么首先我们就需要去建数据源，或者说连接外部数据源，然后就开始做页面的设计，当我们页面设计完成之后。跟数据员做对接，对接完成之后，你就是应用开发完成了，这时候我们就要去发布，我们提供的是一键发布的方式，你只需要点一个按钮，你就可以把这个应用直接发布到线上。就直接上了生产环境。对，所以我们的开发流程和全代码开发流程是比较相像的。

接下来，我将进入到我们的微拉平台上，给大家介绍我们的编辑器是怎么个操作方式。好的，现在我们进到了微搭低代码平台的可视化开发模块，这里进来的就是我们最终会在这里去做页面的产出。首先我们可以看到这个页面上的这里，它是有一个页面设计的，这里放的就是我们当前应用下所有的页面都会在这里罗列出来，我们也可以通过这里去做新建，也可以建一个分组去给它统一管理起来。这里也可以对这些页面做一些比如说设为首页，或者说去做克隆复制的这些操作。然后这里可以看到，它上面写的是切换到布局设计，在微里边，它的页面是分为两种的，它的每个页面的结构内容是分为布局和当前页面的主体。

所以。它的这个布局里边，其实放的就是这个整个应用，整个页面的框架。我们一般的应用都会有一个菜单栏，或者说是头部的一种，呃，导航栏这些。所以在布局设计里边，我们主要就是去做这些东西的处理，我们现在提供的顶侧左侧场子tab tab主要是用在移动端的一些布局，我们主要提供了一些比较常用的布局导航的一种设计，然后我们只需要在这里去做这种布局的设计，当我们设计完了之后，在页面中去引入这个导航。导航布局即可，这个时候它会把这个页面两个给结合在一起，它的主体当前页面的主体就会放在那个导航布局的主体里，这个时候就能实现多个页面可以共用同一个导航，而不用每一个页面都得单独的去设计头部跟左侧。

这是我们的导航布局的一个设计位置。然后这里是我们的三端的一个渲染方式，比如说我当前页面，它是一个图表类型的东西，而我们可以通过这里直接切换不同端的一种展示。像这里我们切到了H5的展示，可以发现它这里的块状卡片其实已经变成了每行一个，而刚才是一行4个，就是因为它会自动做一些适应。包括这里是小程序的一种平台构建，它的渲染方式和H5是一样的。然后这里是我们的数据的切换，V拉本身就会提供体验数据和正式数据两套数据源，这两套数据源是相互独立，互不相干的。而体验数据其实就像是测试数据，正式数据就是生产数据，所以在平常开发的时候，我们用体验数据即可，到最后上线的时候才会用到正式数据。

这里是我们的预览按钮，当我们想要看一下当前页面的效果的时候，可以点这里直接看到我们的最后渲染的一种结果。这里是我们的发布按钮，当我们应用开发完成之后，我们想把它发布到公网去，发布到线上去，我们就可以点这里，而这里我们支持的就是web端和小程序端，小程序端需要我们去做一个小程序认证，去绑定我们的小程序员才可以做发布。当我们只用发布web端的时候，我们就勾选外部端，然后可以选择这个发布方式，发布方式我们也选，也可以支持你选择正式版和体验版。意思和刚才的是一样，相当于我们也分为了两个环境，当你发布的是体验版的时候，你的这个应用用到的数据就是体验版数据，而正式版用的就是正式版。

所以这里我们只需要点确定，即会把这个应用发布到我们的环境中，可以正常使用。这里是我们的应用管理，如果说我们需要对这些应用做一些设置，比如说我们的图标，包括我们的域名管理，包括我们的访问那个登录页，我们也可以在这里做配置，对这里主要是应用的一些详情设置。这里可以看到我们的应用相关的一些开发环节，比如说我们的发布结果、发布记录这些。我们可以在这里去看到。说完上面的导航栏之后，可以看一下我们页面的主体，这里是我们的大纲数，它主要是当前页面的一个布局结构，可以看到顶层就是页面，然后这里是个布局，可以我们把布局打开，可以发现它里边会有一个布局组件。当我们点中它的时候，主体会有一个高亮的一个蓝色的方框。

这个就是他框选择的主体啊，这个主体其实就是我们最后页面开发的主体。我们可以往里边儿更加深入的看一下。这里会有个网格布局，这里就是我们的一个组件网格布局，它就会展示我们的。很多组件内容这里边儿就是每一个单独的组件，所以我们可以根据这个大纲数看到我们每一个页面的整体结构，包括我们选中组件的时候，也可以直接选中，或者点左侧去选中，我们也可以把左侧的这个。组件进行拖拽做排序，比如说我把这里拖到这个位置。然后我们还有状态数据，状态数据也是当前页面我们可以拿到的所有数据源，这里我们提供了一些系统变量，比如说登录用户的信息，包括应用信息、设备信息这些，我们云端的能力，还有一些，这些主要是云开发的能力，也就是我们云函数的一些能力。

包括有一些URL参数，这些都是我们当前页面的一些属性数据变量，我们都可以通过从这可以看到它。然后下边这个代码区主要是我们当前页面，或者说是全局的一些数据方法这些，它主要是更偏向于一些状态和一些方法，还有一些工作流，这些我们可以通过点这个加号可以看到，我们支持你在这儿放一些查询JS脚本，包括一些MYSQL的库的直连查询，包括变量。还有事件流。这些。当我们选中了某一个组件之后，右边可以看到这个添加其实是指的我们的组件库，我们可以从从这里把组件直接拖到页面上，也可以把它直接拖到这个大纲处中，都是可以的。我们现在组件支持的比较多，大概有六七十种。然后区块指的就是我们把一些组件封装好了，变成了它一个模块类的，你可以直接把这个区块直接拖到页面上。

自定义指的就是我们当时自己通过编码方式开发的组件。当我们自己编码开发的组件push上来之后，它就会在这里做展示。我们选中某一个组件之后呢，这里会有一个配置，这个配置指的就是我们当前组件的一些配置。我们可以看一下这个统计卡片。这个组件它的配置信息就有这么多，我们可以在这里去做一些数据的处理，它这个有很多基础，可能每个组件都会有的一些一些属性，比如说是否可见。像这些，包括它的事件都是在这里做配置，而我们的事件配置方式不仅仅只支持代码方式，我们提供了很多默认给你封装好的一些方法，比如说调用查询，这个调用查询指的不是只支持查询，它是支持你对数据源做增删改查。

然后触发审批流，还有调用工作流，变量赋值这些等等，包括我们有些页面交互，我们是直接给你封装到这个位置，就不需要你去单独的做处理，你可以直接选择显示加载中，当前页面就会弹个窗显示加载在。包括一些微信能力，包括组件方法，当你的页面上有一些其他组件提供出来的方法，也是可以直接在这里获取到那个组件的方法去执行。也就不需要你像全代码开发的时候还要去获取什么组件的实例，这些都不需要，这里你只需要去选中那个组件，然后去执行它的方法即可。样式，这里我们提供了很多的配置化样式，比如说文字的一些对齐方式，还有这些布局，我们可以直接在这里去调节，我们的调节，我们的外边距和内边距，包括我们的圆角半径定位这些都可以。如果说这些基础的能力我们不够支持的话，我们也可以自行的去绑定class name, 我们可以自己去绑定一个class，或者说在这里我们也可以直接去写style，我们也可以去绑定一个动态的class名称。

如果说这些都不支持我们想自定义的去写CSS，这里我们也支持你直接去编码CSS这个位置，你写的样式它只会聚焦实现在你的当前组件中，它是以内联方内联样式的方式放在你当前组件中，所以它不会对其他的地方产生污染。如果说我们有一些样式是需要通用的话，我们可以在这个代码编辑器这里去单独编写一个类名的样式，然后在这里做类名的绑定即可。然后回到我们的这个组件上，可以发现我们的组件的很多属性后边都会有个FX，这个东西是我们的一个表达式，就是我们几乎任意所有的属性，我们都是支持你通过表达式的方式去编写的。

举个例子，像这里是否统计空值，它默认就是一个布尔值，它可以选择是或者否，而这个东西如果说你在这里选择的话，它其实是定死的，它是不会改变的，但是如果说我们这个数据统计是要根据其他的。东西去做一些计算，做一些处理才能得来的结果的话，我们可以通过这个表达式切换，而这个表达式切换指的就是我们可以通过GS表达式的方式去计算出最后的结果是true还是false，而这个计算的结果中间的计算来源，它可以是你当前页面的所有属性，所有数据，也就是你在这个状态数据中可以看到的任意信息，我们都是可以在这里获取到的。

我们就可以根据我们获取到的的这些东西去做计算，做一些处理，而得到最终应该展示的是true还是false。对于编辑器页面的介绍就到这里，我们下节课将分享我们的数据模型的搭建。