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

Posted 腾讯云·云开发CloudBase

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用微搭低代码制作每日菜单小程序相关的知识,希望对你有一定的参考价值。

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

一 、定义数据源

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

可以在数据源管理中创建我们的自定义数据源,菜谱。


二、创建应用

数据源定义好后,我们需要创建应用,一个应用就对应线上的一个小程序,基础版可以创建50个小程序,足够我们使用了。具体方法点击应用管理,点击创建空白应用按钮。

输入应用名称和标识点击确定就可以

三、页面开发

应用创建成功后,我们点击编辑应用按钮就可以进行页面的具体开发了

默认会创建一个首页,就是我们打开小程序看到的第一个页面

一般的小程序首页会放置具体可以操作的功能,我们以图标的形式引导用户进行点击,首先我们开发菜谱管理的功能,图标的话我们可以去iconfont上下载,可以免费使用

在搜索框输入菜谱,点击png下载就可以

下载好了之后,我们需要把图标上传到我们的素材库以备后续进行使用,可以点击左侧菜单栏的资源管理,将下载好的素材上传上去

素材有了我们就需要考虑功能的实现了,首页的功能需要选择合适的布局,布局就是规定了页面的结构,因为是图标加文字的形式所以我们选择栅格布局,有四列就足够了。具体的操作方式是选择对应的组件,可以点击也可以拖入编辑区

初学者可能对插槽不是特别理解,其实就像积木一样,有插槽的地方说明继续可以放置其他组件,这里我们在第一个插槽里先放置一个容器组件,我一般的习惯是切换到大纲视图,然后选中插槽再往里放组件,这样比较精准。

放置容器组件的目的是为了让图片和文字描述垂直排列,所以我们需要设置一下容器的样式为flex布局,主轴方向为垂直,主轴和副轴都是居中对齐

然后在容器组件里放置图片组件,图片组件放置后我们改一下图片的宽和高各为100

然后增加一个文本组件,将内容修改为菜谱管理

按照相同的方法我们依次在其余的插槽中放置图片和文本组件,修改标题为每周菜谱、评论管理、发布评论

现在图片是默认图片,我们可以将图片修改成使用素材库的图片,选中图片组件点击云朵的图片使用素材库的图片即可

图标定义好后,我们需要为图标定义事件,我们选择容器组件,定义点击事件,选择tap点击,我们选择平台方法中的导航方法

导航事件需要选择导航的页面,我们需要创建一个页面,在页面管理创建新页面即可

页面创建成功后我们回到首页上,选中我们的容器组件,切换到事件页签选择我们刚刚创建的页面,这样事件就定义好了

四、预览发布

搭建好页面后,在编辑器里是看不到页面跳转的,为了测试一下我们的设置是否正确,我们点击预览发布按钮,将代码提交到生产环境看一下效果

选择实时预览就可以

我们可以扫码访问也可以直接在浏览器打开

产品介绍

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

以上是关于使用微搭低代码制作每日菜单小程序的主要内容,如果未能解决你的问题,请参考以下文章

使用微搭低代码一键发布小程序

使用微搭低代码实现小程序消息订阅及发送功能

使用微搭低代码实现小程序消息订阅及发送功能

腾讯云微搭低代码餐饮小程序实例

微搭低代码小程序实现图片的上传和下载

微搭低代码小程序实现图片的上传和下载