点餐小程序实战教程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语法的不熟悉上,还是要把基础打扎实了才能按照自己的想法开发出功能来。

相关推荐
快乐非自愿5 小时前
2026 IDC认证低代码平台TOP7|制造业/政务场景可直接复用
人工智能·低代码·制造·政务
mykj15515 小时前
不止简单下单,代驾小程序系统打造完整智慧出行服务
小程序·代驾小程序开发·代驾小程序定制·代驾app软件
從南走到北6 小时前
JAVA无人共享系统无人场馆预约篮球系统源码支持小程序+公众号+APP+H5
java·开发语言·小程序
码农学院6 小时前
基于小程序云开发与Node.js的餐饮行业AI优化方案:智能推荐与订单预测实战
人工智能·小程序·node.js
图扑软件1 天前
其域创新 × 图扑软件|3DGS 高斯泼溅智慧钢厂实景孪生
前端·低代码·3d·编辑器·图形渲染·可视化
mykj15511 天前
教培机构考公刷题小程序系统开发,降本增效稳续费
小程序·考公刷题小程序·刷题app开发
投票竞赛1 天前
6 类细分场景在线投票工具,微信小程序亲测测评精准匹配对应评选需求
小程序
这是个栗子2 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
canonical-entropy2 天前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
低代码·ddd·函数式编程·可逆计算·nop平台
quweiie2 天前
thinkphp8结合jwt与微信小程序接口鉴权
微信小程序·小程序·thinkphp接口·接口鉴权