[]()1.1DIY 可视化
DIYGW 可视化工具是一个傻瓜式、拖拽式、模块化开发软件工具；一个从想法到原型到源码，一步到位低代码生成源码工具。
所见即所得，拖拽设计，无编程根底的人都能轻松把握。只需一次设计，就能领有微信小程序、支付宝小程序、头条小程序、QQ 小程序、百度小程序、FinClip 小程序、H5、WebApp、UNIAPP 等源码。
丰盛的组件模块，宫格列表、图文菜单、卡片、列表、轮播图、导航栏、按钮、标签、表单、单选、复选、下拉抉择、多层抉择、级联抉择、开关、时间轴、模态框、步骤条、头像、进度条、动静告诉栏、进度条、星级评分等。
丰盛的前后台通信模块，按钮点击事件、自定义办法调用、API 在线调试、数据动静绑定、For 循环数据绑定、IF 判断绑定等
无论有无编程根底，都能在 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 全局设置
全局设置次要是对利用级底部菜单的设置，设置底部菜单默认图标、选中图标、菜单题目、页面链接地址、默认题目色彩及选中题目色彩。如果用户设置后，代码最终会生成 pages.json 下的 tabBar 相干属性。不设置不生成相干底部菜单配置。
[]()2.5 查看代码
点击工具栏区，查看源码，即可查看当前页的代码，用户能够疾速复制当前页的代码进已有的我的项目进行替换或新建页面进行开发。
[]()2.6 导出利用
点击工具栏区，导出源码，输出利用标识，此处咱们抉择导出 uniapp 源码，设置实现后，点击确定，而后即可下载源码。下载的代码会有压缩包的模式下载下来。
[]()2.7 生成利用
2.7.1 环境搭建
下载 HBUilder
HBuilderX 下载地址：https://www.dcloud.io/hbuilde…
HBuilderX 是通用的前端开发工具，但为 uni-app 做了特地强化。
下载后默认不蕴含 uni-app 插件，在运行或发行 uni-app 时，会提醒装置 uni-app 插件，插件下载实现前方可应用。
2.7.2 我的项目搭建
解压导出利用压缩包文件，关上 hbuilder 前端开发工具，点击文件 – 导入 – 从本地目录导入 – 抉择解压进去的目录 – 而后点击抉择目录。
2.7.3H5 运行及发行
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….
下载实现后，装置微信小程序开发者工具。
2.7.4.2 微信小程序调试
点击运行图标 – 微信开发者工具，HBuilder 会主动跟开发者工具建设关系，主动创立利用并用微信开发者工具关上。如果未登录过微信开发者工具，会提醒微信登录，请应用微信扫一扫登录，登录后，从新发行一次。如胜利，微信小程序会主动关上首页面。
2.7.4.3 发行
点击菜单栏 – 发行 – 小程序微信（仅实用于 uni-app），将会弹出一个窗口，窗口里输出小程序 Appid。以 wx 结尾，如果你还没有本人微信小程序，请返回微信公众平台 https://mp.weixin.qq.com/ 申请本人的微信小程序来获取 appid。
点击后 Hbuilder 会从新对程序进行编译，编译实现后应用微信开发者工具来上传代码至公众平台。