利用微搭低代码开发每周菜谱小程序(一)腾讯云开发者社区

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

为了降低学习和使用难度,今年一月份腾讯云适时的推出了一款低代码开发工具,微搭,主要就是解决快速开发的问题。依托于腾讯云底层的云开发技术,提供了一套在线的小程序开发工具,全程使用拖拽的形式进行开发,无需编码没有前端开发经验的人也可以使用。

介绍了这么多,光说不练假把式,那我们就以一个实战案例来介绍一下低代码工具的具体用法。

我们本次的实战也是利用小程序开发一款每周菜谱的小应用,管理员可以维护一周的菜谱信息,职工可以通过小程序来查看一周的菜谱。菜谱管理主要拆分成具体的功能点来开发

人越少所需的成本越小,而且只需要租用少量的资源就能发布成线上应用,用现在流行的话就是快速的助力企业业务上云。

低码开发的话数据源管理相当于传统开发的数据库层,主要包括数据库表的建立及增删改查方法的建立。如果业务逻辑简单其实直接使用平台建立的方法即可,并不需要自己写什么代码。

建立的方法也比较简单,只需要在微搭的控制台新建一个内部数据源,增加对应的字段即可。

数据库的字段可以参考我下边的表格

字段名称

字段英文名称

数据类型

开始日期

begindate

字符串

结束日期

enddate

周一早餐

mondaybreakfast

周一午餐

mondaylunch

周二早餐

tuesdaybreakfast

周二午餐

tuesdaylunch

周三早餐

wednesdaybreakfast

周三午餐

wednesdaylunch

周四早餐

thursdaybreakfast

周四午餐

thursdaylunch

周五早餐

fridaybreakfast

周五午餐

fridaylunch

周六早餐

saturdaybreakfast

周六午餐

saturdaylunch

周日早餐

sundaybreakfast

周日午餐

sundaylunch

标题

title

这里的页面就类似于java开发中的jsp,我们可以在页面中写前端的代码。和传统开发显著不同的地方是我们所谓的“开发”,是指从组件库中拖组件。我们先需要新建列表页面,具体方法是在页面管理里新建页面

输入页面名称和标识就可以

有了页面之后我们就可以拖动组件了,你熟练使用组件了基本也就算入门了。

其实官方的组件库在开发时就已经充分考虑大家的业务场景了,对于这种列表查询还是很常见的业务场景,官方的组件库中展示类组件就是干这个的。

初次使用这些组件,名字还是很有迷惑性的,乍一看还长得差不多。我感觉初学最大的难点是理解容器的概念,我理解就和搭积木一样,要往上搭建你总得有个底座,这个底座就叫容器,搭好底座我们就可以往容器里边放置具体的组件了。

为了实现列表的效果,我们先增加列表容器组件,有两种方法可以增加,一种是单击组件名称,另外一种是拖动,我自己的习惯是单击,这样会快一点。

我们先单击一下列表容器组件,你会看到中间的编辑区会增加了一个组件

组件添加进去默认会出现一个蓝框,意思是这个组件是被选中的状态,在组件的右边会出现三个标签,数据、样式和事件。

我们在传统开发中通常需要对组件进行数据绑定,不管是直接赋值也好,还是使用循环展示也好,低码中的数据其实就是为了做数据绑定使用的。

如果你是一个简单的展示,那可以直接设置值,如果是需要展示从数据库中获取到的值需要进行数据绑定,具体方法就是在属性的右边那个超链接的图标进行绑定

绑定数据有四种方式分别为状态变量、参数变量、表达式、for循环。不同的功能使用的方式是不一样的,具体采用哪种方式需要我们在实践中不断的摸索,不断的总结。经验多了也就知道在什么场景下用什么样的方式了。

我们传统开发通常将样式写在css文件中,低码开发是在每个组件的样式页签中进行设置的

基本上涵盖了CSS中常用的各种设置,对于我这种小白来说日常我是习惯在这里设置的,当然如果你对前端开发非常熟悉也可以直接写代码,在样式代码编辑里可以直接写

这个地方就可以体现出低码的特点,主要是配置,也支持手写代码

在开发领域我们有几种叫法,一种叫面向对象编程,还有一种叫面向事件编程。因为我们主要的技术栈是在前端,所以主要是以事件做驱动,事件页签里决定了这个组件能响应什么样的事件。

像我们添加的这个容器就不支持绑定事件

我们用了一定的篇幅介绍了一些通用的概念,还是回到我们的实战开发上来,容器组件的话我们只需要修改一下标题就可以,修改成每周菜谱查询列表

容器设置好后相当于我们打好了地基,接着就需要放置我们真正显示列表标题的组件了,我们将元素列表组件拖入到容器组件中。当然了我不太习惯拖进去,我还是习惯在大纲树中增加,所以需要切换到大纲树视图,我们选中列表容器的插槽

选中插槽后我们再切换到组件视图,将列表元素组件放到插槽中

组件放置好后我们第一件事需要做的就是数据绑定,自然是绑定列表的集合了。初学者到这块可能就懵了,我要怎么设置才可以循环展示一个集合的数据呢?

其实也很简单,只需要点击for循环展示旁边的超链接图标进行数据绑定即可

但是现在空空如也,没办法选择啊

到了这一步就需要我们再介绍另外一个概念,变量。在编程的世界变量是用来放置值的地方,为了放置值就需要先定义,那低码是如何定义的呢?需要在变量管理里定义

找到我们创建的菜谱页面,展开,点击状态变量旁边的+号

我们这个变量的目的是从数据源中获取菜谱的集合,所以变量类型类别选择数据源,选择我们定义好的菜谱数据源,方法的话选择列表,变量初始化方法选择内置的getList

有过开发经验的小伙伴也能理解这个地方就相当于执行数据库查询,将返回的集合赋值给我们定义好的变量。定义好变量之后我们再回到编辑器中就可以绑定我们刚刚定义的变量啦

绑定好数据之后我们看到界面就显示了多条数据

有小伙伴会有疑问,我没在数据库中存入数据啊,它这怎么就会有数据呢?其实微搭是分为三个模式,开发模式、预览模式和生产模式。开发模式工具会自动生成测试数据方便我们看到组件的设置效果,其他两个模式需要预览发布后才能看到具体的效果。

我们只需要显示标题信息,所以需要设置一下组件的数据属性。初学的时候如何绑定标题就挺难的,其实就是从循环体里设置数据就可以,比如要设置标题,点击旁边的超链接

但是点开又有点懵,不知道该选择哪一个,其实用开发的思路理解一下,我们刚才设置的是for循环的变量,这里边当然要从循环体里设置值啦

绑定后的效果是这个样子的

其余的我们不需要擦掉就可以

这样列表的数据绑定工作就完成了,接着就得定义事件了。我们需要在列表上绑定一个点击事件,所以需要切换到事件页签。

事件呢先得需要选择你要响应哪个事件,然后就是动作的类型,一共有三个选项,低代码、平台方法和数据源。

低代码呢允许我们自己定义代码自由定制业务逻辑,平台方法是预置的方法,数据源的话可以调用平台预定义的增删改查的方法。

我们这里其实是选择的低代码方法,因为需要将这条记录的主键传到下一个页面中。没看错,我们又需要讲解一个新的知识点,如何定义低代码方法。在导航条点击低代码编辑按钮就可以

找到我们创建的菜谱页面,在handler旁边点击+号,输入方法名称就可以

好吧,到了这一块难度一下子就提升了一个数量级,因为跳转到查看页面是需要传参的,所以需要开始写代码了

在列表页我们使用了低代码定义了点击事件,也将菜谱的主键传入到了查看页面,我们讲解一下如何在查看页面获取数据并进行展示

先在页面管理创建一个新页面,页面id要和低代码的pageId保持一致

接着我们考虑页面的布局,我们在移动端的信息一般是从上到下,每一行展示一个信息,切换到组件页签,我们还是先添加列表容器,并且修改标题为菜谱信息查看

然后切换到大纲视图,选中插槽

切换到组件视图,增加列表元素组件

第一个组件放置好后,就需要考虑如何展示菜谱的信息,思路是需要在组件上做数据绑定,我们还是先定义变量来获取菜谱的信息

点击变量管理

我们先需要在详情页定义一个参数变量,用来接收列表页面传递过来的参数,记着变量的名称要和列表页低代码里命名保持一致

然后定义一个状态变量来获取菜谱的具体信息,我们选择的是调用数据源的获取单条方法

获取单条需要传入参数,我们点击旁边的超链接图标绑定我们刚才定义好的参数变量

变量定义好后我们就可以将变量绑定到组件上啦,还是点击组件的超链接图标,我们将组件的右侧内容绑定为刚才定义的变量的title字段

绑定好的效果如下图

按照上述方法依次将菜谱的其他信息都设置好

这样查看页面就做好了。

数据查询的功能做好后,我们就接着开发新增的功能,我们先在列表页面上增加一个按钮,用来引导新增页面

我们给按钮定义个点击事件,选择平台的方法导航就可以

添加好后我们需要创建新增页面,在页面管理增加一个页面即可

回到列表页面将按钮的导航页面设置为刚才的页面

接着在新增页面先放置一个表单容器

依次放入表单输入组件

这里需要注意的地方是表单字段名称要和我们数据源定义的字段名称一一对应

输入项都设置好后,我们增加一个按钮组件,将按钮用于form组件属性那块设置成提交

然后选中表单容器组件,给表单容器定义事件,选中数据源即可

添加好后和我们的数据源进行绑定,方法的话选中创建单条记录就可以,这样新增功能就做好了。

功能开发好后,我们点击预览发布,选中实时预览,编译成功后就可以在手机上体验啦

我已经成为微搭的第一批体验会员,教程展示的小程序也已上线,欢迎在线体验

THE END
1.美食菜谱排行榜前十名APP推荐美食菜谱排行榜前十名下载一百万图文视频菜谱为您服务 我们是【美食杰-養】 这是一款多次推荐的美食菜谱APP 这是一款获得世界美食家大奖提供的美食菜谱APP 如果您是美食杰的新朋友,我想先向您介绍已经十二岁的 美食杰-養 这家初创公司 美食杰-養 成立于2007年 我们一直是国内非常领先的菜谱网站,至今拥有中国及国外图文菜谱及菜谱视频100万篇。https://www.wandoujia.com/bangdan/568081/
2.乐·降每周菜谱(第十四周)金果周五●食谱午餐金汤海鲜盖浇饭木耳菜油豆腐碎炒黑木耳菠菜蟹味菇粉丝汤午点红糖蒜白水芝士粢饭条红美人果冻橙下周菜谱周一●食谱早点牛奶趣多多王子曲奇小猪佩奇蔓越莓曲奇菜园小饼午餐白米饭双色萝卜炖羊肉丁(托小班)双色萝卜炖羊肉块(中大班)塔菜烩百叶丝冬笋荠菜银鱼羹https://mp.weixin.qq.com/s?__biz=MzA4NzU5NzM4MA==&mid=2766648367&idx=3&sn=4f2b7c727d87a9a797ebf1448083c9d7&chksm=b1241c04865395125c5037126550048fe0b3e44cbc8dd60d34e389050bbe01975d85bfbaa21c&scene=27
3.探索美食新境界:微信小程序“餐饮美食降菜谱”推荐健康食谱专区:特别提供减肥类菜谱、美容类菜谱以及针对基础疾病的病人疗养菜谱,满足不同用户的健康需求。 用户互动社区:用户可以在平台上分享自己的烹饪心得,与其他美食爱好者交流互动,形成一个活跃的美食社区。 结语 “餐饮美食-健康菜谱”微信小程序不仅是一个菜谱查询工具,更是一个美食爱好者的交流平台。我们诚邀您加https://blog.csdn.net/gitblog_09750/article/details/141977605
4.十大好用的美食菜谱app厨房小白新手下厨必备的学做菜视频app→MAIGOO小编特地给大家整理了十大好用的美食菜谱app排行榜,包含下厨房APP、豆果美食APP、香哈菜谱app、好豆菜谱app、美食杰App、美食天下app等国内好用的做菜手机软件,还包含专门烘焙的烘焙帮app、适合新手的懒饭app、智能做菜软件西顿美食APP等特色做菜手机软件,想要学做菜的小伙伴们赶紧去下载一款适合你的菜谱软件,跟着https://m.maigoo.com/goomai/207069.html
5.求做菜菜谱类的小程序吾爱破解hkbaby 于 2020-11-26 14:23 编辑 求做菜 菜谱类的小程序源码 或者健康类小程序源码也可以啊 https://www.52pojie.cn/thread-1314714-1-1.html
6.抖音菜谱类小程序奇迹天下抖音菜谱类小程序 需要的可以联系个人微信:https://www.cnblogs.com/qi164292564/p/13471362.html
7.最新小程序大全,探索小程序世界的精彩SDK下载生活类小程序 1、美食菜谱大全 对于喜欢烹饪的朋友来说,这款小程序是必备的,它提供了海量的菜谱,涵盖了各种菜系,用户可以根据食材、口味等条件进行搜索,它还能推荐附近的餐厅、美食,让用户轻松找到美食。 2、健身助手 健身已经成为现代人追求健康的一种方式,这款小程序可以帮助用户制定健身计划、记录运动数据、提供健https://yousha.cc/post/5098.html
8.家庭菜谱(微信小程序)源码,其他类别,Asp.net源码微信小程序demo家庭菜谱,欢迎大家下载学习。 源码类型: 微信 开发环境: 其他 + 无数据库 开发语言: HTML5 标签: HTML5 微信小程序 评分: 收藏104 次|关注2034 次|下载192 次 免费 交付物:?源码包立即下载 商家已实名认证 xiaot*** 进入店铺 https://www.51aspx.com/cv/wechathomerecipes
9.降菜谱完整版小程序源码下载在这里,我们给大家提供了健康菜谱这篇不错的小程序源码,程序大概有2.79MB,内容涉及到:美容、减肥,养生等热门分类的菜谱内容,以及根据人群、时节、器官等细分体系。 菜谱小程序下载健康菜谱源码 下载地址 下载错误?【投诉报错】 本资源由用户投稿上传,内容来自互联网,本站只做免费推荐用于学习分享,如有版权及其他问题https://www.jb51.net/codes/662019.html
10.“今天吃什么”调查问卷5. 您使用菜谱类app或小程序的频率是? A. 每天B. 每周C. 每月D. 很少使用 6. 您使用菜谱类app或小程序的主要目的是? A. 查找菜谱B. 学习厨艺技巧C. 分享自己的菜谱D. 管理食材库存E. 其他 7. 您是否会根据菜谱类app或小程序的推荐购买厨房用品? A. 会B. 不会 8. 您是否会根据菜谱类app或小程序https://www.wjx.cn/xz/225048787.aspx
11.小程序美食菜谱模板。wxml+wxss学生作业毕设静态小程小程序 美食菜谱模板。wxml+wxss学生作业毕设静态小程序,微信开发者工具可直接打开,无需后端。 要源码的,或者其他类型主题内容,技术服务请私~#软件开发 #程序员 #代码 #html #前端 - 小铭软件开发于20231117发布在抖音,已经收获了32个喜欢,来抖音,记录美好生活!https://www.douyin.com/note/7302280245107903795
12.各行业微信小程序服务类目介绍(最新)菜谱无 餐饮服务场所【3选1】 ● 《食品经营许可证》 ● 有效期内餐饮服务场所公共场所的《卫生许可证》 ● 《餐饮平台与门店的管理关系声明》及《旗下门店名单和对应门店的卫生许可证》及《微信小程序餐饮门店运营资质和责任承诺函》 餐厅排队无 旅游旅游线路无 https://www.vmiaopu.com/help/101.html
13.微信小程序实用食谱小程序最近,我想让自己玩一个小程序,但是由于我是后端服务器,所以我对微信小程序的开发确实不了解太多,尤其是对于CSS样式。 ,而且还没有开始的方法,所以我只能从夜晚找到一个演示,对其进行一些修改,然后再上线。从本质上讲,它是小程序开发简单过程的完整指南,本文是对该实践的简要介绍。 https://m.bjhwtx.com/h-nd-9394.html
14.微信小程序源代码下厨房菜谱APP开发实例源码下载微信小程序源代码-下厨房菜谱APP 一般编程问题 下载此实例 开发语言:Others 实例大小:2.81M 下载次数:29 浏览次数:736 发布时间:2021-01-12 实例类别:一般编程问题 发布人:好学IT男 文件格式:.rar 所需积分:2 网友评论举报投诉收藏该页 同类人气实例https://www.haolizi.net/example/view_154708.html
15.下厨房+微信小程序上线:菜谱分享平台如果你想亲自下厨,却不知道菜谱,今天小编就和大家推荐一下一个菜谱分享平台的小程序-下厨房+微信小程序,下面就和大家详细的介绍一下下厨房+微信小程序? 一、下厨房+微信小程序介绍 1.下厨房+微信小程序它是一款专美食服务菜谱分享平台小程序 2.使用这个微信小程序,可以找到自己喜欢的食物,学习上面食物的做法,自己可https://www.finclip.com/news/f/68118.html
16.降菜谱微信小程序毕业论文+项目前后台源码(JavaSSM+Mysql)随着人们生活水平的提高,人们对健康营养的需求越来越高,人们对生活品质的追求。很多不健康的生活菜单融入我们的生活,开发健康菜谱小程序,不单只局限于分享菜式的制作方式,更多的是分享着一种新的生活方式和健康理念。本设计通过进行实践调查确定系统的存在意义和价值。 https://blog.51cto.com/u_15127639/2873046
17.企业主体开放服务类目小程序a.?第三方算法服务的《互联网信息服务算法备案》截图,算法类型为“生成合成类”;? b.?第三方算法服务的《互联网信息服务算法备案》公示内容;? c.?小程序主体与第三方算法服务之间的合作协议 ,协议内容须包含【算法名称】、【应用产品】、【备案编号】相关内容? 适用于用户端文本、音视频等形式输入https://microapp.bytedance.com/docs/zh-CN/mini-app/operation/standard/open-service-catalog/commercial-service-category/
18.微信小程序实战视频课第2章美食类:仿菜谱精灵微信小程序.pdf浏览人气:66 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币(10金币=人民币1元) 微信小程序实战视频课第2章 美食类:仿菜谱精灵微信小程序.pdf 关闭预览 想预览更多内容,点击免费在线预览全文 免费在线预览全文 微信小程序实战视频课第2章美食类:仿菜谱精灵微信小程序.p微信小程序实战视频课第2章美食类https://max.book118.com/html/2022/0311/7055023132004101.shtm
19.云开发版仿京细菜谱小程序源码京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程 让您轻松学会做美食。对不同食材和地域的饮食做了不同的分类和详细的做菜方法 分类十分详细,八大菜系、特色食品、特殊场合、热门功效、人群细分、烘焙甜品、口味和食材分类的十分详细。 本菜谱小程序https://www.liues.cn/8088.html
20.亲测2022最新微信云开发版仿京细美食菜谱小程序源码,附带流量主真正的美食,从来只在厨房——我们自己用心烹饪出来的美食。 在这里,你可以认识食材、学习菜谱, 哪怕你是一个小白,也能在短时间内成为烹饪达人。 做美食文化、美食艺术的传承者~ 本期推荐的是2022最新仿京细菜谱微信小程序源码: 小程序上面分类十分详细,八大菜系、特色食品、特殊场合、热门功效、人群细分、烘焙甜品https://www.goww.net/575.html
21.仿京细菜谱微信小程序源码云开版–仿京细菜谱微信小程序源码云开版 仿京细菜谱微信小程序源码云开版,不需要域名和服务器即可搭建小程序,直接导入开发者工具即可上传审核。整体测试了下还算完善,也不需要更新和配置什么,无后台文件改下标题即可使用,数据也会自动更新无需维护。https://www.ttbobo.com/1771.html