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

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

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

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

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

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

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.rhkb.cn/news/151284.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】stack/queue/deque

目录 一、stack 1.1 stack的接口 1.2 关于使用stack的例题 1.2.1 最小栈 1.2.2 栈的压入、弹出序列 1.2.4 逆波兰表达式求值 1.3 stack的模拟实现 二、queue 2.1 queue的接口 2.2 queue的模拟实现 三、deque 3.1 deque底层实现原理 3.1.1 头插实现原理 3.1.2 尾插…

Cocos Creator3.8 项目实战(五)背景无限滚屏效果如何实现

在游戏中,我们经常会实现背景无限滚动的效果。那这些效果是怎么实现的呢? 原理很简单,就是使用多张背景图,每张图,每一帧都同时移动,当图移出屏幕外时,将其位置设置到下一张图的初始位置&#x…

加速attention计算的工业标准:flash attention 1和2算法的原理及实现

transformers目前大火,但是对于长序列来说,计算很慢,而且很耗费显存。对于transformer中的self attention计算来说,在时间复杂度上,对于每个位置,模型需要计算它与所有其他位置的相关性,这样的计…

10.8c++作业

#include <iostream>using namespace std; class Rect {int width; //宽int height; //高 public://初始化函数void init(int w,int h){widthw;heighth;}//更改宽度void set_w(int w){widthw;}//更改高度void set_h(int h){heighth;}//输出矩形周长和面积void show(){co…

【ORACLE】ORA-00972:标识符过长

问题 执行创建表结构sql&#xff0c;提示 ORA-00972&#xff1a;标识符过长&#xff1b; 如图所示&#xff0c;约束名称超过30个字符了 原因 一、11G and before 在使用11G数据库时&#xff0c;经常会遇到报错ORA-00972&#xff0c;原因是因为对象名称定义太长&#xff0c…

C++——继承

什么是继承 继承是两个类之间的关系&#xff0c;可以实现派生类&#xff08;子类&#xff09;对基类&#xff08;父类&#xff09;的复用&#xff0c;即派生类在基类的基础上进行扩展&#xff0c;实现更多功能。例如学生和人这两个对象就可以是继承关系&#xff0c;学生具有人…

基于Dockerfile搭建LNMP

目录 一、基础环境准备 1、环境前期准备 二、部署nginx&#xff08;容器IP 为 172.18.0.10&#xff09; 1、配置Dockerfile文件 2、配置nginx.conf文件 3、构建镜像、启动镜像 三、部署mysql 1、配置Dockerfile文件 2、配置my.conf文件 3、构建镜像、启动镜像 5、验…

【Linux】Vim使用总结

【Linux】Vim使用总结 Vim 的三种模式命令行模式1. 移动2.复制&#xff0c;粘贴&#xff0c;剪切3.撤销4.大小写切换&#xff0c;替换&#xff0c;删除 插入模式底行模式 Vim 的三种模式 一进入VIM就是处于一般模式&#xff08;命令模式&#xff09;&#xff0c;该模式下只能输…

flink双流join结果数据重复问题排查

1.背景 Kafka的两个topic&#xff0c;topic1 为用户下单明细记录&#xff08;包含订单基本信息&#xff09;&#xff0c;topic2为下单渠道记录&#xff08;包含下单来源和渠道内容设备相关的信息&#xff09; &#xff0c;要求实时统计每分钟内所有订单下的渠道来源分布详情。具…

使用Windows系统自带的安全加密解密文件操作步骤详解

原以为安全加密的方法是加密压缩包&#xff0c;有的需要用软件加密文件&#xff0c;可每次想往里面修改或存放文件都要先解密&#xff0c;不用时&#xff0c;还得去加密&#xff0c;操作步骤那么多&#xff0c;那多不方便呀&#xff0c;这里讲讲用系统自带的BitLocker加密工具怎…

【SQL】MySQL中的约束

1. 主键约束&#xff08;primary key&#xff09;&#xff1a; 相当于唯一约束非空约束分为单列主键&#xff0c;多列联合主键&#xff0c;一个表只有一个主键多列联合主键的每列都不能为空 2. 自增长约束&#xff08;auto_increment&#xff09;&#xff1a; 用在单列主键后…

Acwing.889 满足条件的01序列

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

10_8C++

X-Mind #include <iostream>using namespace std; class Rect { private:int width;int heigjt; public:void init(int w,int h){width w;heigjt h;}void set_w(int w){width w;}void set_h(int h){heigjt h;}void show(){cout << "矩形的周长" <…

day10.8ubentu流水灯

流水灯 .text .global _start _start: 1.设置GPIOE寄存器的时钟使能 RCC_MP_AHB4ENSETR[4]->1 0x50000a28LDR R0,0X50000A28LDR R1,[R0] 从r0为起始地址的4字节数据取出放在R1ORR R1,R1,#(0x1<<4) 第4位设置为1STR R1,[R0] 写回2.设置PE10管脚为输出模式 G…

okhttp4.11源码分析

目录 一&#xff0c;OKHTTP时序图 二&#xff0c;OKHTTP类图 三&#xff0c;OKHTTP流程图 一&#xff0c;OKHTTP时序图 上图是整个okhttp一次完整的请求过程&#xff0c;时序图里面有些部分为了方便采用了简单的描述&#xff0c;描述了主要的流程&#xff0c;细节的话&#…

基于SSM+Vue的物流管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;VueHTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 …

Day-06 基于 Docker 安装 Nginx 镜像

1.去官方公有仓库查询nginx镜像 docker search nginx 2.拉取该镜像 docker pull nginx 3. 启动镜像&#xff0c;使用nginx服务&#xff0c;代理本机8080端口(测试是不是好使) docker run -d -p 8080:80 --name nginx-8080 nginx docker ps curl 127.0.0.1:8080

Bridge Champ助力我国桥牌阔步亚运, Web3游戏为传统项目注入创新活力

本届杭州亚运会,中国桥牌队表现杰出,共斩获1金1银1铜佳绩,其中女子团体夺得冠军,混合团体获得亚军。这充分展现了我国桥牌的实力,也彰显了桥牌作为亚运会体育竞技项目的影响力。与此同时,Web3游戏Bridge Champ为传统桥牌项目带来创新模式,将有望推动桥牌运动在亚运舞台上焕发新…

【数据结构】选择排序 堆排序(二)

目录 一&#xff0c;选择排序 1&#xff0c;基本思想 2&#xff0c; 基本思路 3&#xff0c;思路实现 二&#xff0c;堆排序 1&#xff0c;直接选择排序的特性总结&#xff1a; 2&#xff0c;思路实现 3&#xff0c;源代码 最后祝大家国庆快乐&#xff01; 一&#xf…

双字单字拆分/合并操作(博途SCL源代码)

博途PLC的位、字节拆分和合并操作还可以参考下面的文章链接: 博途PLC 位/字/字节 Bit/ Word/Byte拆分与合并_博途的bit-CSDN博客有时候我们需要将分散分布的开关量信号组合为一个整体比如一个字节再完成发送,或者一些报警联锁控制,组合为一个字方便触摸屏报警记录等,下面我…