【无代码编辑器】用了近两年时间，终于搞出了无代码网页编辑器

一、研发背景

一直想要做一个无代码网页编辑器，让创业者、产品、运营、内容创作者等非开发者人群，可以做出自己想要的网页，实现自己心中的创意，但之前一直忙，没啥时间，疫情期间被封在家中，终于有时间可以着手这件事了。

于是，我就用了将近两年的时间，终于把这个用户可以完全离线制作网页的工具弄出来。我的设计理念是，让用户可以像使用word一样，制作出网页，并且可以添加javaScript可以实现的脚本功能，类似点击事件、toast提示、页面跳转等逻辑功能。

第一年时间，我做出了一个版本，但设计的很复杂，使用了很多的node服务接口，后来觉得有悖初衷，我是想要做一个用户可以离线制作网页的工具的，应该脱离后端的服务接口，后来经过多次重构，简化、简化再简化，终于完成了现在这个版本。

二、展示一下成果吧

• 网站地址：https://www.h5nocode.com
• 备用网址：static-mp-fbd5f46f-8c86-418f-b7db-46e1b9022de6.next.bspapp.com

h5nocode无代码网页编辑器

二、项目的整体设计

一个网页，通常是有两个部分组成，一个是展现给用户看的视图，还有一个是响应用户操作的脚本逻辑，所以，h5nocode也做出了这样的设计，整体设计分为两大块

1. 视图编辑界面
2. 逻辑编辑界面

1、视图界面

顾名思义，就是配置网页视图组件界面，这里包含：文本、段落、图片、视频、音频、按钮、输入框、下拉框、单选框、多选框、开关、代码展式、图片轮播、模态对话框、小图标等基础组件。用户可以使用这些组件，自由地组合出自己想要的页面。

2、逻辑界面

逻辑界面，就是添加逻辑块的界面，用于实现JavaScript脚本可以实现的一些功能，让你配置的网页，可以响应用户的操作、使用你的接口获取数据等，以下是已经实现的一些逻辑功能，后续会持续添加更多的逻辑块。

1. 系统操作相关的逻辑块

• 网页跳转、页面刷新、返回上个页面、修改网页标题
• 打开loading、关闭loading
• 轻提示-toast、提醒弹窗-alert、确认弹窗-confirm
• 显示模态对话框、关闭藏模态对话框
• 延时触发器、轮询触发器-开始、轮询触发器-结束

2. 事件处理相关的逻辑块

• 开始（页面初始化的时候，会触发这个事件）
• 点击、输入框-获取焦点、输入框-失去焦点、输入框-内容变动、下拉选择框-选择变动、单选框-选择变动、多选框-选择变动、开关-打开状态变动
• 点击轮播图片、图片轮播切换

3、组件处理相关的逻辑块

• 更新文本内容、更新段落内容、更新图片链接、更新视频链接、更新音频链接
• 修改组件层级、移动组件、大小缩放、旋转组件、倾斜组件、隐藏组件、显示组件、禁用组件、解除禁用
• 添加动效
• 播放音频、暂停音频、播放视频、暂停视频

4、接口处理相关的逻辑块

• 请求接口
• 接口返回数据处理
• 接口异常状态码处理

5、数据处理相关的逻辑块（和变量相关）

• 非空判断、数值比较器、布尔值比较器、字符串值比较器
• 数值变量赋值、数值变量运算赋值、字符串变量赋值、获取字符串长度、布尔值变量赋值、对象变量赋值、读取对象的某个值、数组变量赋值、获取数组长度、读取数组子数据、数组变量添加子数据、删除数组内的某个数据、获取一个随机数

6、缓存处理相关的逻辑块

• 添加cookie、读取cookie、删除cookie、清除cookie
• 添加localStorage、读取localStorage、删除localStorage、清除localStorage
• 添加sessionStorage、读取sessionStorage、删除sessionStorage、清除sessionStorage

三、PS

暂时就先简单介绍到这里了，具体的功能以及相关的实现，后续我会陆续写出来。

https://www.h5nocode.com 欢迎各位朋友来用用，多给提提意见，里面肯定还有很多不足的地方，我也会在后面将我的开发计划列出来。