DIY一款小程序

已于 2022-10-10 15:26:58 修改
阅读量3k 收藏 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设计器很好用，但目前并不免费对外开放，毕竟作者花费了这么多心血，不过想想省去的时间和工作，还是价有所值的，所以大家对比下平时的开发速度，自行取舍与评判吧

基于的电脑DIY微信小程序(程序+开题报告)(开题报告+源码）
liu10611的博客
02-11 1495
基于的电脑DIY微信小程序的开发，旨在为广大用户提供一个方便快捷的信息获取和交流平台，通过集成教学视频、配件信息、配置单等功能，帮助用户轻松学习和实践电脑DIY。[8] 王南. Java编程在计算机应用软件中的应用特征与技术研究[J]. 信息记录材料, 2022, 23 (04): 130-132.
智能diy官网小程序后台+4小程序前端.zip
05-08
智能DIY官网小程序是一款结合了前端用户界面与后台管理系统的应用程序，主要针对小程序平台进行设计。这个项目包含两大部分：前端部分和后端部分，分别对应压缩包中的"前端"和"后端"两个文件夹。 一、小程序前端 小...
微信小程序diy模板
12-04
使用的是php5.1开发的框架，数据库是MySQL5.6的； 程序是免费开源的； 可以个性化diy小程序模板的； 使用模块化组合的； 后续持续升级的；
【编程DIY】一.几个有趣的小程序
welcome my friends
08-29 1979
兴趣是最好的老师。本系列介绍一些非常容易上手编写的小程序，这些小程序给博主的学习之路带来了许多欢乐，特记录分享！
轻酷宝DIY小程序开发第一课：小程序账号注册
DIY小程序公开课
11-27 318
轻酷宝DIY小程序开发公开课，让作为企业、商家、创业者的您0基础1天内快速学会DIY开发属于自己的小程序，整个开发流程不涉及代码，用户依靠DIY组件，可视化制作小程序。 DIY小程序开发平台网址：www.qingkubao.com...
自制小程序
lite的博客
06-02 2430
其实这就是类似朋友圈的小程序，是一个同学之前跟我聊过，他想做一个社交类的小程序，我觉得还行，于是就开始做了： 这是首页： 这是留言页： 这是源代码，其实这些都非常的粗糙，毕竟那时候我刚学嘛~实现功能就完事了。 这好像是第一版，我后面有完善过，界面比这好看一点， ...
DIY小程序，DIY手机壳，手机壳DIY，DIY制作，相关的小程序前端示例代码，已兼容抖音、微信小程序
02-25
DIY小程序，DIY手机壳，手机壳DIY，DIY制作，相关的小程序前端示例代码，基于UNIAPP，已兼容抖音、微信小程序；.zip
微信DIY制作平台万能小程序源码下载
05-04
微信DIY制作平台万能小程序源码下载 这个模块实际是微信魔方模块里面的万能门店小程序,现在是独立出来了， 好处是轻便简单，满足各种小程序需求，不过我也觉得太过于独立了， 现在的网站、小程序、微信公众号运营...
ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序
12-27
界面自由DIY，打造个性小程序 可拖拽式DIY布局，开启自定义功能新征程，无需繁琐操作，轻松拖拽即可实现界面布局；同步实时预览，可视化操作让您所见即所得，随心打造个性小程序。 丰富功能组件，应多种场景需求 ...
基于UNIAPP框架的Vue手机壳DIY小程序前端设计源码
最新发布
09-29
本项目采用UNIAPP框架和Vue技术，开发了一款手机壳DIY小程序的前端源码。UNIAPP是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台，使得开发者可以使用同一套代码实现...
微信万能小程序diy制作平台V2.42版源码(万能门店小程序独立版) 直接上传审核
01-08
这个模块实际是微信魔方模块里面的万能门店小程序,只不过是独立出来了，好处是轻便简单，满足各种小程序需求，不过老乞丐我自己觉得太过于独立了，现在的网站、小程序、微信公众号运营需求和制作需求样式比较多，单单做微信小程序不太能满足各种客户需求，如果需要其余功能模块的，可以直接下载微信魔方，里面已经包含了万能门店小程序了，在用其余小程序的同时还可以做其余的各种功能！！
小程序运营管理系统源码 自由DIY布局 一键生成小程序.rar
03-19
无需编程，各行业模版直接套用，一键生成，轻松搭建小程序 界面自由DIY，打造个性小程序 可拖拽式DIY布局，开启自定义功能新征程，无需繁琐操作，轻松拖拽即可实现界面布局；同步实时预览，可视化操作让您所见即所得，随心打造个性小程序。 丰富功能组件，应多种场景需求 多样的功能组件，不受行业框架限制，可自由组合适应当前场景，让您轻松满足客户的定制需求。 大量插件可用，实现多样营销功能 积分签到、积分兑换商城、拼团、店内点餐、手机客服等插件可用，满足各种行业场景营销需求，助力客户小程序营销推广。 无需技术基础，轻松玩转小程序 无需代码编程，无需技术基础，简单的操作页面，清晰的模块分划，详尽的功能组件，让您短时间即可轻松玩转小程序。 垂直研发，深度挖掘行业解决方案 深入行业了解不同行业的痛点和需求，致力于解决实际问题，给客户带来实际价值，深度挖掘不同行业的解决方案。 功能介绍 分销模块：帮助企业快速搭建企业独立在线商城,自由选择分销模式,从多方位,多角度提供服务支持,助力商户实现分销渠道裂变销货,连锁门店线上化高效经营。 消息通知：设置商品状态通知、成团通知、预约预定通知、系统表单通知、会员卡开卡通知等消息模板，配置商家收发消息邮箱实现邮件通知。 万能表单：超强大的自定义表单模块，不同行业和岗位的人员不需要特殊技能，都可以方便的创建出符合业务需求的表单小程序。数据收集，简单方便，客户登记、意见反馈、活动报名等轻松搞定。万能表单自动收集并整理数据，帮助用户节省工作时间，高效率、更便捷的完成工作。 文章管理系统：对文章详细内容、所属栏目、访问量、评论、分享操作、底部菜单、关联文章等进行管理。 预约报名：报名设预约报名期，在期限内预约用户进行报名。预约报名期内，用户通过填写和提交个人信息的方式进行报名，在约定期限内报满为止。 充值管理：对充值优惠规则、积分规则等进行设置和管理。 商品管理：对多规格商品、秒杀商品、预约商品进行设置和管理。 组图管理：对图片、幻灯片进行设置和管理。 小程序管理：对小程序跳转进行管理。 评论管理：对文章、组图、商品等内容下的评论进行审核和管理。 内容库管理：对多种模型的内容（文章、组图、商品）进行快速筛选 会员管理：对会员信息，会员开卡，会员卡折扣，会员卡积分等进行设置和管理。 多商户插件：多商户入驻平台插件 自定义菜单：底部菜单栏DIY，自定义外观、功能。 广告设置：对开屏广告、首页广告、弹窗广告等进行设置和管理。 一键模板：多行业优秀模板可选，一键生成场景适用小程序页面。 积分管理：对分享获取积分、充值获取积分、签到获取积分等多种积分获取形式以及积分兑换进行管理。 手机客服插件：商家为客户提供线上的咨询服务，通过手机客服为客户解决需求问题。 订单管理：对多规格商品、秒杀商品、预约预定商品等订单状态操作。 数据分析：对小程序流量数据、订单数据、交易数据等进行分析，统计活跃用户和热销商品等。 支付宝小程序：支付宝小程序制作与发布，无需编程，一键生成。 百度小程序：百度小程序制作，无需编程，一键生成，百变应用，自由组合。 权限管理：自定义配置用户可使用的功能，分别给予权限。 可拖拽DIY：APP设计制作一站式解决方案，创造出独一无二的专属小程序。无需懂代码，都可以借助DIY官网可视化工具，顷刻间打造自已的个性化移动应用。 多门店：多门店共享数据，可切换不同城市显示，搜索门店并显示门店详情。 付费视频系统：付费视频是为了维护视频版权，促进用户知识付费的一种手段。 多规格商城：多规格商城是指在商城中能够选取规格、多规格匹配。点击购买弹出弹框，用来选择规格和选择购买数量，并和库存匹配。 积分兑换商城：用户获得积分后可以在积分商城中兑换优惠券、礼品卡或商家指定商品等。 多栏目管理：对所有内容模型的栏目进行管理。 积分签到插件：用户登陆商家小程序进行每日签到，获取相应积分。 代理商管理：拥有底层源码系统，发展自己的代理商，列表清晰展示各代理商状态，详细设置对代理商账号信息、创建小程序的个数、系统到期时间等进行管理。 店内点餐插件：无需呼叫服务员，省去排队等待时间，立即点餐，即点即用。线上线下零距离对接商家厨房最短时间送餐上桌，一键快捷支付，省时省力。每个订单实时对接后台，财务报表、资金流水、客流量盈亏分析随时掌握。 拼团商城插件：参加拼团的商品都有单独购买价格和拼团价格，在规定时间内达到相应的标准人数购买，则拼团成功。 优惠券：优惠券是一种相对成熟的营销工具，可在后台添加优惠券 付费预约：通过付费缴纳定金的方式进行预约，用户预约成功后在对应时间获得商户指定商品或服务。 秒杀商城插件：商品类型为秒杀商品，设置秒杀时间、限定数量，在规定内买家以秒杀价购买商品。
小程序页面生成工具
01-29
小程序页面生成工具，freemaker完成。。。。简单页面生成
新版ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序
07-10
无需编程，各行业模版直接套用，一键生成，轻松搭建小程序 界面自由DIY，打造个性小程序 可拖拽式DIY布局，开启自定义功能新征程，无需繁琐操作，轻松拖拽即可实现界面布局；同步实时预览，可视化操作让您所见即所得，随心打造个性小程序。 丰富功能组件，应多种场景需求 多样的功能组件，不受行业框架限制，可自由组合适应当前场景，让您轻松满足客户的定制需求。 大量插件可用，实现多样营销功能
DIY定制设计小程序开发制作功能介绍
hanlin1888的博客
05-28 2202
DIY定制设计小程序系统主要使用于需要用户个性化定制的场景中。比如服装、水杯、广告画面等，用户选择自己需要的3D模型，然后上传图片或添加文字等信息到模型里面合作，用户想要的定制的物品。 DIY定制设计小程序主要功能有：企业信息展示、产品或服务展示、在线下单、在线客服、DIY定制设计、产品或服务分类、在线支付、产品或服务信息介绍、模型修改等。其他商业功能就不一一介绍。 用户通过小程序DIY属于自己独一无二的产品或服务，可以实现设计自由。 ...
vue2diy小程序(拖拽小程序 , 装修设计)
m0_73854403的博客
09-08 1704
小程序diy, 拖拽小程序 , pc端拖拽小程序 ,装修小程序
抖音小程序自定义DIY源码系统 带完整的安装代码包以及搭建教程
2301_77558505的博客
03-05 952
然而，随着小程序市场的竞争日益激烈，如何让自己的小程序脱颖而出，成为用户心中的“宠儿”，成为了摆在每个开发者面前的重要课题。为此，我们深入市场调研，发现许多开发者对于抖音小程序的个性化需求非常强烈，他们希望能够根据自己的创意和想法，定制出独一无二的小程序界面和功能。：系统内置了众多常用的功能组件，如轮播图、列表、表单、地图等，开发者可以根据需要，自由组合和配置，快速搭建出功能丰富的小程序。：抖音小程序自定义DIY源码系统经过严格的性能优化和测试，确保小程序的加载速度快、运行流畅，为用户提供极佳的使用体验。
微信万能DIY小程序源码系统：自由DIY，海量模板+小组件，随心搭配，轻松创建你的小程序 带完整的搭建教程
2301_77558505的博客
01-04 1099
该系统经过多年的研发与实践，已经成功帮助众多用户快速搭建了自己的小程序。用户可以根据自己的需求选择合适的模板和组件，轻松搭建出个性化的小程序。微信万能DIY小程序源码系统不仅具备基本的小程序功能，如商品展示、在线支付、用户管理等，还支持自定义插件和API接口的扩展。同时，经过严格的性能测试和持续优化，确保系统运行高效稳定，为用户提供可靠的保障。通过简单的拖拽和编辑，用户可以随心所欲地搭配各种模板和组件，快速生成自己想要的小程序界面。系统还提供了丰富的主题和样式选项，让您的小程序更加美观、易用。
开源全平台7合一万能DIY小程序源码系统 带完整搭建教程
2301_77558505的博客
09-19 443
小程序、百度小程序、抖音小程序、今日头条小程序、微信公众号端、H5端，功能强大，前后端都全新升级了微信授权登录接口，使用起来也很方便。今天罗峰要给大家分享的是一款功能强大的7合一万能DIY小程序源码系统，一个后台整合7端，完美整合。源码下载地址：春哥技术博客--全平台7合一万能DIY小程序源码系统。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值