乐于分享
好东西不私藏
当前位置：夜雨聆风 > 技术教程 > 软件教程 > 【v4版】DIY页面编辑器详细使用指南

【v4版】DIY页面编辑器详细使用指南

当前时间： 2026-05-09 15:08:52 更新时间： 2026-05-09 分类：软件教程 评论(0)

【v4版】DIY页面编辑器详细使用指南

DIY页面编辑器是一个强大的可视化页面构建平台，让管理员无需编写代码即可通过拖拽方式快速创建和定制小程序页面。系统采用直观的三栏式设计，支持多页面管理和丰富的组件库。

界面布局介绍

1. 顶部工具栏区域

  • 页面管理：切换、新增、删除不同页面模板

  • 保存功能：保存当前页面配置

  • 操作历史：撤销/重做按钮，支持操作回退

  • 提示信息：显示操作指引

2. 左侧组件库区域

  • 组件分类：包含轮播图、公告、菜单、查询、统计等15+组件

  • 滚动显示：支持上下滚动浏览所有组件

  • 图标标识：每个组件都有对应的图标便于识别

3. 中间画布预览区域

  • 实时预览：即时显示页面效果

  • 拖放目标：接收从左侧拖拽的组件

  • 交互操作：点击选中组件，显示操作工具

  • 滚动支持：长页面可滚动查看

4. 右侧属性配置区域

  • 全局配置：页面背景、边距、启用状态

  • 组件属性：选中组件的详细参数设置

  • 排序控制：组件上移下移按钮

  • 内容管理：组件内部项的新增、删除、排序

完整操作流程

第一步：选择编辑页面

1. 点击顶部页面选择器，显示所有可用页面模板。

2. 选择要编辑的页面，如”首页模板”、”课程页模板”等。注意：首页模板有特殊标识且不可删除。

3. 设置页面整体样式，在右侧的全局配置中，调整背景颜色、边距。以及设置是否启用：如果不启用则该模板不生效。

第二步：添加组件到页面

1. 在左侧组件库中找到所需组件。

2. 按住鼠标左键不松开，拖动组件。

3. 移动鼠标到中间画布区域，看到拖拽效果（出现蓝色边框）。

4. 在希望放置的位置松开鼠标，组件即被添加。

💡 重要提示：添加组件的正确姿势是”按住→拖动→放置”，而不是点击后自动添加

第三步：配置组件属性

1. 在画布中点击组件，组件边框高亮表示选中

2. 右侧属性面板自动显示该组件的配置选项

3. 根据需要修改各项参数，修改实时生效

第四步：调整组件布局

1. 拖拽调整顺序：直接拖拽组件到新位置

2. 按钮调整顺序：使用属性面板的”上移/下移”按钮

3. 删除不需要的组件：点击组件右上角删除图标

第五步：保存页面配置

  1. 完成编辑后点击顶部”保存”按钮

  2. 系统提示保存成功，配置立即生效

  3. 启用状态的页面将在移动端显示

核心组件详细使用方法

🎠 轮播图组件

添加方法：从左侧拖拽”轮播图”组件到画布

配置步骤：

  1. 点击画布中的轮播图组件选中它

  2. 在右侧属性面板点击”添加轮播图项”

  3. 为每个轮播项设置：

    • 图片：点击图片选择器上传或选择图片

    • 跳转类型：选择跳转方式（重要！）

    • 跳转链接：根据跳转类型填写相应内容

跳转类型详解，其他组件链接同理：

  • navigate：跳转到小程序内部页面（非TabBar页面，默认）

    • 示例：/pages/user/profile

  • redirect：关闭当前页面并跳转（同上，但关闭不能返回）

    • 示例：/pages/product/detail

  • switchTab：切换到TabBar页面（底部固定按钮如【首页】、【我的】）

    • 示例：/pages/index/index

  • reLaunch：关闭所有页面打开新页面（同上，关闭不能返回）

    • 示例：/pages/home/index

  • 二级模板：跳转到DIY创建的二级页面

    • 从下拉列表选择已创建的模板

  • 外部链接：打开外部网页链接，注意网址要加入小程序业务域名中

    • 示例：https://www.example.com

📢 广告图片组件

添加方法：拖拽”单图广告”组件

配置内容：

  • 广告图片：设置显示的图片

  • 图片高度：调整广告位高度（50-500px）

  • 圆角尺寸：设置图片圆角效果

  • 跳转配置：同轮播图的跳转类型和链接

🔍 查询组件

添加方法：拖拽”查询组件”到页面，可将某个查询项目，直接放置在指定位置查询。

配置流程：

1. 选择查询项目：从下拉列表选择已创建的查询表单

2. 设置按钮文字：自定义查询按钮显示文字

3. 配置按钮样式：

    • 背景颜色、文字颜色

    • 字体大小（12-50px）

    • 按钮尺寸（宽度100-600px，高度30-200px）

    • 圆角半径（0-60px）

📊 统计组件

添加方法：拖拽”统计组件”到页面

配置项：

1. 选择统计模板：从下拉列表选择预定义的统计模板

2. 显示设置：

    • 是否显示标题

    • 标题文字和样式

    • 标题大小和颜色

3. 样式配置：

    • 背景颜色、内边距、圆角

    • 结果区域背景色、圆角、内边距

🧭 网格菜单组件

添加方法：拖拽”网格菜单”组件

布局配置：

  • 列数：设置菜单排列列数（1-6列）

  • 间距：行间距和列间距（0-100px）

  • 尺寸：图标大小和文字大小

菜单项管理：

1. 点击”添加菜单项”创建新菜单

2. 为每个菜单项设置：

    • 菜单名称

    • 菜单图标

    • 跳转类型和链接

3. 拖拽排序：按住菜单项左侧拖拽图标调整顺序

🧩 Win8瓷贴菜单

添加方法：拖拽”win8瓷贴菜单”组件

特色功能：

  • 不规则布局：支持不同大小的瓷贴项

  • 占据行数：每个瓷贴可以占据1行或2行高度

  • 视觉层次：创建丰富的视觉效果

页面管理功能

创建新页面

1. 点击顶部”新增页面”按钮

2. 填写页面信息：

    • 页面类型：输入英文标识，如”course”、”article”（不能使用”home”）

    • 模板名称：输入中文名称，如”课程页模板”

3. 点击确认创建

删除页面

  1. 从页面选择器选择要删除的页面

  2. 点击”删除当前页面”按钮

  3. 确认删除操作

⚠️ 注意：首页模板受到保护，无法删除

切换编辑页面

  1. 点击页面选择器下拉菜单

  2. 选择目标页面

  3. 如有未保存更改，系统会提示保存

高级功能详解

操作历史管理

  • 撤销操作：点击撤销按钮回退上一步操作

  • 重做操作：点击重做按钮恢复被撤销的操作

  • 自动保存：每次操作都会自动记录到历史栈

移动端适配说明

所有配置的页面都会自动适配移动端：

  • 响应式布局：组件自动调整大小和排列

  • 跳转功能：完整的页面跳转和导航

  • 数据同步：查询和统计组件数据实时更新

  • 二级页面：支持DIY创建的二级页面跳转

注意事项

  1. 权限限制：只有管理员账号可以进行模板管理操作

  2. 数量限制：部分组件有数量上限（轮播图10项、菜单20项）

  3. 外部链接：使用webview需要提前配置业务域名

  4. 图片优化：建议使用适当尺寸的图片以提高加载速度

  5. 保存频率：重要修改后及时保存，避免意外丢失

版本更新亮点

最新功能（2025.11.5）

  • 二级页面跳转：支持在组件中跳转到DIY创建的二级页面

  • 多图幻灯增强：更灵活的跳转配置选项

  • 广告图片升级：完整的跳转链路支持

  • 移动端优化：更好的交互体验和性能

体验优化（2025.11.4）

  • 滚动支持：组件库和预览区域支持滚动，操作更顺畅

  • 页面管理：新增、修改、删除页面模板（首页保护）

  • 查询组件：在页面任意位置嵌入查询功能

  • 统计组件：可视化数据展示组件

  • 权限收紧：确保只有管理员可修改模板

通过这个详细的指南，您可以充分利用DIY页面编辑器的所有功能，快速创建出专业水准的小程序页面。如在使用过程中遇到问题，可随时查阅相关章节或联系技术支持。

点击阅读原文购买源码