前言
前段国庆假期时间,去了清远玩顺便过了一把diy手工陶瓷的瘾,回来后和几位技术吹水起这件事,结果技术A笑嘻嘻的对我说:diy手工算什么,diy小程序、H5你见过吗?
diy小程序?
我第一时间想到的是低代码平台,事实上A聊的也是低代码平台,只不过在他的一阵吹夸下,便激起了我的好奇心:这玩意真有这么神?
神不神,咱们上手一遍不就好了
DIY官网
DIY官网可视化工具,从官网的信息来看,它能做的事情确实挺多的,但这玩意,又不是比谁更能者多劳,而是看DIY的自由度
,下面咱们就根据我的设计图来DIY一款小程序吧
DIY小程序
前期工作
既然要DIY小程序,咱们就找个复杂又常见的页面来DIY,于是到DCloud插件市场中找了热度较高的商城小程序来进行还原DIY
创建DIY应用
在首页中找到立即定制
按钮(需注册登陆)进入我的应用页面,然后新建应用命名Demo
找到刚创建的应该,点击编辑应用,稍等资源加载完毕后便显示一下页面
标题
对比原型图,我们找到需要修改的部分:
- 标题:商城
- 导航栏背景色:白色
- 导航栏字体色:黑色
修改
修改导航栏背景色与字体色
效果图
搜索框
在左侧菜单栏中找到基础组件
—>搜索组件
,点击该组件长按拖拽到应用设计页面
对比原型图,我们找到需要修改的部分:
- 提示文字:搜索你想要的商品~
- 输入框背景:#f4f4f4
- 后缀类型:无
- 外边距:5
修改
效果图
轮播图
在左侧菜单栏中找到基础组件
—>图片轮播
,点击该组件长按拖拽到应用设计页面
对比原型图,我们找到需要修改的部分:
- 高:200
- 显示标题:关闭
- 轮播图片
修改
效果图
九宫格
在左侧菜单栏中找到基础组件
—>宫格组件
,点击该组件长按拖拽到应用设计页面
对比原型图,我们找到需要修改的部分:
- 宫格类型:五宫格
- 内容:①替换图标 ②删除菜单六
- 复制一次宫格
修改
效果图
选项卡
在左侧菜单栏中找到基础组件
—>容器组件
—>选项卡
,点击该组件长按拖拽到应用设计页面
对比原型图,我们找到需要修改的部分:
- 菜单文本
- 选中字体颜色
修改
效果图
商品
添加自由面板到tab
修改高度
添加商品组件
在组件模板
中找到商品模板添加到自由面板中
此时的组件会跑的自由面板的下方,需要手动将商品组件拖到自由面板的上方
此时需要拉伸商品组件到适配
按之前的套路,换下图片,修改金额与文字描述
添加底部菜单
跟前面一样,替换文字和图片
最终效果
总结
不足
整体DIY下来,没还原的部分如下:
- 搜索框的提示字体无法居中显示
- 宫格组件的图片大小无法设置
- tab栏选中时,文字是黑色,下划线部分为粉色,而设计中两者颜色是捆绑一起的
除了以上这些细节,几乎完美还原了原型图,而我用到这款DIY的功能却不足它的10%
优势
- 极大的提高了开发效率;
- 傻瓜式拖拽,新人也能上手,但还是需要一些开发经验,例如布局方面需要懂得一些
Flex
布局的经验; - 自由度高,每个组件的属性都十分多,并且可结合样式来达到原型的效果;组件丰富,除了有常见的基础组件外,还有容器组件、表单组件、
uView
组件和uCharts图表
组件,基本市面能看到的组件都有,强的有些离谱; - 丰富的现成模板,这应该是作者自己写的一些常见UI模板,例如我们在实现商品列表时,就用到了现成的商品模板。除了这些组件模板外,还有完整的页面模板,这简直想的太周到了;
- 支持众多平台导出源码
在DIY这款小程序时,我也是第一次上手这款设计器,在熟悉这款设计器后,我第二次上手时,用的总时长不足十分钟
文章来源:https://www.toymoban.com/news/detail-486926.html
虽然这款DIY设计器很好用,但目前并不免费对外开放,毕竟作者花费了这么多心血,不过想想省去的时间和工作,还是价有所值的,所以大家对比下平时的开发速度,自行取舍与评判吧文章来源地址https://www.toymoban.com/news/detail-486926.html
到了这里,关于DIY一款小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!