DIY一款小程序

已于 2022-10-10 15:26:58 修改
阅读量2.7k 收藏 19
点赞数 7
分类专栏： 工具库 文章标签： 小程序 低代码
于 2022-10-10 14:16:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42000816/article/details/127243604
版权

前言

前段国庆假期时间，去了清远玩顺便过了一把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这款小程序时，我也是第一次上手这款设计器，在熟悉这款设计器后，我第二次上手时，用的总时长不足十分钟
在这里插入图片描述

在这里插入图片描述

虽然这款DIY设计器很好用，但目前并不免费对外开放，毕竟作者花费了这么多心血，不过想想省去的时间和工作，还是价有所值的，所以大家对比下平时的开发速度，自行取舍与评判吧

howcoder
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
智能diy官网小程序后台+4小程序前端.zip
05-08
智能DIY官网小程序是一款结合了前端用户界面与后台管理系统的应用程序，主要针对小程序平台进行设计。这个项目包含两大部分：前端部分和后端部分，分别对应压缩包中的"前端"和"后端"两个文件夹。 一、小程序前端 小...
微信小程序diy后台
07-30
微信小程序DIY后台是针对微信小程序开发的一种定制化解决方案，它允许开发者以组件化的方式构建小程序，提升开发效率和灵活性。这种开发模式让开发者能够更自由地定义小程序的界面和功能，实现个性化的设计和功能...
DIY小程序，DIY手机壳，手机壳DIY，DIY制作，相关的小程序前端示例代码，已兼容抖音、微信小程序
02-25
DIY小程序，DIY手机壳，手机壳DIY，DIY制作，相关的小程序前端示例代码，基于UNIAPP，已兼容抖音、微信小程序；.zip
vue2diy小程序(拖拽小程序 , 装修设计)
m0_73854403的博客
09-08 1067
小程序diy, 拖拽小程序 , pc端拖拽小程序 ,装修小程序
线上自由DIY预约小程序源码系统 自由DIY你的界面 带完整的的安装代码包以及搭建教程
最新发布
codeji的博客
05-29 175
而线上自由 DIY 预约小程序源码系统则为开发者和企业提供了更大的自由度和创造力，让他们能够根据自己的需求和想象，打造出独具特色的预约小程序。：该系统提供了一系列功能模块，如预约管理、用户管理、消息通知、支付功能等，用户可以根据实际需求选择和组合这些模块，实现个性化的功能配置。：用户可以根据自己的品牌形象、业务需求和用户体验要求，自由定制小程序的界面布局、颜色主题、字体样式等，使其与自身品牌风格完美融合。：采用先进的加密技术和安全措施，确保用户数据的安全和隐私。源码下载地址：春哥技术博客或帮企商城获取。
抖音小程序自定义DIY源码系统 带完整的安装代码包以及搭建教程
2301_77558505的博客
03-05 533
然而，随着小程序市场的竞争日益激烈，如何让自己的小程序脱颖而出，成为用户心中的“宠儿”，成为了摆在每个开发者面前的重要课题。为此，我们深入市场调研，发现许多开发者对于抖音小程序的个性化需求非常强烈，他们希望能够根据自己的创意和想法，定制出独一无二的小程序界面和功能。：系统内置了众多常用的功能组件，如轮播图、列表、表单、地图等，开发者可以根据需要，自由组合和配置，快速搭建出功能丰富的小程序。：抖音小程序自定义DIY源码系统经过严格的性能优化和测试，确保小程序的加载速度快、运行流畅，为用户提供极佳的使用体验。
轻松DIY微信点餐小程序：详细步骤全解析
2301_80728471的博客
12-18 615
通过制作微信点餐小程序，您不仅可以提供便捷的订餐服务，还可以拓展您的销售渠道，为您的餐厅或者店铺带来更多的客流量和收益。因此，不论您是餐饮行业的从业者，还是想要开展线上业务的商家，制作一个微信点餐小程序都是非常有必要的。制作微信点餐小程序并不复杂，只要按照以上步骤，您就能够快速制作出一个出色的小程序。而乔拓云网的后台设计工具更是为您提供了丰富的功能和模板，让您的小程序更加个性化和专业化。这一步骤将进入到小程序的设计模式，为您提供了丰富的设计工具和模板。确认无误后，您可以提交审核，等待小程序的上线。
【编程DIY】一.几个有趣的小程序
welcome my friends
08-29 1754
兴趣是最好的老师。本系列介绍一些非常容易上手编写的小程序，这些小程序给博主的学习之路带来了许多欢乐，特记录分享！
微信DIY制作平台万能小程序源码下载
05-04
微信DIY制作平台万能小程序源码下载 这个模块实际是微信魔方模块里面的万能门店小程序,现在是独立出来了， 好处是轻便简单，满足各种小程序需求，不过我也觉得太过于独立了， 现在的网站、小程序、微信公众号运营...
新版ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序
07-10
界面自由DIY，打造个性小程序 可拖拽式DIY布局，开启自定义功能新征程，无需繁琐操作，轻松拖拽即可实现界面布局；同步实时预览，可视化操作让您所见即所得，随心打造个性小程序。 丰富功能组件，应多种场景需求 ...
开源7合一万能DIY小程序源码系统 一个后台整合7端 轻松搭建小程序 带完整搭建教程
2301_77558505的博客
11-13 672
1.一次开发，多端上线：通过该系统，开发者只需编写一次代码，即可在多个平台上发布和运行小程序，包括微信、支付宝、百度、今日头条、抖音等五大流量平台。3.强大的后台管理功能：系统提供了一个功能强大的后台管理界面，开发者可以通过它来进行用户管理、数据统计、权限管理等工作，方便快捷。6.跨平台支持：除了支持微信小程序，该系统还支持支付宝、抖音等其他平台的小程序，开发者可以轻松地扩展自己的业务范围。5.完整的搭建教程：系统提供完整的搭建教程，开发者可以轻松地入门，并且可以快速地搭建出自己的小程序。
仿网易印象派在线定制系统diy软件 ,DIY网站源码
09-19
仿网易印象派在线定制系统diy软件 ,DIY网站源码。可实现T恤、杯子、台历、挂历等产品的个性DIY设计。运行环境：ASP/Access
纪念册、照片书、台历、个性化印刷定制商城源码3.1
05-10
纪念册、照片书、相册、个性化印刷在线定制商城源码，还有在线DIY设计系统。 随着人们对个性生活追求的提高，个性化印刷产品越来越多，纪念册、照片书、相册、台历、挂历、扑克、明信片、LOMO卡、名片、T恤、杯子、海报等等均可实现在线定制，为了推动个性化定制市场的快速发展，我们开发了Q定制 个性印刷在线定制商城系统 。该系统功能强大，基本满足各位想个性化礼品创业爱好者的需求 系统的基本功能1、会员管理，包括会员组管理，不同的组有不同的权限 2、管理员管理，可以对不同的管理员设置不同的权限 3、订单管理，包括订单的日常处理 4、产品管理，添加，修改等 5、支付方式管理 6、配送方式管理 7、优惠券及充值卡管理 8、会员相册及相片管理 9、会员设计产品管理 10、前台定制参数管理，对前台定制模块字体设置，既可以使用系统字体也可以自定义字体 11、包装管理 12、促销管理 15、其他功能，站内消息，产品评论等等 本软件的特色： 1、在线礼品定制，可视化操作，可随时预览定制礼品的效果 2、后台可以直接提取分辨率高达300的效果图直接用于产品加工 3、全站DIV+css 布局，关键词等相关设计都从seo角度考虑 4、全站采用缓存技术，大大提高了网站的速度
在线定制手机壳系统源码
11-06
定制
自主DIY微信小程序源码系统+商城功能 带完整搭建教程
2301_77558505的博客
11-01 171
在商业领域，电商行业的发展尤为迅速。越来越多的商家开始将业务拓展到线上，通过电商平台进行商品的展示和销售。微信小程序作为一种新型的电商平台，可以为商家提供更多的销售渠道和用户资源。因此，开发一款带有商城功能的微信小程序，可以帮助商家更好地拓展业务，提高销售额和用户满意度。微信小程序作为一种轻量级的应用程序，逐渐受到了广大用户的欢迎。它具有即用即走、无需下载安装等优势，为用户提供了更加便捷的应用体验。同时，微信小程序还提供了丰富的API和开发工具，使得开发者可以快速地构建和发布自己的小程序。
怎么自制小程序？【自己制作小程序】
业务可交流哦~
03-03 7228
不知道怎么自制小程序的小伙伴，除了使用代码之外，还是可以使用小程序制作工具的，只要工具用的好，做出来的小程序也是跟编程做出来的小程序效果差不多。在小程序制作工具中选择合适的小程序模板进行套用。套用模板省去了编程的过程，在小程序模板的基础上进行可视化的二次设计制作，不懂代码也可以自制小程序，做小程序的效率也高。小程序制作工具的选择还是比较多的，选一个自己用得顺手的就可以了，做出来的小程序的效果都是差不多的。用我们已经申请好的小程序账号在小程序制作工具中进行授权，然后就可以同工具发布小程序了。
百度自由DIY小程序源码：PHP+MySQL组合开发 带完整的搭建教程
codeji的博客
01-04 760
1.高度自定义：源码提供丰富的模板和组件，开发者可以根据自己的需求进行自由组合，轻松搭建出个性化的小程序。2.强大的数据库支持：使用MySQL数据库，支持数据的存储、查询和更新，确保小程序数据的安全与稳定。3.完善的权限管理：提供用户角色和权限管理功能，不同角色的用户拥有不同的操作权限，确保数据的安全性。5.完善的教程：提供完整的搭建教程，从环境配置到功能实现，帮助开发者快速上手，降低开发难度。6.丰富的API接口：提供丰富的API接口，支持与第三方平台的对接，方便数据的共享与交互。
开源全平台7合一万能DIY小程序源码系统 带完整搭建教程
2301_77558505的博客
09-19 339
小程序、百度小程序、抖音小程序、今日头条小程序、微信公众号端、H5端，功能强大，前后端都全新升级了微信授权登录接口，使用起来也很方便。今天罗峰要给大家分享的是一款功能强大的7合一万能DIY小程序源码系统，一个后台整合7端，完美整合。源码下载地址：春哥技术博客--全平台7合一万能DIY小程序源码系统。
万能DIY预约小程序源码系统：各种模板任你选择，自主DIY，创建属于你的预约小程序 带完整的安装部署教程
2301_77558505的博客
12-28 462
然而，市面上的预约小程序大多功能单一，不能满足所有行业的需要。用户可以通过后台实时查看预约量、访问量、用户画像等数据，为后续的运营和优化提供有力支持。为了让用户的小程序获得更多的曝光机会，我们还提供了多渠道推广功能。用户可以通过微信朋友圈、公众号、线下活动等多种方式宣传自己的小程序，吸引更多的目标客户。用户可以根据自己的需求选择合适的模板，快速搭建自己的预约小程序。除了丰富的模板选择外，用户还可以根据自己的喜好和需求对模板进行个性化DIY。为了让用户能够快速搭建自己的小程序，我们提供了完整的安装部署教程。
diy 小程序 源码
08-30
"DIY小程序源码"是指可以自己制作和定制的小程序的代码。小程序是一种运行在手机客户端的应用程序，可以在各种微信平台上使用。通过DIY小程序源码，用户可以根据自己的需求和喜好，自定义和修改小程序的功能、界面和操作。 DIY小程序源码通常包含了小程序的前端代码和后端代码。前端代码负责小程序的用户界面和交互逻辑。用户可以根据自己的需求修改小程序的界面设计，例如添加、删除或修改界面组件，调整布局和样式等。同时，用户也可以根据需要修改小程序的交互逻辑，例如增加功能模块、改变用户操作流程等。 后端代码负责小程序的数据处理和服务器交互。用户可以通过修改后端代码来改变小程序的数据传输方式、数据存储方法和服务器接口。例如，用户可以将小程序与自己的数据库集成，实现个性化的数据处理和存储。同时，用户也可以定制和改进服务器接口，以提供更加功能丰富和高效的服务。 DIY小程序源码的好处是可以满足用户的个性化需求。用户可以根据自己的行业特点和业务需求，定制和开发适合自己的小程序。而且，DIY小程序源码通常是开源的，用户可以获取免费或低成本的代码，并且可以参考开源社区的经验和资源。 总之，DIY小程序源码是一种可以帮助用户自定义和定制小程序的代码资源。通过使用这些源码，用户可以根据自己的需求和喜好，开发出个性化和功能丰富的小程序。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值