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

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

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

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

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

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

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

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

打开控制台,点击数据源,点击+号新增

输入数据源的名称菜品分类

点击编辑按钮进入到字段添加视图

添加第一个字段,分类名称,类型选择文本

添加第二个字段,分类图标,类型选择图片

添加第三个字段,序号,类型选择自动编号,从1开始编号

接着再添加一个菜品信息的数据源

添加第一个字段菜品名称,类型选择文本

添加第二个字段,菜品简介,类型选择文本

添加第三个字段,菜品图片,类型选择图片

添加第四个字段,菜品价格,类型选择数字

添加第五个字段状态,类型选择枚举,枚举值分为上架和下架

最后一个字段是分类ID,类型选择关联关系

2 菜品分类功能开发

菜品分类我们使用侧边选项卡,从右侧的组件区拖入侧边选项卡

侧边选项卡我们要从数据源读取菜品分类,点击代码区的新建按钮,我们创建一个数据表查询

选择菜品分类数据源,触发方式选择入参变化时自动执行,方法选择查询多条

然后配置我们的选项卡,标签用表达式绑定,表达式如下

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

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

javascript 复制代码
$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语法的不熟悉上,还是要把基础打扎实了才能按照自己的想法开发出功能来。

相关推荐
feasibility.6 小时前
在OpenCode使用skills搭建基于LLM的dify工作流
人工智能·低代码·docker·ollama·skills·opencode·智能体/工作流
2501_915918418 小时前
常见 iOS 抓包工具的使用,从代理抓包、设备抓包到数据流抓包
android·ios·小程序·https·uni-app·iphone·webview
焦糖玛奇朵婷10 小时前
盲盒小程序开发科普:核心玩法与功能解析
大数据·数据库·程序人生·小程序·软件需求
玛雅牛牛12 小时前
生鲜小程序新手如何选
大数据·小程序
CHU72903512 小时前
一番赏盲盒小程序前端功能:层级乐趣与便捷服务的双向赋能
前端·小程序
你的眼睛會笑12 小时前
微信小程序 SpeechSynthesizer 实战指南
微信小程序·小程序·notepad++
你的眼睛會笑12 小时前
微信小程序定位权限获取最佳实践
微信小程序·小程序·notepad++
liu_bees12 小时前
微信小程序Canvas生成图片失败:canvas is empty问题解析
微信小程序·小程序·uni-app·vue
码农客栈12 小时前
小程序学习(十七)之获取热门推荐数据类型并渲染
小程序
IT研究所13 小时前
信创浪潮下 ITSM 的价值重构与实践赋能
大数据·运维·人工智能·安全·低代码·重构·自动化