简介这是一款面向设计师与前端开发者的零代码可视化开发工具基于DIYGWUI框架专为快速构建微信小程序、H5页面及UNIAPP应用而设计无需编程基础即可通过拖拽完成界面搭建与逻辑配置。资源包共1516个文件总大小12.04MB涵盖412个JavaScript文件支撑交互逻辑、188个Vue组件用于跨端渲染、251个JSON配置定义页面结构与数据模型、98个PNG图片含UI图标与素材以及适配多端的小程序样式文件如wxss、axml、swan、ttml等和SCSS/CSS样式资源目录组织规范便于按平台或功能模块快速定位。已有389人学习下载适合希望提升原型产出效率、降低多端适配成本的UI/UX设计师、产品原型工程师及初级前端开发者。用户可直接导入项目一键导出完整可运行源码覆盖微信、支付宝、抖音、百度等主流小程序平台及H5/WebApp形态。1. 这不是“拖拽拼页面”的玩具而是一套能导出可直接上线的 UNIAPP 和微信小程序源码的可视化工程体系很多设计师第一次点开 DIYGWUI 的界面时会下意识认为这是个“PPT式网页生成器”——拖几个按钮、换张背景图、导出 HTML 就完事。但实际拆开它包含的 1453 个文件后你会发现zsff.acss不是普通样式表而是针对小程序scroll-view滚动性能优化的原子级 CSS 规则集swipers.acss里嵌套了supports (display: grid)transform: translateZ(0)双重 fallback专为 iOS 12 微信 WebView 渲染引擎做兼容page.acss中的position: fixed声明全部被包裹在.page--no-safe-area类中规避 iPhone X 以上机型顶部刘海区遮挡问题。它真正解决的是设计与交付之间的「语义断层」UI 设计师用 Figma 画完高保真稿无需等前端切图写逻辑直接在 DIYGWUI 中复现交互流、绑定数据字段、配置路由跳转最终一键生成的不是静态 HTML而是结构完整、可npm run dev启动、带uni-app生命周期钩子、含wx.requestPayment支付封装、支持uni.getSystemInfoSync().platform ios条件编译的真实工程源码。适合两类人一是中小团队中既要做原型又要兼顾上线的全栈型产品二是需要快速验证业务流程、拒绝“设计稿→评审→开发排期→联调→上线”长周期的 MVP 创业者。2. 从 ACSS 文件体系看 DIYGWUI 的底层渲染机制为什么它能同时输出小程序与 H5 源码DIYGWUI 并非简单地把 Vue 组件转成 WXML而是构建了一套跨平台的样式抽象层ACSS其核心在于将视觉属性映射为平台无关的中间表示再由编译器按目标平台生成对应代码。以tab.acss为例它不直接写wx:for或v-for而是定义component tab-bar { ... }块内部声明item-height: 80rpx、active-color: #007AFF、inactive-color: #999等语义化属性。当选择导出微信小程序时编译器会将item-height: 80rpx转为 WXML 中view classtab-item styleheight: 80rpx并自动注入wx:for{{tabs}}指令导出 H5 时则生成div classtab-item :style{ height: 80px }配合 Vue 的响应式系统驱动更新。这种设计避免了传统可视化工具常见的“H5 能跑小程序白屏”问题。2.1 ACSS 文件的语法结构与编译规则解析ACSSAbstract CSS是 DIYGWUI 自研的样式描述语言语法类似 SCSS 但更精简关键特性包括组件作用域、条件编译、单位自动转换。以collapse.acss为例component collapse { // 基础样式所有平台共用 border: 1px solid #eee; border-radius: 4px; // 条件编译仅小程序生效 if platform mp-weixin { margin-top: 20rpx; padding: 20rpx; } // 条件编译仅 H5 生效 if platform h5 { margin-top: 16px; padding: 16px; } // 响应式单位rpx 在小程序中转为 rpxH5 中转为 rem font-size: 14rpx; // 嵌套子组件 component header { display: flex; justify-content: space-between; align-items: center; padding: 0 16rpx; } }提示rpx单位在 ACSS 编译阶段被处理——小程序目标下保留rpxH5 目标下按750rpx 100vw换算为rem例如14rpx→0.1867rem14/75。该转换在build/config.js的unitConvert配置项中可自定义比例。2.2 关键 ACSS 文件功能对照表与平台适配逻辑文件名核心功能小程序侧特殊处理H5 侧特殊处理对应 UNIAPP 组件index.acss全局重置与基础变量定义注入import ./common/weixin.css;注入import ./common/h5.css;uni-app的common.scsszsff.acss表单控件输入框、开关、滑块使用wx-input绑定bindinput事件使用input绑定inputuni-input,uni-switchswipers.acss轮播容器强制启用wx-swiper的circular和autoplay属性使用swiper-js库禁用touchMove防止 iOS 滚动冲突uni-swipershop.acss商品列表卡片添加wx:for循环及># 1. 进入项目根目录含 package.json 的位置 cd /path/to/diygwui-project # 2. 修改 ACSS 文件例如调整 tab 选中色 echo component tab-bar { active-color: #FF6B35; } src/styles/tab.acss # 3. 执行编译命令指定目标平台 npm run build -- --platform mp-weixin # 4. 查看生成结果小程序 ls -l dist/dev/mp-weixin/components/tab-bar/ # 输出tab-bar.vue, tab-bar.wxss, tab-bar.json —— 已含新颜色值 # 5. 验证 H5 输出 npm run build -- --platform h5 ls -l dist/build/h5/css/tab-bar.css # 输出.tab-bar__item--active { color: #FF6B35; }注意npm run build默认使用vue.config.js中的platform配置。若需多平台并行编译需在package.json的scripts中添加build:all: npm run build -- --platform mp-weixin npm run build -- --platform h5 npm run build -- --platform app-plus编译过程本质是 ACSS 解析器读取所有*.acss文件构建 AST抽象语法树然后根据--platform参数选择对应的代码生成器Generator。小程序生成器会输出.wxml/.wxss/.js/.json四件套H5 生成器则输出.vue单文件组件其中style scoped内嵌编译后的 CSStemplate中已注入v-for和click事件绑定。3. 导出源码的实操路径从可视化编辑到可部署的 UNIAPP 工程DIYGWUI 的导出能力远超“下载 ZIP 包”它生成的是符合uni-app官方 CLI 规范的完整工程结构可直接npm install npm run dev启动调试或npm run build打包发布。关键在于理解导出选项背后的工程配置逻辑——比如选择“UNIAPP 开发”时系统不仅复制pages/和components/还会自动注入main.js中的Vue.use(uniModules)插件注册、manifest.json中的name和appid字段、以及vue.config.js中针对 H5 的devServer.proxy配置。3.1 导出前必做的三项配置校验在点击“导出源码”按钮前必须完成以下检查否则生成的工程可能无法运行3.1.1 页面路由配置校验pages.json生成依据DIYGWUI 将画布中的每个“页面”节点映射为pages.json中的一条路由记录。例如你在可视化界面创建了“首页”、“商品列表”、“个人中心”三个页面且设置了“首页”为启动页则导出时会自动生成{ pages: [ { path: pages/index/index, style: { navigationBarTitleText: 首页, enablePullDownRefresh: true } }, { path: pages/product/list, style: { navigationBarTitleText: 商品列表, usingComponents: { uni-swiper: /components/uni-swiper/uni-swiper.vue } } } ], subNVue: [], tabBar: { color: #7A7E83, selectedColor: #007AFF, list: [ { pagePath: pages/index/index, text: 首页 } ] } }提示若某页面未设置navigationBarTitleText导出时将默认填充为页面名称如“首页”但若名称含中文或空格需手动进入pages.json修改为合法字符串否则uni-app编译会报错Invalid page path。3.1.2 数据源绑定校验JSON Schema 与 API 接口匹配所有列表、轮播、表单组件都支持绑定“数据源”。DIYGWUI 提供两种方式本地 JSON 文件如mock/product.json或远程 API如https://api.example.com/products。导出时系统会根据绑定类型生成对应代码本地 JSON在static/mock/下创建文件并在组件 JS 中写const data require(/static/mock/product.json)远程 API生成api/product.js内容为export function getProducts() { return uni.request({ url: https://api.example.com/products, method: GET, dataType: json }) }必须确认远程 API 的返回结构与组件期望的字段名一致如轮播图需[{ image: url, title: text }]否则运行时v-for会因undefined报错。3.1.3 平台特有 API 权限配置校验manifest.json与mp-weixin适配导出微信小程序时manifest.json中的mp-weixin字段会自动填充appid和description。但若你的小程序需调用wx.getLocation获取定位必须手动在manifest.json中添加mp-weixin: { appid: wx1234567890abcdef, setting: { urlCheck: false }, permission: { scope.userLocation: { desc: 获取您的位置信息用于推荐附近商品 } } }否则真机调试时会弹出“未声明权限”提示且uni.getLocation()返回errCode: 1001。3.2 导出 UNIAPP 工程后的首次启动与调试导出 ZIP 后解压进入目录执行# 1. 安装依赖注意必须使用 node 14DIYGWUI 生成的 package.json 指定了 uni-app: ^3.2.0 npm install # 2. 启动 H5 调试默认端口 8080 npm run serve:h5 # 3. 启动微信小程序调试需提前安装微信开发者工具 CLI npm run build:mp-weixin # 然后在微信开发者工具中打开 dist/build/mp-weixin 目录 # 4. 查看控制台日志重点观察 # - 是否出现 Failed to resolve component: uni-swiper→ 检查 components/ 是否存在且路径正确 # - 是否出现 Network Error→ 检查 api/ 目录下的请求地址是否可访问 # - 是否出现 Cannot read property length of undefined→ 检查数据绑定是否为空数组常见失败场景及修复现象原因修复方式H5 页面空白控制台报TypeError: Cannot read property push of undefinedrouter/index.js中routes数组未初始化手动在src/router/index.js第 5 行添加const routes []小程序 swiper 不自动播放swipers.acss中autoplay: true未生效检查swipers.acss是否被正确导入在pages/index/index.vue的style中添加import /styles/swipers.acss;表单提交后无响应zsff.acss绑定的submit事件未触发进入components/form/form.vue确认form submithandleSubmit中handleSubmit方法是否存在若不存在则需在methods中补充handleSubmit(e) { e.preventDefault(); uni.showToast({ title: 提交成功 }); }3.3 一键打包为 App 的实操要点App Plus 平台DIYGWUI 支持导出app-plusiOS/Android目标但需额外配置签名证书。导出后执行# 1. 安装 HBuilderX官方推荐 IDE支持真机调试 # 2. 在 HBuilderX 中打开 dist/build/app-plus 目录 # 3. 点击【发行】→【原生App-云打包】 # 4. 上传证书Android keystore 或 iOS p12并填写包名如 com.example.shop # 5. 选择“自定义基座”以启用 NFC、蓝牙等高级 API注意若打包后 App 启动白屏大概率是vue.config.js中configureWebpack的externals配置错误。DIYGWUI 默认将uni相关模块设为 externals但app-plus平台需取消该设置——手动注释掉// configureWebpack: { // externals: { // uni-app: uni, // dcloudio/uni-mp-weixin: uni // } // }4. 深度定制技巧如何复用 DIYGWUI 的 ACSS 体系开发自有组件库DIYGWUI 的真正价值不在于“用它做项目”而在于“把它当框架来扩展”。其 ACSS 编译器开源位于node_modules/diygwui/compiler允许你编写自己的.acss文件并集成进现有工程。例如为电商场景新增一个“阶梯价格”组件只需三步4.1 编写自定义 ACSS 组件step-price.acss在src/styles/下新建文件component step-price { // 基础容器 display: flex; flex-direction: column; gap: 8rpx; // 价格区间项 component item { display: flex; justify-content: space-between; align-items: center; padding: 12rpx 16rpx; background-color: #F9F9F9; border-radius: 4rpx; --active { background-color: #FFF8E1; border-left: 4rpx solid #FFC107; } .quantity { font-weight: bold; color: #333; } .price { color: #E64A19; font-size: 28rpx; } } } // 条件编译H5 需要 hover 效果 if platform h5 { component step-price { .item:hover { background-color: #F5F5F5; transform: scale(1.02); transition: all 0.2s ease; } } }4.2 创建对应 Vue 组件模板step-price.vue在src/components/step-price/step-price.vue中template view classstep-price view v-for(item, index) in priceList :keyindex :class[step-price__item, { step-price__item--active: item.active }] clickonItemClick(item) text classstep-price__quantity{{ item.quantity }}件起/text text classstep-price__price¥{{ item.price }}/text /view /view /template script export default { name: StepPrice, props: { priceList: { type: Array, default: () [] } }, methods: { onItemClick(item) { this.$emit(select, item) } } } /script style langscss // 此处不写样式由 ACSS 编译器注入 /style4.3 在主页面中引用并绑定数据在pages/product/detail.vue中template view classproduct-detail !-- 其他内容 -- step-price :price-listpriceOptions selecthandlePriceSelect / /view /template script import StepPrice from /components/step-price/step-price.vue export default { components: { StepPrice }, data() { return { priceOptions: [ { quantity: 1, price: 99, active: true }, { quantity: 10, price: 89, active: false }, { quantity: 50, price: 79, active: false } ] } }, methods: { handlePriceSelect(item) { console.log(选中阶梯价:, item) uni.showToast({ title: 已选 ${item.quantity} 件单价 ¥${item.price} }) } } } /script此时执行npm run build -- --platform h5编译器会自动将step-price.acss中的样式注入到step-price.vue的style标签内并为 H5 平台添加:hover伪类。整个过程无需手动写 CSS也不用担心平台差异——ACSS 体系已为你兜底。提示若需在小程序中使用step-price组件需在pages.json的对应页面usingComponents中声明usingComponents: { step-price: /components/step-price/step-price.vue }并确保step-price.vue的style标签中langscss已被 ACSS 编译器识别DIYGWUI 会在构建时自动替换为编译后的 CSS。这套机制让团队能沉淀出符合自身业务规范的 UI 组件库所有设计师只需在 DIYGWUI 中拖拽step-price组件、绑定priceList数据源即可生成跨平台可用的代码彻底打破“设计→切图→开发→联调”的协作壁垒。本文还有配套的精品资源点击获取