专栏首页微搭低代码用低代码开发简易的小程序技术教程
原创

用低代码开发简易的小程序技术教程

1小程序简介

本次教程利用微搭低代码工具带着大家实现一款打卡小程序,小程序一共分为三个页面,分别是首页、签到页、签退页。

2项目背景

随着社会经济的飞速发展,越来越多的家庭都是双职工,双职工家庭如果老人身体不太好假期带孩子就是个问题。家庭经济条件好的可以上假期托管班,但是这种托管班都价格不菲,对于收入不高的家庭来说是个不小的负担。

为了确实解决家长的托管需求,某单位征求大家的意见后决定在单位一楼开辟一个专门的场所,提供学习的工具和小孩娱乐的工具,起了个比较好听的名字托管小屋。运行了一段时间后发现了一些问题:

1、每天托管的孩子不固定,不知道孩子的家长是谁。

2、没有专人的看护,小孩子在楼道里乱跑影响办公环境。

3、安全有潜在的问题,担心孩子在托管小屋发生安全状况。

3需求分析

和用户沟通后,使用小程序进行家长及孩子信息的收集,需要提供二维码,方便家长扫码录入信息,小程序需要具备以下功能:

1、要考虑能匿名登录

2、首页需要进行功能跳转,分为签到和签退

3、签到采集家长和孩子的个人信息,有表单提交的功能

4、签退采集家长的信息,有表单提交的功能

4小程序开发步骤

利用微搭低代码开发小程序的总体步骤分为创建数据源、创建应用、开发页面、发布预览。

5步骤一 创建数据源

按照需求分析,我们设计了两个数据源,分别是签到数据源和签退数据源。具体的创建方法,登录微搭的控制台,点击数据源管理菜单,点击新建自建数据源按钮。

在弹出的页面输入数据源的名称和标识,点击确定按钮进行创建

创建好后,点击编辑按钮进入编辑模式

点击添加字段,增加我们需要的字段

5.1签到数据源

5.2签退数据源

6步骤二 创建应用

开发小程序需要创建应用,点击应用管理,点击创建空白应用按钮

新建应用的时候选择普通应用,输入应用名称和标识

7步骤三 开发页面

应用创建好后我们就需要开发页面,默认会给创建一个首页,需要再创建两个页面,签到页和签退页。创建页面的方法是先点应用进入到应用编辑模式

点击创建新页面,我们分别创建一下签到页面和签退页面

7.1首页的开发

按照一开始我们小程序简介的介绍,首页我们是一个导航的功能,点击图标可以导航到签到页面和签退页面。切换到组件页签,分别添加两个标题组件

修改标题的内容为如下,主要是修改标题的内容、级别和颜色

接着我们添加一个栅格布局,用来放置导航图标

修改栅格布局的列比例为6:6,列间距为150

然后修改一下栅格布局的样式,改为弹性布局,设置主轴方向为水平,主轴对齐为横向平分,副轴对齐为中点对齐

在栅格布局的第一个插槽中添加一个容器组件

设置容器组件的样式为弹性布局,主轴方向为垂直,主轴对齐为水平居中,副轴对齐为中点对齐

样式设置好后在容器组件中添加图片组件和文本组件

修改图片组件的宽和高各为100

图片地址更换为签到的图标

修改文本的内容为签到

为了图标能够响应点击事件,我们需要在容器上增加一个点击事件,选择为平台方法的导航方法,选择页面选择为qiandao

设置好后我们选中容器组件,点击鼠标的右键,选择复制

选中栅格组件的第二个插槽,点击鼠标右键,选择粘贴

然后修改图片组件的图片地址为签退的图标,文字内容修改为签退

修改容器组件的事件,页面改到qiantui

这样首页就开发好了

7.2签到页的开发

切换到页面管理,选择签到页面

切换到组件视图,先添加一个导航栏组件

修改一下导航标题为签到,打开展示返回图标的配置

给导航栏组件增加一个返回事件,选择平台方法的返回即可

导航栏组件配置好后,往页面中添加一个表单容器组件

给表单容器增加submit提交事件,先选择签到的数据源

然后在传入参数那点击数据绑定,使用表达式的方法进行绑定

提交事件设置好后,我们增加一个数据创建成功后的事件

数据创建成功后我们就返回到首页

剩下就依次在表单容器里加入表单输入组件,日期的话可以选择表单日期组件方便用户录入

字段设置好后,我们增加一个按钮,修改按钮的类型为提交

这样签到页面就开发好了

7.3签退页的开发

按照签到页面的方法开发签退页面

8步骤四 发布预览

页面开发好后,可以先进行实时预览测试功能,测试通过后点击发布按钮进行正式发布即可

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 低代码应用程序开发的崛起

    近年来,企业和非程序员都可以轻松地构建应用程序,通常称为低代码开发(low-code development)。在这方面,Gartner预测,到2024年,低代...

    增强现实核心技术产业联盟
  • EMLOG程序简易防CC攻击代码的教程

    Youngxj
  • 低代码,应用程序开发新趋势?

    想象这样一个场景,当你给开发团队列出了一长串的需求,等待了6个月,然后祈祷在这个过程结束之后,得到一个令人满意和期待的产品。但是通常情况下,我们很难如愿以偿,因...

    增强现实核心技术产业联盟
  • 利用低码技术快速创建一款发票小程序

    日常生活中,我们总是需要收集各式各样的发票。而发票中最好用的无疑是餐饮发票,因为他在报销中没有比例限制,多多益善。

    低代码布道师
  • 利用微搭低代码开发每周菜谱小程序

    笔者一直是在政务赛道,给政府提供办公软件。因为去年甲方事业单位改革的原因,原来的负责人都转隶到了新的单位。现有的人员和机关事务服务中心合并,所以需要关注内部事务...

    低代码布道师
  • 【程序源代码】简单易用的 Java Web 应用开发框架

    一个简单易用的 Java Web 应用开发框架,包含 MVC、IoC、事件通知、ORM、插件等组件。在实体模型上使用 JSON 贯穿前后端,使应用开发更加快捷。...

    程序源代码
  • 利用微搭低代码开发每周菜谱小程序(一)

    既要求有前端开发技能,还得学习小程序的开发语言,如wxml、wxss等,框架、组件、api一套学习下来就感觉门槛很高了。

    低代码布道师
  • 利用微搭低代码开发每周菜谱小程序(二)

    有粉丝提问,低码里的问卷调查可以设置分数么,可以统计一下投票的结果么?我们就用低码来实际搭建一个问卷调查的案例来解决以上问题。

    低代码布道师
  • 利用微搭低代码开发每周菜谱小程序(三)

    我们使用低代码技术已经完成了菜谱管理和菜谱评价的功能开发,本篇介绍一下每日菜谱查看功能的开发,具体的页面效果如下:

    低代码布道师
  • 使用微搭低代码平台开发天气预报应用小程序

    查看每日的天气情况是我们在日常生活场景中的常见应用,本文就利用了腾讯云微搭低代码平台带领大家快速的搭建一款天气预报的小程序。

    腾讯云开发TCB
  • 低代码平台消除了应用程序开发的障碍

    企业需要一种更快,更有效的方式来交付应用程序,低代码开发平台提供了一种行之有效的方法,可以缩短新应用程序的价值实现时间。

    增强现实核心技术产业联盟
  • BAT程序员们常用的开发神器(附代码、教程)

    工欲善其事必先利其器,一个优秀的程序员除了代码写得好,善于利用各种开发工具同样可以事半功倍。以 BAT 为代表的各大厂程序员们在平时的工作中都用什么开发工具呢?...

    数据派THU
  • Vue3教程:用 Vue3 开发小程序,这里有一份实际的代码案例!

    Vue 3 发布以后,最近也在学习和写一些 Vue3 的 demo 和项目,我也一直想着什么时候能在小程序里使用新特性?

    程序员十三
  • 开发 | 最简单易懂的 GAN 教程:从理论到实践(附代码)

    之前 GAN网络是近两年深度学习领域的新秀,火的不行,本文旨在浅显理解传统GAN,分享学习心得。现有GAN网络大多数代码实现使用Python、torch等...

    AI科技评论
  • 代码管理| 简易教程之Cocopods的安装和使用

    CocoaPods的工作主要是通过ProjectName.xcworkspace来组织的,在打开ProjectName.xcworkspace文件后,发现Xco...

    進无尽
  • [mini-blog]基于云开发的博客小程序使用教程

    nodejs环境「云开发&调试需要使用到nodejs环境」,若第一次进行安装,可自行google安装教程

    Bug生活2048
  • 低代码应用程序开发:促进企业数字化转型

    随着企业越来越强调市场颠覆和跨行业的持续创新,低代码平台重新走入人们的视野,并且逐渐成为企业CIO的焦点,低代码的拖放集成、开箱即用的用户界面(UI)模板和简单...

    增强现实核心技术产业联盟
  • 微搭低代码丨如何将微搭应用发布到小程序?

    微搭平台当前仅支持一个主体授权,请授权相同主体小程序。小程序主体信息可根据指引前往 微信公众平台 查看。

    腾讯云开发TCB
  • 小程序开发的40个技术窍门,纯干货!

    微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券