玩转 DIY 可视化打造 UniApp 小程序

从想法到原型到源码，一步到位生成源码工具

s

内容提要

本书是一本介绍使用 DIY 可视化软件制作 UniApp 小程序的图书，通

过基础操作和实战案例的讲解，帮助读者深入了解如何制作 Uniapp

小程序。

本书分为三篇：

第 1 篇基础操作，读者通过这一部分内容的学习，就能够掌握软件的

使用方法。

第 2 篇 UniApp 基础知识，带大家掌握 Vue 前端技术，为实际案例作

技术准备。

第 3 篇实战案例，读者可以在这一部分的内容中，学习掌握工具的开

发技巧，以及获得各种实战案例的参考。

本书不但适合零基础的读者由浅至深地学习，而且适合具备一定基础

的读者作为实战项目的参考，也可以作为学校相关课程配套教材，或

互联网公司、高新科技企业等新内训的教程。

目录

第一章 初始 DIY 可视化...................................................................................................................5

1.1. DIY 可视化...........................................................................................................................5

1.2. uni-app 介绍........................................................................................................................5

1.3. 小结.................................................................................................................................... 6

第二章 创建与发布.......................................................................................................................... 7

2.1. 设计器介绍........................................................................................................................ 7

2.2. 创建应用.......................................................................................................................... 11

2.3. 创建页面.......................................................................................................................... 11

2.4. 全局设置.......................................................................................................................... 15

2.5. 查看代码.......................................................................................................................... 16

2.6. 导出应用.......................................................................................................................... 16

2.7. 生成应用.......................................................................................................................... 17

第三章 使用组件............................................................................................................................ 27

3.1. 添加组件至设计器.......................................................................................................... 27

3.2. 修改组件图层名称.......................................................................................................... 27

3.3. 修改组件字段标识.......................................................................................................... 28

3.4. 修改组件栅格大小.......................................................................................................... 28

3.5. 修改图层布局.................................................................................................................. 29

3.6. 修改组件个数.................................................................................................................. 30

3.7. 修改组件样式.................................................................................................................. 31

第四章 组件入门............................................................................................................................ 39

4.1. 基础组件.......................................................................................................................... 39

4.2. 容器组件.......................................................................................................................... 53

4.3. 表单组件.......................................................................................................................... 65

4.4. 图表组件.......................................................................................................................... 69

第五章 UniApp 进阶....................................................................................................................... 70

5.1. 配置项.............................................................................................................................. 70

5.2. 生命周期.......................................................................................................................... 70

5.3. 页面路由.......................................................................................................................... 70

5.4. JS 语法............................................................................................................................... 70

5.5. CSS 语法.............................................................................................................................70

5.6. vue 语法............................................................................................................................ 70

第六章 高级进阶............................................................................................................................ 70

6.1. UNIAPP ...............................................................................................................................70

6.2. API 请求.............................................................................................................................70

6.3. 事件交互.......................................................................................................................... 70

6.4. 属性绑定.......................................................................................................................... 70

6.5. 事件绑定.......................................................................................................................... 70

第七章 页面案例............................................................................................................................ 71

7.1. 用户登录页...................................................................................................................... 71

7.2. 会员中心首页.................................................................................................................. 71

7.3. 充值中心首页.................................................................................................................. 71

7.4. 办公系统首页.................................................................................................................. 71

7.5. 基金理财首页.................................................................................................................. 71

第八章 项目演练-商城小程序 APP ..............................................................................................71

8.1. 首页框架搭建.................................................................................................................. 71

8.2. 商品列表及详情.............................................................................................................. 71

8.3. 会员登录.......................................................................................................................... 71

8.4. 购物车.............................................................................................................................. 71

8.5. 用户订单.......................................................................................................................... 71

8.6. 个人中心.......................................................................................................................... 71

8.7. 发布上线.......................................................................................................................... 71

第一章 初始 DIY 可视化

1.1.DIY 可视化

DIYGW 可视化工具是一个傻瓜式、拖拽式、模块化开发软件工具；

一个从想法到原型到源码，一步到位低代码生成源码工具。

所见即所得，拖拽设计，无编程基础的人都能轻松掌握。只需一

次设计，就能拥有微信小程序、支付宝小程序、头条小程序、QQ 小

程序、百度小程序、FinClip 小程序、H5、WebApp、UNIAPP 等源码。

丰富的组件模块，宫格列表、图文菜单、卡片、列表、轮播图、导航

栏、按钮、标签、表单、单选、复选、下拉选择、多层选择、级联选

择、开关、时间轴、模态框、步骤条、头像、进度条、动态通知栏、

进度条、星级评分等。

丰富的前后台通信模块，按钮点击事件、自定义方法调用、API

在线调试、数据动态绑定、For 循环数据绑定、IF 判断绑定等

无论有无编程基础，都能在 DIYGW.COM 中找到自己的乐趣。

官方在线设计网站：https://www.diygw.com

1.2.uni-app 介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编

写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小

程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用

等多个平台。

DCloud 公司拥有 900 万开发者、数百万应用、12 亿手机端月活用

户、数千款 uni-app 插件、70+微信/qq 群，腾讯课堂官方为 uni-app

录制培训课程，开发者可以放心选择。

uni-app 在手，做啥都不愁。即使不跨端，uni-app 也是更好的小

程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。不

管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、

不需要更改开发习惯。

1.3.小结

不管你是产品经理、需求原型设计师、UI 设计师、美工、前端页

面工程师、前端开发人员、计算机老师还是学生，DIY 官网可视化设

计器都可以帮助你轻松创建专业的、独一无二的应用。

高效的设计快速生成源码，让你都能轻松做出私有化部署的应用

APP。

帮助业务专家和开发人员就应用需求和界面进行协作做出更灵活

的更高效的客户体验应用程序，加快上市速度并加快应用交付速度，

同时共同构建满足业务对功能和可用性的所有需求的应用，降低了成

本，最大程度地减少了昂贵的资源。

第二章 创建与发布

2.1.设计器介绍

设计器能力类似于 sketch，figma 的设计工具，但 DIY 可视化的优

势是可一键将设计原型直接变成源码。

2.1.1. 快捷功能区

软件的顶部把一些常用功能的功能放在顶部、及右边操作按钮区，

鼠标移动至对应的图标会有相关功能提示，主要顶部工具栏：可撤销、

重置、在线预览、真机预览、导出源码、保存、清空当前页代码；右

边工具栏：上下移动组件、复制组件、保存组件库、锁定图层、API

及自定义方法、组件图层面板。

顶部：工具栏，可撤销、重置、在线预览、真机预览、导出源码、

保存、清空当前页代码；应用级设置:全局变量、拦截器、第三方字

体图标。

2.1.2. 页面管理

页面管理位于软件的左上角位置，它的作用是管理整个应用的所

有页面，也能够进行页面的添加、删除、命名、拖拉页面排序等操作。

当我们单击页面名称的时候，这个页面会在主编辑区打开，新建

页面默认只有标题，设计内容区是空白的，页面的内容是我们自己来

设计的。

2.1.3. 组件属性与样式

组件的属性并不是每个组件一样，它们基础属性相同，也有自身

属性、通过属性设置来达到组件不同的效果、组件事件设置集成在属

性设置里。

组件样式全部相同，按组件的整体性来设置，不同的组件样式可

以直接通过复制样式的方式支持拷贝至另一组件。

2.1.4. 应用快捷键

系统常用的快捷键如下：

快速复制：CTRL+C

跨页面复制：ALT+C

跨页面粘贴：CTRL+V

上移一层：↑

下移一层：↓

置顶：CTRL+ ↑

置底：CTRL+ ↓

重做：CTRL + Y

撤回：CTRL + Z

组件删除：CTRL+D 或 DEL

复制样式：CTRL + F

粘贴样式：CTRL + SHIFT + F

清除样式：CTRL + SHIFT + L

保存：CTRL + S

点击组件右键，也会提示相应的快捷键

2.2.创建应用

会员中心、点击新建新版 UNIAPP、微信、支付宝、头条、百度等

小程序、H5 应用，创建完成后，点击编辑应用，进入设计器

2.3.创建页面

用户在左侧设计器，页面管理找到新增页面图标，点击后弹出输

入页面标识、页面标题即可创建新的页面。

其中页面标识相当我们生成代码的路径，比如:index/user/edit,表

示 index/user 是目录级，最后的 edit 是页面标识，最好的一个标识将

会生成一个.vue 后缀名的文件。页面路径及页面名称系统会在导出源

码里自动生成在 pages.json 配置文件里。

2.3.1. 首页设置

首页面对应所有页面的第一个页面，如果在设计的过程中，即可

拖动页面进行页面排序。

2.3.2. 页面属性设置

属性管理里，可以进行设置页面导航背景、导航字体颜色，页面

背景图片颜色、整体页面字体大小、页面字体颜色等。

2.3.3. 基本组件设计页面

点击左侧基本组件，里面包含了常用的基础组件、容器组件、表

单组件、图表组件，只需要手动选中的组件进设计区，然后在属性里

修改组件对应的属性设计你想要的效果。

比如我拖动一个文本内容组件，选择组件按住鼠标左键拖进设计

区，右边属性可以对组件属性、组件样式进行针对性设置，所见即所

得的设置。

2.3.4. 组件模板设计页面

系统内置了一系列常用组件模板，觉得哪个模板适合自己，只需

要在上面点击一下，整个组件模板将在设计区增加此模板，可以拖动

整个组件模板进行顺序调整，同样可以通过右边属性可以对组件属性、

组件样式进行针对性设置。

2.3.5. 页面模板设计页面

页面模板设计页面相当页面级模板复用，系统内置了一系列常用

页面模板，觉得哪个模板适合自己，只需要在上面点击一下，整个页

面将替换成该页面模板。

2.4.全局设置

全局设置主要是对应用级底部菜单的设置，设置底部菜单默认图

标、选中图标、菜单标题、页面链接地址、默认标题颜色及选中标题

颜色。如果用户设置后，代码最终会生成 pages.json 下的 tabBar 相关

属性。不设置不生成相关底部菜单配置。

2.5.查看代码

点击工具栏区，查看源码，即可查看当前页的代码，用户可以快

速复制当前页的代码进已有的项目进行替换或新建页面进行开发。

2.6.导出应用

点击工具栏区，导出源码，输入应用标识，此处我们选择导出

uniapp 源码，设置完成后，点击确定，然后即可下载源码。下载的代

码会有压缩包的形式下载下来。

2.7.生成应用

2.7.1. 环境搭建

下载 HBUilder

HBuilderX 下载地址：https://www.dcloud.io/hbuilderx.html

HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。

下载后默认不包含 uni-app 插件，在运行或发行 uni-app 时，会提

示安装 uni-app 插件，插件下载完成后方可使用。

2.7.2. 项目搭建

解压导出应用压缩包文件，打开 hbuilder 前端开发工具，点击文

件--导入--从本地目录导入--选择解压出来的目录--然后点击选择目录。

2.7.3. H5 运行及发行

2.7.3.1. 本地应用及调试

在 HBuilder 中，有顶部菜单、toolbar 运行按钮、快捷键三种运行

入口。

1．顶部菜单运行

2．toolbar 工具栏上的运行按钮

3．快捷键应行

运行快捷键是【Ctrl+r】

2.7.3.2. 内置浏览器应行

打开 uni-app 项目的页面，点 HBuilderX 右上角的预览按钮，可以

在内置浏览器里打开 Web 运行结果，也可以点右键打开控制台调试。

修改保存工程源码时，右边的浏览器内容可以自动刷新。

当然我们也可以回到 DIY 可视化进行对应的页面设计，设计完成

后，点击查看源码，然后把源码复制过来替换即可。

2.7.3.3. 发行

 发行准备

点击 mainfest.json 里基础配置，生成 uni-app 应用标识。获取标识

前，需要先绑定 dcloud 用户账号。

 H5 发行

点击菜单栏--发行--网站 PC Web 或手机 H5（适用于 uni-app）。

点击发行，如果发行准备没配置，发行时调试窗口会提示，发行成功

后将在根目录生成 unpackage\\dist\\build\\h5 文件夹，此文件对应的即

为发行版本。如果你已有自己的网站，只需要把此目录下的所有文件

拷贝进自己的服务器里，再通过自己域名来访问即可。

2.7.4. 微信小程序运行及发行

2.7.4.1. 下载微信开发者工具

微信开发者工具下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/downl

oad.html

下载完成后，安装微信小程序开发者工具。

2.7.4.2. 微信小程序调试

点击运行图标--微信开发者工具，HBuilder 会自动跟开发者工具建

立关系，自动创建应用并用微信开发者工具打开。如果未登录过微信

开发者工具，会提示微信登录，请使用微信扫一扫登录，登录后，重

新发行一次。如成功，微信小程序会自动打开首页面。

2.7.4.3. 发行

点击菜单栏--发行--小程序微信（仅适用于 uni-app），将会弹出一个

窗口，窗口里输入小程序 Appid。以 wx 开头，如果你还没有自己微

信小程序，请前往微信公众平台 https://mp.weixin.qq.com/申请自己

的微信小程序来获取 appid。

点击后 Hbuilder 会重新对程序进行编译，编译完成后使用微信开发者

工具来上传代码至公众平台。

第三章 使用组件

3.1.添加组件至设计器

在左侧基本组件库选择要使用的组件，按住左键不放，拖动到设计器

适合的位置上松开。

3.2.修改组件图层名称

修改组件图层名称，方便快速定位组件位置。找到图层面板按钮，点

击显示图层面板，图层面板将会显示当前所有的组件。

3.3.修改组件字段标识

字体标识是用来区分组件的标识，尽量保持维一性，在不改变的组件

标识的情况下，每拖动一次相同组件，组件标识会自动增加 1，组件

标识在实际使用中会根据组件特性来起效。

比如有两个字段用户名及密码，那么组件字段标识 username、

password。

3.4.修改组件栅格大小

通过基础的 24 分栏，迅速简便地创建布局。快速拖动栅格大小，改

变布局，方便快速页面排版。

基础排版都可以直接采用栅格大小来布局，复杂的布局将会借助容器

组件里 FLEX 组件来达到复杂的布局。

3.5.修改图层布局

 设计区拖动

在设计区找到想要变更位置组件，按住鼠标左键，即可快速变换位置。

 图层区拖动

重点推荐图层区拖动，特别在复杂的布局下，通过移动组件图层的顺

序来达到变更布局，达到比较精细化拖动效果。

3.6.修改组件个数

宫格组件、图文菜单、图片轮播、组件轮播、选项卡、折叠面板等组

件默认数组，支持增加、修改、删除、改变顺序。

以宫格组件为例，组件默认个数为 6，移动组件对应内容区，点击对

应功能按钮图标动态改变组件。

3.7.修改组件样式

3.7.1. 基础设置

设置字体颜色、大小、是否粗体、是否斜体、文本划线等。

3.7.2. 背景设置

背景内置了背景颜色库、也支持自定义背景图片、渐变背景等，其中

背景图片设置背景图片位置、图片显示方式、背景重复。

默认第一个背景颜色有为系统内置背景库。系统已经内置了常用一些

背景库，可以直接使用。

如果对内置的背景库不满意，用户根据根据的要求来设计背景。

 背景图片

在线自定义背景图片或直接输入图片地址。下图使用自定义背景图片

及填充方式，其中填充方式在实际效果中因为图片不同会起到不同效

果。

 渐变背景

在线自定义渐变背景或直接输入渐变样式

 背景颜色

自定义背景颜色，支持透明背景颜色

3.7.3. 外边距设置

通过使用单独的外边距属性，可以对上、右、下、左的外边距进行设

置。即: margin-top、margin-right、 margin-bottom、 margin-left。

设置外边距开关：只有开关启用，才起效。

 负值设置

外边距支持负值设置，在一些特殊场景里，使用负值来设计能达到更

好的效果。

 组件交叉显示

 上方组件圆角效果显示

3.7.4. 内边距设置

通过使用单独的内边距属性，可以对上、右、下、左的内边距进行设

置。即: padding-top、padding-right、 padding-bottom、 padding-left。

设置内边距开关：只有开关启用，才起效。

内边距设置右内边距在默认情况下，比如文本组件内边距内容又比较

少的情况下效果不明显，是因为默认文本组件占比是 100%，需要把

组件栅格大小至 0，效果比较好。比如下图实际应用效果。

3.7.5. 圆角设置

通过使用单独的圆角属性，可以对上左、上右、下左、下右的四个圆

角进行 设置。即: border-top-left-radius、 border-top-right-radius、

border-bottom-left-radius、border-bottom-right-radius。

设置圆角开关：只有开关启用，才起效。

在线实现设置不同大小，实时预览达到自己想要最佳圆角效果。

 大小相同圆角

 下右圆角为 0

 不同大小圆角

3.7.6. 边框设置

围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定

义它们的样式,宽度颜色等。支持全边框、左边框、右边框、上边框、

下 边 框 。 即 : border 、 border-left 、 border-right 、 border-top 、

border-bottom。

 特殊边框设置

支持不同位置不同颜色、边框样式、颜色，只需要鼠标多在边框设置

区上新增图标上，点击新增，即可设置。

3.7.7. 阴影设置

可设置中阴影的水平偏移、垂直偏移、模糊距离、阴影颜色、支持内

外阴影。支持多个阴影效果叠加在一起。

 多阴影叠加效果

移动至阴影设置上方，点击新增阴影，增加阴影，通过下方的属性设

置，多个阴影效果叠加在一起。

第四章 组件入门

4.1.基础组件

4.1.1. 文本组件

 基本文本组件

改变文本内容：输入 DIYGW 可视化设计器

选择字体颜色、文体大小等。

 富文本内容组件

比如用户使用富文本编辑器编辑文本后，组件代码会自动自动识

别为富文本内容组件。

 模板内容

基本文本内容在此处有个比较特殊的用法，不管用户输文本内容

是什么格式的数据，只要选择模板输出，生成源码会自动把此模板代

码输出。

4.1.2. 字体图标

系统提供了默认的常用的字体图标库，拖动字体图标库进设计区。

 更换图标

属性设置图标、点击图标可以选择图标进行更换。

 设置图标大小

方便在不同的界面布局下图标字体适配界面。

 更换图标颜色

设置字体图标颜色，只需要组件样式里，设置字体颜色即可更换颜色。

 字体图标徽标

支持快捷设置徽标文本，背景样式、相对位置

4.1.3. 头像图标

 图标类型

头像图标支持图片头像、字体图标头像、文字图标头像。

 对齐方式设置

多个图标一起时，支持不同的布局显示

 头像组叠加

头像叠加支持从左向右叠加及从右向左叠加

4.1.4. 图片组件

图片组件是小程序制作过程中使用非常频繁的组件

图片组件默认为自适应显示，也可以关闭自适应，控制图片所显示的

宽度及高度。图片支持不同模式设置，同样的一张图片，在不同的模

式下显示出不同效果。

 图片地址

点击图片地址进入图片管理器，上传自己的图片，选择图片源，即可

替换图片。

 图片模式

图片模式，参照下方模式进行设置

scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image

元素

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是

说，可以完整地将图片显示出来。

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也

就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截

取。

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

top 裁剪模式，不缩放图片，只显示图片的顶部区域

bottom 裁剪模式，不缩放图片，只显示图片的底部区域

center 裁剪模式，不缩放图片，只显示图片的中间区域

left 裁剪模式，不缩放图片，只显示图片的左边区域

right 裁剪模式，不缩放图片，只显示图片的右边区域

top left 裁剪模式，不缩放图片，只显示图片的左上边区域

top right 裁剪模式，不缩放图片，只显示图片的右上边区域

bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域

bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

4.1.5. 宫格组件

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目

设置徽标，也可以扩展为左右滑动形式。

 宫格类型

宫格组件包括了一宫格、二宫格、三宫格的、四宫格、五宫格、水平

自由宫格。水平自由宫格用于宫格个数比较多，通过水平滑动显示其

他隐藏宫格按钮。

 卡片类型

整体宫格或子宫格

 徽标类型

徽标类型主要用于明显提示作用，主要设置徽标文本、图标、圆点，

自定义徽标背景颜色。

4.1.6. 图文菜单

图文菜单主要新闻列表、后台功能按钮操作。通过在线提供的属性达

到不同的效果。

主要属性

 图片位置

图片位置包括了上边、下边、左边、右边。

 菜单占比

默认 100%、50%、33.33%、25%、自由占比。不同占比及图片位置显

示将会显示不同布局。

小图文效果

启用小图文开关，图文将会显示成一行显示。

4.1.7. 图片轮播

基本属性包括自动播放、轮播高度、延迟切换时间等

主要属性

 滚动方向

默认水平方向，支持垂直方向

 指示按钮类型

默认圆点，支持方形、圆角方法

 指示按钮位置

默认下中，支持左上、右上、上中间、左下、右下

4.1.8. 通知栏

用于滚动通告场景，支持水平滚动新闻及垂直切换新闻。允许设置背

景颜色、字体颜色、图标。