掌握js能快速开发可视化应用吗?

JavaScript012

掌握js能快速开发可视化应用吗?,第1张

答案是肯定的,

在开始使用 ThingJS 之前,需要先了解JavaScript,我们假设您已经掌握JS。

创建项目

创建项目之前需登录ThingJS账号,如果您尚未登录账号或页面出现“登录已过期,请重新登录!”的提示,为保证项目的正确保存及运行,请您在账号登录之后再创建项目。您可通过以下三种方式创建项目:

选择菜单区域的“文件 - 新建项目”选项

点击工具栏“新建”图标,图标如右图所示:

请点击输入图片描述

请点击输入图片描述

使用快捷键“Ctrl+P”

编辑项目

在线开发为用户提供了相应的快捷代码和官方示例,如果你正在用 ThingJS在线开发页面,可以通过以下两种方式来编辑项目:

点击在线开发页面网页链接菜单区域的快捷代码选项中的子项,编辑区将自动插入相应代码

选择在线开发官方示例中的其中任意一个示例,点击相应示例,编辑区将显示相应代码

请点击输入图片描述

后续操作详见 在线开发 - 应用开发 - 在线开发

保存项目

可通过以下四种方式保存项目:

选择菜单区域的“文件 - 保存”选项

点击工具栏“保存”图标,图标如右图所示:

请点击输入图片描述

请点击输入图片描述

使用快捷键“Ctrl+S”

运行项目

在线开发环境提供了以下几种方式运行项目:

使用快捷方式“Ctrl+R/Enter”或点击工具栏中的“运行”图标,3d容器区域将运行编辑器相应的代码。图标如右图所示:

请点击输入图片描述

请点击输入图片描述

选择菜单区域的“工具 - 设置”选型,出现的设置面板,点击开启“自动保存执行”

请点击输入图片描述

先看效果,为一个可视化活动编辑器。

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

在做生成一个可视化店铺装修系统的时候,需要解决配置数据表单的通用性,参阅了一些现用的解决方案,最终通过 JSON Schema 来生成对应的表单和校验规则。

JSON Schema 主要运用在如下几点:

首先可视化编辑器需要做到板块的管理,这些板块支持可视化的编辑配置和效果展示,最终相互组装为一个页面。

每个板块我们不可避免的需要一个 View组件 来做展示,因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现,然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。

如下图:

这样当我们在添加新的板块时,只需要开发一个 View组件 ,和书写一份 JSON Schema 来定义数据即可。

添加新的板块只需要在 config/tools.js 导入新增的板块,并且配置好工具栏即可,如:

新增板块文件结构如下:( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)

导出模块解释如下:

如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。

整个实现相对比较简单,感兴趣的可以花上两个小时看下源码,欢迎讨论提问。