admin 玩转DIY可视化打造UniApp小程序
DIYGW可视化工具是一个傻瓜式、拖拽式、模块化开发软件工具；一个从想法到原型到源码，一步到位低代码生成源码工具。
所见即所得，拖拽设计，无编程基础的人都能轻松掌握。只需一次设计，就能拥有微信小程序、支付宝小程序、头条小程序、QQ小程序、百度小程序、FinClip小程序、H5、WebApp、UNIAPP等源码。
丰富的组件模块，宫格列表、图文菜单、卡片、列表、轮播图、导航栏、按钮、标签、表单、单选、复选、下拉选择、多层选择、级联选择、开关、时间轴、模态框、步骤条、头像、进度条、动态通知栏、进度条、星级评分等。
丰富的前后台通信模块，按钮点击事件、自定义方法调用、API在线调试、数据动态绑定、For循环数据绑定、IF判断绑定等
无论有无编程基础，都能在DIYGW.COM中找到自己的乐趣。
官方在线设计网站：www.diygw.com
1.2uni-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全局设置全局设置主要是对应用级底部菜单的设置，设置底部菜单默认图标、选中图标、菜单标题、页面
