乐趣区

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

随着网络和科技的倒退,利用小程序来服务外部职工的机构也越来越多。本文就应用 微搭低代码 来疾速制作一款每日菜谱小程序,机构外部的负责人能够保护每周的菜谱,职工通过关注小程序来查看每周的菜谱信息。

一、定义数据源

任何一款小程序都须要将数据存储起来,咱们个别会将数据存储到数据库中,微搭 给咱们提供了一款在线的文档数据库,能够不便咱们进行数据的读取和存储操作。

能够在数据源治理中创立咱们的自定义数据源,菜谱。


二、创立利用

数据源定义好后,咱们须要创立利用,一个利用就对应线上的一个小程序,根底版能够创立 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
技术交换群、最新资讯关注微信公众号【腾讯云低代码】

退出移动版