点餐小程序实战教程06-首页开发

news2024/11/28 9:44:37

用户注册功能开发好了之后,我们就要开发小程序,首先我们是规划小程序的功能模块,我们一共是四个模块,分别是首页、订单、消息和我的。

首页我们主要是点餐的功能,可以选择菜品,加入到购物车,然后进行结算。

订单主要是查看自己已经提交的订单,如果不需要了可以进行取消。

消息主要是接收一些通知,比如商家已经接单的通知,退单同意的通知。不同的角色接收到的通知不同,商家也可以在消息里进行订单的进一步处理。

我的主要是查看历史的订单,修改配送地址,联系商家。如果是其他角色可以在我的页面继续操作其他功能。

1 创建菜品分类以及菜品信息的数据源

功能规划好之后,我们先需要创建数据源,先创建菜品分类的数据源

打开控制台,点击数据源,点击+号新增
在这里插入图片描述
输入数据源的名称菜品分类
在这里插入图片描述
点击编辑按钮进入到字段添加视图
在这里插入图片描述
添加第一个字段,分类名称,类型选择文本
在这里插入图片描述
添加第二个字段,分类图标,类型选择图片
在这里插入图片描述
添加第三个字段,序号,类型选择自动编号,从1开始编号
在这里插入图片描述
接着再添加一个菜品信息的数据源
在这里插入图片描述
添加第一个字段菜品名称,类型选择文本
在这里插入图片描述
添加第二个字段,菜品简介,类型选择文本
在这里插入图片描述
添加第三个字段,菜品图片,类型选择图片
在这里插入图片描述
添加第四个字段,菜品价格,类型选择数字
在这里插入图片描述
添加第五个字段状态,类型选择枚举,枚举值分为上架和下架
在这里插入图片描述

在这里插入图片描述
最后一个字段是分类ID,类型选择关联关系
在这里插入图片描述

2 菜品分类功能开发

菜品分类我们使用侧边选项卡,从右侧的组件区拖入侧边选项卡
在这里插入图片描述
侧边选项卡我们要从数据源读取菜品分类,点击代码区的新建按钮,我们创建一个数据表查询
在这里插入图片描述
选择菜品分类数据源,触发方式选择入参变化时自动执行,方法选择查询多条
在这里插入图片描述
然后配置我们的选项卡,标签用表达式绑定,表达式如下

$w.categroy.data.records.map(item=>({"label":item.flmc,"value":item._id}))

选中项也用表达式绑定,表达式如下

$w.categroy.data.records[0]._id

在这里插入图片描述
这里讲解一下配置思路,首先就是微搭通过变量的路径来访问自定义变量,具体的路径可以在左侧的代码区复制变量路径
在这里插入图片描述
我们可以看到当我们鼠标移动到变量的时候可以看到运行值,当前返回了Object,Object在javascript表示对象的意思,对象的语法是使用一对儿大括号包裹,里边是对象的属性和方法。属性的形式是键值对,左边是键右边是值。

如果需要访问对象的属性可以使用点的语法,比如我们现在访问$w.categrory.data就表示访问了category对象的data属性,如果我们展开data属性,发现它继续有属性,里边有个records属性
在这里插入图片描述
它的类型数Array,Array表示数组,用一对儿中括号表示,如果希望访问数组里的元素,我们可以用下标来访问,第一个元素的下标是0

选项卡组件要求传入的数据结构是[{“label”:“”,“value”:“”}]的形式,我们因此改造一下数组里的元素,使用了数组的map方法,map方法会迭代数组,重新加工数组的元素。

我们这里使用了箭头函数来对元素进行加工,对元素重新构造了一下属性,label我们从数组项的分类名称字段取,value我们取的是数据标识

默认选中标签我们是取的数组的第一个元素的数据标识字段,设置好之后就有了上述的效果

总结

本篇我们介绍了菜品分类、菜品信息数据源的创建方法,规划了具体的字段信息。接着介绍了侧边栏导航功能的开发,讲解了如何定义数据表查询,如何使用侧边选项卡组件。

初学者比较困惑的就是组件属性的fx绑定时候该怎么弄,主要是欠缺在了javascript语法的不熟悉上,还是要把基础打扎实了才能按照自己的想法开发出功能来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1069973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

deckGL自定义图层学习笔记

1.自定义图层 当使用DeckGL提供的图层还无法满足需求时(https://deck.gl/docs/api-reference/layers),可能就需要自定义图层了。在DeckGL中有常见的三种自定义图层的方式 创建复合层(composite layers.)——复合层是一…

ffmpeg从一个视频中提取音频

ffmpeg -i ~/video/video.mp4 -vn -acodec copy ~/video/audioFile.m4a 从video.mp4中提取音频到文件audioFile.m4a中 查看提取的音频文件 ffprobe ~/video/audioFile.m4a

OneDrive下的OneNote扩容方法,及查看OneDrive容量的方法(详细图文教程)

目录 一、内存不足的问题二、土豪续费扩容法三、X宝扩容法3.1 购买链接3.2 登录接口3.3 详细图文操作过程3.3.1 获取链接:3.3.2 用订单号和获取链接扩容: 3.4 扩容后的容量 四、查看自己OneDrive的容量五、总结 一、内存不足的问题 一直都在用OneNote记…

STM32H723 CubeMX 三路FDCAN 代码

时钟频率 FDCAN1 设置250kbit/s FDCAN2 设置500kbit/s FDCAN3 设置500kbit/s fdcan.c /* USER CODE BEGIN Header */ /********************************************************************************* file fdcan.c* brief This file provides code fo…

【刷题篇】回溯算法(深度优先搜索(二))

文章目录 岛屿数量电话号码的字母组合组合总和活字印刷 岛屿数量 给你一个由 ‘1’(陆地)和 ‘0’(水)组成的的二维网格,请你计算网格中岛屿的数量。 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直…

CentOS7.9中使用packstack安装train版本

这里写目录标题 材料准备为什么选择packstack安装静态ip系统配置使用阿里云yum源安装packstack部署openstack 安装成功和后续使用all in one模式下虚拟机外网和浮动ip原理讲解nat网桥的创建方法 材料准备 ecs云服务器8核心16g内存一台,系统盘100GB,系统…

2.2 数据通信的基础知识

前言: 2.2.1 数据通信的基础知识 **笔记**:2.2.1 数据通信系统的模型 --- **1. 数据通信系统组成**: - 三大部分: 1. 源系统 (发送端) 2. 传输系统 (传输网络) 3. 目的系统 (接收端) --- **2. 源系统**: -…

vue-4

一、文章内容概括 1.组件的三大组成部分(结构/样式/逻辑) ​ scoped解决样式冲突/data是一个函数 2.组件通信 组件通信语法父传子子传父非父子通信(扩展) 3.进阶语法 v-model原理v-model应用于组件sync修饰符ref和$refs$nex…

SAP SMARTFORMS 文本框显示默认浏览器

问题描述:新上的SAP系统SMARTFORMS文本框显示浏览器,导致无法拉取系统变量 解决方法: 类CL_COS_UTILITIES做隐式增强 IF sy-tcode SMARTFORMS.rv_is_s4h .ENDIF. 然后执行程序:RSCPSETEDITOR 把这俩√去掉后激活即可

MISRA C 2012 阅读笔记

背景 C语言诞生至今已有50年,因其语言简洁,语法丰富,可移植性高,和执行效率高等优点,至今仍保持着强大的生命力,在各个行业发挥着作用。 然而C语言的一些优点有时候也是一把双刃剑,在使用者使用…

Acwing.886 求组合数Ⅱ

题目 给定n组询问&#xff0c;每组询问给定两个整数a&#xff0c; b&#xff0c;请你输出 的值。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含—组a和b。 输出格式 共n行&#xff0c;每行输出—个询问的解。 数据范围 1<n≤10000, 1 <b<a≤105…

Acwing.889 满足条件的01序列

题目 给定n个0和n个1&#xff0c;它们将按照某种顺序排成长度为2n的序列&#xff0c;求它们能排列成的所有序列中&#xff0c;能够满足任意前缀序列中0的个数都不少于1的个数的序列有多少个。 输出的答案对109&#xff0b;7取模。 输入格式 共一行&#xff0c;包含整数n。 …

【python】python虚拟环境--20231008

https://blog.csdn.net/m0_69023493/article/details/129158656 安装好python和pip 略 新建python虚拟空间 安装virtualenv pip install virtualenv -i https://pypi.tuna.tsinghua.edu.cn/simple安装virtualenvwrapper-win&#xff08;可选&#xff09; pip install vir…

软件测试/测试开发丨接口测试学习笔记-常见的接口协议

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27726 一、网络模型 二、常见接口协议 RPC协议 RPC(remote procedure call)以本地代码调用的方式实现远程执行主要用于公司内部的服务调用 优点 传输效…

3分钟轻松实现网关网口连接罗克韦尔AB CompactLogix系列PLC

目录 EG网关网口连接罗克韦尔AB CompactLogix系列PLC 一. 准备工作 1.1 在对接前我们需准备如下物品 1.2 EG20网关准备工作 1.3 PLC准备工作 二. EMCP平台设置 2.1 新增EG设备 2.2 远程配置网关 2.3 网关绑定 2.4 通讯参数设置 2.5 创建设备驱动 2.5.1 添加变量 2.…

springcloud之项目实战搭建单体

写在前面 在上篇文章 中我们介绍了项目的整体内容以及架构&#xff0c;本文就开始实现一个单体的版本&#xff0c;在之后的文章中&#xff0c;在使用springcloud相关组件将这个单体的版本一步步的拆分为微服务的版本&#xff0c;在开始之前再贴下组件图&#xff1a; 本文我们分…

win11 vscode配置c/c++,使用mingw编译器

文章目录 第一步&#xff1a;装好vscode第二步&#xff1a;下载 mingw创建一个文件夹作为C或者C的项目文件夹&#xff0c;用vscode打开 第一步&#xff1a;装好vscode 之前使用python时装过 第二步&#xff1a;下载 mingw 官网 3.从这个界面一直往下滑 找到&#xff1a; 下…

是真的吗?Nuture子刊告诉你这么多年的微生物组经验都是错的?!

发表期刊&#xff1a;Nature Microbiology 发表时间&#xff1a;2023 影响因子&#xff1a;28.3 DOI: 10.1038/s41564-023-01426-7 在过去的二十年里&#xff0c;人们对人类微生物组研究的兴趣呈指数级增长&#xff0c;同时伴随而来的一系列相关研究的文献发表数目也是逐年递…

通过cri-o部署k8s集群环境

目录 一.基础环境配置&#xff08;每个节点都做&#xff09; 1.hosts解析 2.防火墙和selinux 3.安装基本软件并配置时间同步 4.禁用swap分区 5.更改内核参数 6.配置ipvs 7.k8s下载 &#xff08;1&#xff09;配置镜像下载相关软件 &#xff08;2&#xff09;配置kube…

B站数据分析,UP主粉丝画像如何看?

随着互联网的发展&#xff0c;在大数据时代的今天&#xff0c;越来越多的企业用它们来指导精准营销&#xff0c;数据资源成为各大公司竞相追逐的香饽饽&#xff0c;而对于短视频广告投放来说&#xff0c;了解账号的粉丝人群画像&#xff0c;就可以知道他们的喜好厌恶&#xff0…