DIY可视化UniApp可视化入门教程

简介: DIY可视化UniApp可视化入门教程

会员中心、点击新建新版UNIAPP、微信、支付宝、头条、百度等小程序、H5应用,创建完成后,点击编辑应用,进入设计器。

创建应用


创建页面

用户在左侧设计器,页面管理找到新增页面图标,点击后弹出输入页面标识、页面标题即可创建新的页面。

 

其中页面标识相当我们生成代码的路径,比如:index/user/edit,表示index/user是目录级,最后的edit是页面标识,最好的一个标识将会生成一个.vue后缀名的文件。


页面路径及页面名称系统会在导出源码里自动生成在pages.json配置文件里。


客户端点击保存源码至本地,会快速保存源码至本地。无需要全部导出源码。

创建分组分包

DIY可视化支持uniapp分包项目管理,解决编译微信小程序超2M时,需要分包来发布页面。


首页设置

首页面对应所有页面的第一个页面,如果在设计的过程中,即可拖动页面进行页面排序。

页面属性设置

属性管理里,可以进行设置页面导航背景、导航字体颜色,页面背景图片颜色、整体页面字体大小、页面字体颜色、是否自定义标题等。


全局设置

全局设置主要是对应用级底部菜单的设置,设置底部菜单默认图标、选中图标、菜单标题、页面链接地址、默认标题颜色及选中标题颜色。如果用户设置后,代码最终会生成pages.json下的tabBar相关属性。不设置不生成相关底部菜单配置。

导出源码

点击工具栏区,导出源码,输入应用标识,此处我们选择导出uview uniapp源码,设置完成后,点击确定,然后即可下载源码。下载的代码会有压缩包的形式下载下来。


查看代码

点击工具栏区,查看源码,即可查看当前页的代码,用户可以快速复制当前页的代码进已有的项目进行替换或新建页面进行开发。

保存源码至本地

保存源码至本地是非常好用的功能,可以快速操作本地文件能力,保存源码至本地,免去复制源码。

目录
相关文章
|
1月前
|
数据可视化 API
低代码可视化工具-uniapp页面跳转传参-代码生成器
低代码可视化工具-uniapp页面跳转传参-代码生成器
67 2
|
17天前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
26 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
1月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
22 1
|
1月前
|
数据可视化 JavaScript 前端开发
低代码可视化Uniapp点击事件-代码生成器
低代码可视化Uniapp点击事件-代码生成器
50 0
低代码可视化Uniapp点击事件-代码生成器
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
37 2
|
1月前
|
移动开发 数据可视化 小程序
高颜值可视化设计UNIAPP源码生成器
高颜值可视化设计UNIAPP源码生成器
33 1
|
1月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
25 0
|
1月前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
33 0
|
1月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
43 0
|
1月前
|
移动开发 数据可视化 小程序
低代码可视化-UniApp二维码可视化-代码生成器
低代码可视化-UniApp二维码可视化-代码生成器
34 0

热门文章

最新文章