点餐小程序实战教程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.hqwc.cn/news/127766.html

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

相关文章

【微信小程序开发】宠物预约医疗项目实战-登录实现

【微信小程序开发】宠物预约医疗项目实战-登录实现 第二章 宠物预约医疗项目实战-注册实现 文章目录 【微信小程序开发】宠物预约医疗项目实战-登录实现前言一、打开项目文件二、编写代码2.1 wxss代码编写2.2 wxml代码编写2.3 js代码编写2.3.1 登录接口获取: 2.4 j…

【uniapp】小程序开发6:自定义状态栏

一、自定义状态栏 可以设置某个页面的状态栏自定义或者全局状态栏自定义。 这里以首页状态栏为例。 1)pages.json 中配置"navigationStyle": "custom",代码如下: {"pages": [ {"path": "pa…

数据结构与算法(六):堆

参考引用 Hello 算法 Github:hello-algo 1. 堆 堆(heap)是一种满足特定条件的完全二叉树,主要可分为下图所示的两种类型 小顶堆 min heap:任意节点的值 ≤ 其子节点的值大顶堆 max heap:任意节点的值 ≥ 其…

使用Docker安装JupyterHub

安装JupyterHub 拉取Jupyter镜像并运行容器 docker run -d -p 8000:8000 --name jupyterhub jupyterhub/jupyterhub jupyterhub # -d:后台运行 # -p 8000:8000:宿主机的8000端口映射容器中的8000端口 # --name jupyterhub:给运行的容器起名…

漏洞复现--中远麒麟堡垒机SQL注入

免责声明: 文章中涉及的漏洞均已修复,敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

轻量级接口自动化测试框架

大致思路: jmeter完成接口脚本,Ant完成脚本执行并收集结果生成报告,最后利用jenkins完成脚本的自动集成运行. 环境安装: 1.jdk1.7 配置环境变量(参考前面的分页) 2.jmeter解压到本地,ant解压到本地 3.Ant解压到本地,并配置环境变量 ANT_HOME:D:\jmeter\apache-ant-1.9.6 P…

flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https:/…

计算机竞赛 题目: 基于深度学习的疲劳驾驶检测 深度学习

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 🔥 优…

css记录写一个奇怪的按钮

完成作业的时候发现一个很有意思的按钮&#xff0c;记录一下记录一下 看看界面 可以看出是一个奇形怪状的按钮&#xff0c;而且在按下的时候&#xff0c;图片和文字的颜色会改变 尝试解决 <!DOCTYPE html> <html lang"zh"> <head><meta chars…

通过ElementUi在Vue搭建的项目中实现CRUD

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专栏…

kafka的请求处理机制

目录 前言&#xff1a; kafak是如何处理请求的&#xff1f; 控制请求与数据类请求 参考资料 前言&#xff1a; 无论是 Kafka 客户端还是 Broker 端&#xff0c;它们之间的交互都是通过“请求 / 响应”的方式完成的。比如&#xff0c;客户端会通过网络发送消息生产请求给 B…

给 Linux0.11 添加网络通信功能 (Day1: 确认 qemu-system-i386 提供了虚拟网卡)

感觉单纯读闪客的文章&#xff0c;以及读 Linux0.11 源码&#xff0c;而不亲自动手做点什么&#xff0c;很难学会&#xff0c;还是得写代码 定个大目标&#xff1a;给 Linux0.11 添加网络通信功能 今日的小目标&#xff1a;先确认 qemu-system-i386 提供了网卡功能 here we …