使用微搭低代码制作每日菜单小程序

随着网络和科技的发展,利用小程序来服务内部职工的机构也越来越多。本文就使用微搭低代码来快速制作一款每日菜谱小程序,机构内部的负责人可以维护每周的菜谱,职工通过关注小程序来查看每周的菜谱信息。

一 、定义数据源

任何一款小程序都需要将数据存储起来,我们一般会将数据存储到数据库中,微搭给我们提供了一款在线的文档数据库,可以方便我们进行数据的读取和存储操作。

可以在数据源管理中创建我们的自定义数据源,菜谱。
使用微搭低代码制作每日菜单小程序_第1张图片
使用微搭低代码制作每日菜单小程序_第2张图片

二、创建应用

数据源定义好后,我们需要创建应用,一个应用就对应线上的一个小程序,基础版可以创建50个小程序,足够我们使用了。具体方法点击应用管理,点击创建空白应用按钮。
使用微搭低代码制作每日菜单小程序_第3张图片
输入应用名称和标识点击确定就可以
使用微搭低代码制作每日菜单小程序_第4张图片

三、页面开发

应用创建成功后,我们点击编辑应用按钮就可以进行页面的具体开发了
使用微搭低代码制作每日菜单小程序_第5张图片
默认会创建一个首页,就是我们打开小程序看到的第一个页面
使用微搭低代码制作每日菜单小程序_第6张图片
一般的小程序首页会放置具体可以操作的功能,我们以图标的形式引导用户进行点击,首先我们开发菜谱管理的功能,图标的话我们可以去iconfont上下载,可以免费使用
使用微搭低代码制作每日菜单小程序_第7张图片
在搜索框输入菜谱,点击png下载就可以
使用微搭低代码制作每日菜单小程序_第8张图片
下载好了之后,我们需要把图标上传到我们的素材库以备后续进行使用,可以点击左侧菜单栏的资源管理,将下载好的素材上传上去
使用微搭低代码制作每日菜单小程序_第9张图片
素材有了我们就需要考虑功能的实现了,首页的功能需要选择合适的布局,布局就是规定了页面的结构,因为是图标加文字的形式所以我们选择栅格布局,有四列就足够了。具体的操作方式是选择对应的组件,可以点击也可以拖入编辑区
使用微搭低代码制作每日菜单小程序_第10张图片
初学者可能对插槽不是特别理解,其实就像积木一样,有插槽的地方说明继续可以放置其他组件,这里我们在第一个插槽里先放置一个容器组件,我一般的习惯是切换到大纲视图,然后选中插槽再往里放组件,这样比较精准。
使用微搭低代码制作每日菜单小程序_第11张图片
放置容器组件的目的是为了让图片和文字描述垂直排列,所以我们需要设置一下容器的样式为flex布局,主轴方向为垂直,主轴和副轴都是居中对齐
使用微搭低代码制作每日菜单小程序_第12张图片
然后在容器组件里放置图片组件,图片组件放置后我们改一下图片的宽和高各为100
使用微搭低代码制作每日菜单小程序_第13张图片
然后增加一个文本组件,将内容修改为菜谱管理
使用微搭低代码制作每日菜单小程序_第14张图片
按照相同的方法我们依次在其余的插槽中放置图片和文本组件,修改标题为每周菜谱、评论管理、发布评论
现在图片是默认图片,我们可以将图片修改成使用素材库的图片,选中图片组件点击云朵的图片使用素材库的图片即可
使用微搭低代码制作每日菜单小程序_第15张图片
使用微搭低代码制作每日菜单小程序_第16张图片
图标定义好后,我们需要为图标定义事件,我们选择容器组件,定义点击事件,选择tap点击,我们选择平台方法中的导航方法
使用微搭低代码制作每日菜单小程序_第17张图片
导航事件需要选择导航的页面,我们需要创建一个页面,在页面管理创建新页面即可
使用微搭低代码制作每日菜单小程序_第18张图片
页面创建成功后我们回到首页上,选中我们的容器组件,切换到事件页签选择我们刚刚创建的页面,这样事件就定义好了

四、预览发布

搭建好页面后,在编辑器里是看不到页面跳转的,为了测试一下我们的设置是否正确,我们点击预览发布按钮,将代码提交到生产环境看一下效果
使用微搭低代码制作每日菜单小程序_第19张图片
选择实时预览就可以
使用微搭低代码制作每日菜单小程序_第20张图片
使用微搭低代码制作每日菜单小程序_第21张图片
我们可以扫码访问也可以直接在浏览器打开
使用微搭低代码制作每日菜单小程序_第22张图片

产品介绍

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台,向上连接前端的行业业务,向下连接云计算的海量能力,助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5应用、Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。腾讯云微搭低代码以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航。
开通微搭:https://cloud.tencent.com/product/weda?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/weda/details?from=12763
技术交流群、最新资讯关注微信公众号【腾讯云低代码】

你可能感兴趣的:(微搭低代码,低码,lowcode)