DIY一款小程序

这篇具有很好参考价值的文章主要介绍了DIY一款小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

前段国庆假期时间,去了清远玩顺便过了一把diy手工陶瓷的瘾,回来后和几位技术吹水起这件事,结果技术A笑嘻嘻的对我说:diy手工算什么,diy小程序、H5你见过吗?

diy小程序?我第一时间想到的是低代码平台,事实上A聊的也是低代码平台,只不过在他的一阵吹夸下,便激起了我的好奇心:这玩意真有这么神?

神不神,咱们上手一遍不就好了

DIY官网

DIY官网可视化工具,从官网的信息来看,它能做的事情确实挺多的,但这玩意,又不是比谁更能者多劳,而是看DIY的自由度,下面咱们就根据我的设计图来DIY一款小程序吧

DIY小程序

前期工作

既然要DIY小程序,咱们就找个复杂又常见的页面来DIY,于是到DCloud插件市场中找了热度较高的商城小程序来进行还原DIY
DIY一款小程序

创建DIY应用

在首页中找到立即定制按钮(需注册登陆)进入我的应用页面,然后新建应用命名Demo
DIY一款小程序
找到刚创建的应该,点击编辑应用,稍等资源加载完毕后便显示一下页面
DIY一款小程序

标题

对比原型图,我们找到需要修改的部分:

  • 标题:商城
  • 导航栏背景色:白色
  • 导航栏字体色:黑色

修改

DIY一款小程序
DIY一款小程序

修改导航栏背景色与字体色

DIY一款小程序

效果图

DIY一款小程序

搜索框

在左侧菜单栏中找到基础组件—>搜索组件,点击该组件长按拖拽到应用设计页面
DIY一款小程序
对比原型图,我们找到需要修改的部分:

  • 提示文字:搜索你想要的商品~
  • 输入框背景:#f4f4f4
  • 后缀类型:无
  • 外边距:5

修改

DIY一款小程序
DIY一款小程序

效果图

DIY一款小程序

轮播图

在左侧菜单栏中找到基础组件—>图片轮播,点击该组件长按拖拽到应用设计页面

DIY一款小程序
对比原型图,我们找到需要修改的部分:

  • 高:200
  • 显示标题:关闭
  • 轮播图片

修改

DIY一款小程序
DIY一款小程序
DIY一款小程序

效果图

DIY一款小程序

九宫格

在左侧菜单栏中找到基础组件—>宫格组件,点击该组件长按拖拽到应用设计页面
DIY一款小程序

对比原型图,我们找到需要修改的部分:

  • 宫格类型:五宫格
  • 内容:①替换图标 ②删除菜单六
  • 复制一次宫格

修改

DIY一款小程序
DIY一款小程序

DIY一款小程序

效果图

DIY一款小程序

选项卡

在左侧菜单栏中找到基础组件—>容器组件—>选项卡,点击该组件长按拖拽到应用设计页面
DIY一款小程序
对比原型图,我们找到需要修改的部分:

  • 菜单文本
  • 选中字体颜色

修改

DIY一款小程序
DIY一款小程序

效果图

DIY一款小程序

商品

添加自由面板到tab

DIY一款小程序
修改高度
DIY一款小程序

添加商品组件

组件模板中找到商品模板添加到自由面板中

此时的组件会跑的自由面板的下方,需要手动将商品组件拖到自由面板的上方
DIY一款小程序
此时需要拉伸商品组件到适配
DIY一款小程序
按之前的套路,换下图片,修改金额与文字描述
DIY一款小程序

添加底部菜单

DIY一款小程序
跟前面一样,替换文字和图片
DIY一款小程序

最终效果

DIY一款小程序

总结

不足

整体DIY下来,没还原的部分如下:

  • 搜索框的提示字体无法居中显示
  • 宫格组件的图片大小无法设置
  • tab栏选中时,文字是黑色,下划线部分为粉色,而设计中两者颜色是捆绑一起的

除了以上这些细节,几乎完美还原了原型图,而我用到这款DIY的功能却不足它的10%

优势

  • 极大的提高了开发效率;
  • 傻瓜式拖拽,新人也能上手,但还是需要一些开发经验,例如布局方面需要懂得一些Flex布局的经验;
  • 自由度高,每个组件的属性都十分多,并且可结合样式来达到原型的效果;组件丰富,除了有常见的基础组件外,还有容器组件、表单组件、uView组件和uCharts图表组件,基本市面能看到的组件都有,强的有些离谱;
  • 丰富的现成模板,这应该是作者自己写的一些常见UI模板,例如我们在实现商品列表时,就用到了现成的商品模板。除了这些组件模板外,还有完整的页面模板,这简直想的太周到了;
  • 支持众多平台导出源码

在DIY这款小程序时,我也是第一次上手这款设计器,在熟悉这款设计器后,我第二次上手时,用的总时长不足十分钟
DIY一款小程序

DIY一款小程序

虽然这款DIY设计器很好用,但目前并不免费对外开放,毕竟作者花费了这么多心血,不过想想省去的时间和工作,还是价有所值的,所以大家对比下平时的开发速度,自行取舍与评判吧文章来源地址https://www.toymoban.com/news/detail-486926.html

到了这里,关于DIY一款小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大佬,一款小而美的Application组件,了解一下

    Android开发过程中,Application类的角色不容忽视。它不仅是程序启动的入口,同时也代表着整个应用程序的生命周期。在Application中,我们通常执行以下操作: 初始化各种第三方库 注册ActivityLifecycleCallbacks以监控应用的前后台状态 提供全局的Application实例以便在后续代码中使用

    2024年02月13日
    浏览(39)
  • 辅助测试和研发人员的一款小插件【数据安全】

    数据,一直在思考如何让数据更安全的流转和服务于客户,围绕这样的想法,我们做过许多方面的扩展。我们落地了服务端的数据切片支持场景化的设计,实现了基于JDBC协议对SQL的拦截与切片,实现了在应用层的全链路数据库审计方案和实现,实现了WEB端明暗水印和文档水印

    2024年02月06日
    浏览(45)
  • 电脑卡顿分享一款小工具MemReduct让电脑起飞不卡顿

    手机技巧 | 电脑软件  | 电视软件  |实用干货 | 你是否经常遇到电脑运行缓慢,内存占用过高,甚至出现死机或蓝屏的情况?你是否想要优化你的电脑性能,提高运行速度,节省电池寿命?如果你的答案是肯定的,那么你一定要试试mem reduct这款内存管理工具。 *创作不易,点

    2024年02月16日
    浏览(32)
  • 前端小白是如何利用chatgt用一周时间从做一款微信小程序的

    随着 chatgpt 的大火,真的是在工作上给各行各业的人带来了极大的便利,本人是一个 java 程序员,其实我自己是一直想开发一款属于自己的小程序的,但是迫于对前端知识的贫瘠,考虑到要学的前端开发知识有很多,比如 js , ts ,前端框架 vue , react …,最难受的是 css 样式,最

    2024年02月02日
    浏览(55)
  • 假期出行小程序+chatgpt旅游攻略

    马上五一了,如果想出去旅游,需要提取规划好路线图,我们可以借助chatgpt的路线规划功能帮我们生成一份攻略,按照攻略我们就可以愉快的出去玩耍了。 本文结合chatgpt,利用低代码工具帮我们制作一份旅行导览小程序,可以按照行程方便的出行。 我们在聊天窗口输入关键

    2024年02月05日
    浏览(35)
  • 微信小程序获取页面节点方法简介。canvas 滑动验证码 (前段,微信小程序,canvas2D)

    目录 一.wx.createSelectorQuery():返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createSelectorQuery() 来代替 二.SelectorQuery.select(string selector)  返回值是NodesRef 三.NodesRef  四:执行所有请求 NodesRef SelectorQuery.exec 五: canvas 滑动验证码(使用wx

    2024年02月09日
    浏览(54)
  • 假期学习资源:微信小程序入门到实战课(8门课)

    微信小程序框架的制作视频教程免费下载(黄菊华老师大学毕业设计辅导课) 链接: https://pan.baidu.com/s/1iXb5FH3rIys6dXu_4VphXg?pwd=wk7e 提取码: wk7e 微信小程序语法入门到精通视频教程免费下载(黄菊华老师大学毕业设计辅导课) 链接: https://pan.baidu.com/s/1Gva5mFWqZAxcghlrcGBf3Q?pwd=xffs 提取

    2024年02月13日
    浏览(38)
  • 万能DIY预约小程序源码系统 上门预约服务小程序搭建 适用于各种预约场景 自由DIY功能模块

    在这个快节奏的时代,预约服务已经成为了我们日常生活的一部分。从看病挂号到餐厅预订,从美发美容到家政服务,预约已经深入到了各个领域。然而,传统的预约方式存在着许多不便,如电话预约、在线填写表格等,不仅效率低下,还容易出错。于是,万能DIY预约小程序

    2024年02月07日
    浏览(46)
  • 中秋假期,回不了家的程序员,竟然用Python做了这件事...

    文 | 乌鸦 来源:Python 技术「ID: pythonall」 明月几时有,难得的中秋假期,很多码农兄弟经历疫情后终于有机会和家人团聚,也有不少兄弟因为各种原因在他乡度过假期。 无论是怎样的情感,程序员总有自己特别的表达方式。今天就让我们花上几分钟时间用Python写一个小游戏

    2023年04月08日
    浏览(38)
  • 玩转DIY可视化打造专属小程序

    DIYGW可视化工具是一个傻瓜式、拖拽式、模块化开发软件工具;一个从想法到原型到源码,一步到位低代码生成源码工具。 所见即所得,拖拽设计,无编程基础的人都能轻松掌握。只需一次设计,就能拥有微信小程序、支付宝小程序、头条小程序、QQ小程序、百度小程序、F

    2023年04月22日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包