[]()1.1DIY可视化DIYGW可视化工具是一款傻瓜式、拖拽式、模块化的开发软件工具；一种从构思到原型再到源代码的低代码生成源代码一步工具。所见即所得，拖拽式设计，没有编程基础的人也能轻松掌握。只需一个设计，即可拥有微信小程序、支付宝小程序、今日头条小程序、QQ小程序、百度小程序、FinClip小程序、H5、WebApp、UNIAPP等丰富的组件模块，网格列表、图形菜单、卡片、列表、轮播、导航栏、按钮、标签、表单、单选、复选、下拉选择、多层选择、层叠选择、开关、时间轴、模态框、步骤栏、头像、进度条、动态通知bar、进度条、星级等丰富的前后端通讯模块，按钮点击事件，自定义方法调用，API在线调试，数据动态绑定，For循环数据绑定，IF判断绑定等都可以在DIYGW.COM中发现无论编程基础如何自己的乐趣。[]()1.2uni-app简介**uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码，可以发布到iOS、Android、Web（响应式）、各种小程序（微信/支付宝/百度/今日头条/飞书/QQ/快手/钉钉/淘宝）、快应用等平台。DCloud拥有900万开发者，百万APP，12亿移动月活，上千款uni-app插件，70+微信/qq群，腾讯课堂官方录制uni-app培训课程，开发者可以放心选择。uni-app在手，无忧无虑。即使不是跨终端，uni-app也是一个比较好的小程序开发框架，一个比较好的App跨平台框架，一个比较方便的H5开发框架。无论领导安排什么样的项目，你都可以在不改变开发思路，不改变开发习惯的情况下快速交付。[]()1.3总结无论你是产品经理、需求原型设计师、UI设计师、美术师、前端页面工程师、前端开发人员、计算机教师还是学生，DIY官网视觉设计师都能帮你轻松打造专业,独特的应用。高效设计，快速生成源码，让您轻松制作私有化部署应用。帮助业务专家和开发人员在应用程序需求和接口方面进行协作，以制作更灵活和高效的客户体验应用程序，加快上市时间和加速应用程序交付，同时共同构建满足所有业务需求的功能和可用性的应用程序，降低成本和成本资源被最小化。[]()第二章**创建与发布[]()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创建页面。在左侧的设计器中，用户可以在页面管理中找到新的页面图标。点击后弹出，输入页面ID和页面标题，创建新页面。pageID相当于我们生成代码的路径，比如：index/user/edit，表示index/user是一个目录级别，最后一个edit是一个pageID。最好的ID会生成一个.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导出应用点击工具栏区域，导出源代码，输入应用ID。这里我们选择导出uniapp源码。设置完成后，点击确定下载源码。下载的代码会以压缩包的形式下载。[]()2.7生成应用程序2.7.1环境搭建下载HBUilderHBuilderX下载地址：https://www.dcloud.io/hbuilde...HBuilderX是一款通用的前端开发工具，但是针对uni-应用程序。下载后默认不包含uni-app插件。运行或释放uni-app时，会提示安装uni-app插件。插件需要下载完成后才能使用。2.7.2项目构建解压导出应用压缩包文件，打开hbuilder前端开发工具，点击文件--导入--从本地目录导入--选择解压目录--然后点击选择目录。2.7.3H5运行与发布2.7.3.1本地应用与调试HBuilder中有三种运行入口：顶部菜单、工具栏运行按钮、快捷键。1.顶部菜单操作2.toolbar工具栏上的运行按钮3.运行的快捷键是【Ctrl+r】2.7.3.2内置浏览器要打开uni-app项目的页面，点击预览按钮HBuilderX右上角可以在内置浏览器中打开Web运行结果，或者右键打开控制台调试。修改并保存项目源码时，右侧浏览器的内容可以自动刷新。当然我们也可以回过头来DIY可视化来设计相应的页面。设计完成后，点击查看源码，然后复制源码替换即可。2.7.3.3发布准备点击mainfest.json中的基础配置，生成uni-app应用logo。在获取ID之前，需要先绑定dcloud用户账号。H5发布点击菜单栏--发布--网站PCWeb或移动端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会重新编译程序。编译完成后，使用微信开发者工具将代码上传至公众平台。
