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

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

相关文章
ly~
|
7天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
38 6
|
6天前
|
JSON 小程序 前端开发
创建一个属于自己的小程序(注册开发账号)
介绍如何创建微信小程序账号,包括注册流程、下载安装微信开发者工具、创建项目以及项目结构介绍。
创建一个属于自己的小程序(注册开发账号)
ly~
|
6天前
|
开发框架 小程序 前端开发
抖音小程序的开发难度大吗?
抖音小程序的开发难度因人而异,主要取决于开发者经验、技能及功能需求。技术上需掌握前端技术及抖音开发框架,了解平台生态与规则;设计上需符合用户审美和习惯,具备创新性和实用性。此外,严格的审核标准和激烈的市场竞争增加了开发难度,开发者需制定有效推广策略并持续优化小程序以保持竞争力。
ly~
39 4
|
6天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
27天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
16天前
|
小程序 前端开发 JavaScript
Java开发工程师转小程序开发的前景如何?
Java开发工程师转小程序开发的前景如何?
26 0
|
25天前
|
小程序 前端开发 JavaScript
开发支付宝小程序的思路
【9月更文挑战第7天】本文介绍了一种在支付宝小程序中实现网页抓取的方法,通过云函数或自建后端服务来解析外部网页的标题、描述和图片。具体步骤包括:用户输入链接,小程序调用云函数抓取并解析网页内容,最后将结果返回并在前端展示。文中详细介绍了使用 Node.js 的云函数实现过程,包括代码示例和小程序前端页面的实现方法。通过这种方式,可以显著提升链接分享的用户体验。
32 0
下一篇
无影云桌面