[]()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会从新对程序进行编译，编译实现后应用微信开发者工具来上传代码至公众平台。
发表回复