• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

相关文章 搞代码 3年前 (2022-04-21) 29次浏览 已收录 0个评论
文章目录[隐藏]

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

一 、定义数据源

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

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


二、创立利用

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


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用微搭低代码制作每日菜单小程序

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址