更新记录

1.0（2026-06-15） 下载此版本

设计标签，自定义标签位置，自定义标签尺寸，支持标签旋转放大

平台兼容性

智能可视化标签设计器 - 使用说明

项目简介

本插件是一个基于 uni-app (Vue 3) 开发的可视化标签模板设计器，用于设计和预览商品标签的排版布局。支持在画布中自由拖拽、旋转、缩放元素，并通过属性面板精确微调各项参数，实时预览标签效果。

功能概览

界面结构

┌──────────────────────────────────────────────────┐
│              智能可视化标签设计器（顶部横幅）          │
├────────────────────────┬─────────────────────────┤
│   左侧 - 配置面板       │   右侧 - 预览画布         │
│                        │                         │
│  ┌──────────────────┐  │  ┌───────────────────┐  │
│  │ 画布规格参数      │  │  │  标签纸模拟画布    │  │
│  │ · 模板名称       │  │  │  (可拖拽/旋转/缩放) │  │
│  │ · 宽度/高度/边距  │  │  │                   │  │
│  │ · 启用开关       │  │  │                   │  │
│  └──────────────────┘  │  └───────────────────┘  │
│  ┌──────────────────┐  │  比例规格：40mm × 30mm   │
│  │ 内容图层管理与微调 │  │                         │
│  │ · 商品名称 ☑     │  │                         │
│  │ · 规格属性 ☑     │  │                         │
│  │ · 零售价格 ☑     │  │                         │
│  │ · 商品产地 ☐     │  │                         │
│  │ · 条形码   ☑     │  │                         │
│  │ · 二维码   ☐     │  │                         │
│  └──────────────────┘  │                         │
└────────────────────────┴─────────────────────────┘

详细操作说明

一、画布规格参数

在左侧配置面板顶部的 「画布规格参数」 卡片中设置：

修改尺寸后，右侧画布会自动等比缩放适配预览区域。

二、内容图层管理

在 「内容图层管理与微调」 卡片中操作：

6 个可用图层

操作方式

• 勾选/取消：点击图层左侧圆形复选框，控制该图层是否显示在画布中
• 全选：点击卡片标题栏右侧的「全选」按钮，启用所有图层
• 清空：点击「清空」按钮，关闭所有图层
• 展开属性面板：点击图层标题栏区域，展开该图层的详细属性编辑区

三、元素属性微调

展开某个已启用图层的属性面板后，可进行以下微调：

通用属性

文本元素（商品名称/规格属性/零售价格/商品产地）

条形码/二维码元素

条形码会根据输入的 13 位数字自动计算 EAN-13 校验位并渲染标准条码图形。 二维码为仿真渲染，基于输入文本的哈希值生成 21×21 像素矩阵。

四、画布交互操作

在右侧可视化画布中，支持以下直接操作：

1. 选中元素

• 点击画布中的元素，即可选中
• 选中后元素四周出现蓝色虚线边框，右上角显示旋转把手，左下角显示缩放把手
• 同时左侧面板自动展开该图层的属性编辑区

2. 拖拽移动

• 鼠标：按住元素拖拽移动
• 触控：手指按住元素滑动移动
• 位置以百分比计算，自动限制在画布范围内

3. 旋转操作

• 鼠标：按住元素右上角的 ↻ 旋转把手，拖拽旋转
• 触控：手指按住旋转把手拖拽旋转
• 旋转基于极坐标算法，以元素中心为旋转原点
• 也可在左侧面板使用滑块或快捷按钮精确设置角度

4. 缩放操作

• 鼠标：按住元素左下角的 ⤤ 缩放把手，拖拽缩放
• 触控：手指按住缩放把手拖拽缩放
• 文本元素：缩放字号大小
• 条形码/二维码：等比缩放宽度和高度
• 缩放基于距离比率算法，以元素中心为参考点

5. 取消选中

• 点击画布空白区域可取消选中

画布渲染机制

运行环境要求

已知问题与排障

微信小程序 wx is not defined 错误

现象：运行到微信小程序时控制台报 ReferenceError: wx is not defined

原因：uni-app 框架编译产物中顶层作用域引用了 wx 对象，与微信开发者工具增强编译模块存在时序冲突

解决方案（按优先级）：

1. 升级 HBuilderX 到 4.51+ 版本，框架层已修复此兼容性问题
2. 清理编译缓存：删除 unpackage/dist/ 目录后重新编译
3. 调整微信开发者工具设置：详情 → 本地设置 → 将调试基础库版本调至 3.x 最新版
4. 关闭增强编译：在微信开发者工具中取消勾选「将 JS 编译成 ES5」

项目文件结构

biaoqian_demo/
├── App.vue                  # 应用入口组件
├── main.js                  # 应用入口 JS（Vue 3 + createSSRApp）
├── manifest.json            # UniApp 配置（appid、平台设置）
├── pages.json               # 页面路由配置
├── uni.scss                 # 全局 SCSS 变量
├── pages/
│   └── index/
│       └── index.vue        # 标签设计器主页面（1660 行）
├── static/
│   └── logo.png             # 应用图标
└── uni.promisify.adaptor.js # Promise 适配器

默认数据配置

页面 data() 中的默认配置如下：

templateName: '标准商品标签',  // 模板名称
labelWidth: 40,               // 标签宽度 (mm)
labelHeight: 30,              // 标签高度 (mm)
padding: 2,                   // 安全边距 (mm)
isEnabled: true,              // 是否启用

6 个图层的默认参数：

如需修改默认值，编辑 pages/index/index.vue 中 data() 的 contentList 数组即可。