小程序开发 点餐 第1篇
我们的项目开发多多少少的都会用到用户的一些信息，比如头像，昵称，性别等。而这些信息的获取，小程序也为我们提供好了方法。
对应的文档：
使用这个方法可以获取如下的用户信息
有的同学用这个方法时，不会弹起上面的弹窗，有可能是因为基础库版本太低，这里建议升级到最新版的基础库。
等下视频课程里会带着大家一起敲代码，这里先把一些核心代码贴出来。其实核心代码官方文档里有提供的。 这里为了方便日后大家使用，我贴出来给到大家。这里要注意 desc必须保留，里面的描述尽量写的规范些。因为
其实这里倒是挺简单，重点知识只有一个圆形图片的实现这里只需要一个image组件和一个text组件即可。通过css的border-radius就可以来设置圆形图像了，我小程序基础里也有讲过的，核心代码如下。
这里缓存我们主要用到了 对应的官方文档：
如下图所示，就是我们的本地缓存数据
对应的官方文档：
我这里把wxml和js的完整代码贴出来给到大家
我会在视频里带大家做具体代码的编写。 《小程序入门》
小程序开发 点餐 第2篇
就是下面红色框里的这个区域 接下来就教大家如何开发这个区域。
首先去源码的image目录下，把我们需要的几个图片资源复制进来。 就是下面这几个，如果你前面跟着石头哥视频课操作的话，所有的图片资源应该都已经放好了。
到这里我们的九宫格分类区域就编写好了。
小程序开发 点餐 第3篇
把我为大家提前准备好的内容模型.json文件导入即可 导入完以后，可以看到多了以下几个表
数据我已经为大家准备好了，大家只需要按照我视频里的步骤把这两个数据导入到对应的表里即可。
菜品导入成功如下 轮播图导入成功如下
把lunbotu这个表的权限改为所有用户可读，仅创建者可读写。 把food这个表的权限改为 所有用户可读，仅创建者可读写。
把order这个表的权限改为所有用户可读，仅创建者可读写。 把admin这个表的权限改为所有用户可读，仅创建者可读写。
小程序开发 点餐 第4篇
由于这一章的购物车涉及的逻辑比较多，所以大家笔记就作为参考就行，重点还是要跟着这节的视频课一步步的跟着石头哥去敲代码。
如下图所示 我会在视频里教大家具体的代码实现。
如上图所示，总计4件总价39，就是通过在js里的逻辑代码实现的。 当然了这只是其中一部分代码，完整的代码和逻辑我会在视频里一步步带着大家去实现。
我们需要在js页面里定义一个数组来存放购物车数据。在我们每次添加或者减少菜品的时候，这些数据都会同步的更新到我们的购物车数组里面。
有一个比较重要的知识点，这里给大家补充下，如下所示
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
(index,num) index代表我们从何处开始删除，就是元素的下标从0开始，num代表我们删除几个元素。
如上面的例子，我们从下标0开始删除两个元素。这样就是把元素0和1删除了。
如上图所示，我们的购物车弹起的时候会有一个蒙层，一个购物列表，我这里先带大家实现蒙层效果，如下所示。 wxml里需要一个蒙层，一个购物列表 wxss里主要靠下面代码实现蒙层效果 这是实现蒙层的关键，里面的一些属性如果没有了解过可以自行百度学习下。当然这也是一部分代码，由于购物车里涉及的逻辑比较多，我会尽量在视频里带着大家一步步来。
由于我们的菜品列表和购物车列表出现在同一个页面，会有滑动事件冲突的问题，所以在购物车列表的根布局的样式里要添加 overflow: auto 属性
小程序开发 点餐 第5篇
效果图如下
wxml页面代码如下，我会在视频课程里具体讲解
wxss页面代码如下 这里把几个重点知识给大家补充讲解下。
效果图和核心代码如下
这里主要用了flex布局的justify-content属性，用来定义了项目在主轴上的对齐方式 这里建议大家去百度下 flex 花5分钟学习下，绝对保证你收益终身。
我们这里可以有两种方式请求到数据 1，直接通过云开发数据库获取数据 2，也可以通过云函数获取数据
由于直接通云开发数据库获取数据，我基础课里讲了太多遍，这里我们就通过云函数来获取。云函数代码如下。 注意：云函数里面初始化云开发环境用下面的代码
调用云函数的代码如下
小程序开发 点餐 第6篇
还记得我们前面讲首页开发的时候有顺便讲了点搜索功能
但是第七章，只是简单的讲了下逻辑的实现。就是可以请求到数据，但是数据没有用页面显示出来。 所以今天就来手把手的教大家把搜索到的数据显示到页面上。 显示效果如下。
可以看出我们的菜品搜索页，有顶部搜索框，和底部的菜品搜索结果列表。
可以看出我们搜索页顶部的搜索框和首页的搜索框基本上一模一样，所以我们布局上只需要把首页的搜索框复制过来就行了，正规的做法应该是抽取为一个自定义组件。但是我们本节的重点不是自定义组件，所以我们这里就在搜索页重新写下搜索框就行了。
和首页搜索框唯一不同的就是我们在首页输入的搜索词要自动填充到搜索框里，其实就是设置下input的value属性。 这里就不再带着大家一点点的敲代码了，这部分可以去看下前面首页的讲解内容。
细心的同学可以看出我们搜索结果列表和我们首页的热门推荐列表长得基本上差不多，唯一不同的就是我们搜索页可以做菜品的添加和减少。 所以我们这里的布局也可以直接复用首页热门推荐的。
唯一需要我们单独写的就是这个加减菜品的按钮了。 其实这里的按钮就是两个图片和一个数字。这里我会在视频里手把手的教大家把这里写出来。
小程序开发 点餐 第7篇
后续我还会不定期的增加新的功能到我们的项目里面来。。。
首页有以下几个功能点
这里点餐分两种
1，可以设置直接点餐 直接点餐：适合小型饭店，或者奶茶类的快餐店。直接就可以下单，不用识别桌号
菜品浏览分两种
我们这里搜索有两个触发方式
如我这里只搜‘鱼’，那么菜品中所有包含鱼的都可以搜索到
首先菜品列表页可以直接添加商品到购物车 购物车弹起后可以做如下操作
这些操作都和菜品列表是联动的，也就是菜品列表和购物车里增删个数，都是可以同步的。我会在项目预览章节的视频里做具体演示。
下单页就是确认订单后进行下单支付的。有以下功能
支付页分两种方式
所以我们的源码提供两个版本
模拟支付 真实微信支付
我的订单页分以下几个状态
我们可以对店家进行评论。
可以查看所有评价和自己的评价
可以看出，我们可以选择就餐人数，排大桌或者小桌。我这里已排小桌为例 通过上图可以看出
后面我会把订阅消息功能加进来，这样到号后会有订阅消息提示。
个人中心分登录和未登录两种状态
未登录 已登录
客户直接在小程序里发消息给客服 客服可以在网页端，或者微信端管理消息 网页端客服 小程序端客服
客户可以直接在小程序端提建议，建议里可以添加图片 管理员可以在小程序后台，查看客户的反馈
购物车有内容时如下 购物车为空时如下
语音提示我会在视频课里具体演示
可以查看待制作订单 用户新下单后，会有语音提示
同样也有登录页，和上面厨师登录一样，这里重点看下排号管理页 管理员可以查看当前排号情况，可以叫号。
我们这里的可视化网页后台使用的时云开发自带的cms(内容管理)
我们可以在这里
比如我查询某个用户的所有订单 查询所有新下单还未上菜的订单 还有更多的功能，我会在视频课里给大家用视频来演示，这样更直观。
数据库我们这里用云开发自带的云数据库
小程序开发 点餐 第8篇
我们这一节带大家学习确认订单页的编写，效果如下 我们接下来就会在视频里教大家从上到下的编写这个页面。
我会在视频里手把手的教大家，所以这一章最好认真跟着石头哥的视频走。看视频时尽量不要跳跃
我们这里需要用到小程序的扫码识别功能，来获取桌号。 这里用到的官方提供的方法 对应的官方文档如下
代码如下：
小程序开发 点餐 第9篇
我们上一章讲了订单的提交，我们提交订单以后要有一个可以查看订单的地方吧，所以我们这一节来教大家开发我的订单页。 入口在个人中心，如下图。
通过上面的效果图我们可以看到，我们这里可以把用户的订单信息都显示出来。
我会在视频教程里手把手的教大家实现这个页面。
我们订单里要显示用户的下单时间，所以我们在创建订单时就需要把下单时间上传上去，所以我们要用到一个获取当前时间的方法，如下
学过石头哥基础课的同学都知道，我们弹窗用的是 对应的官方文档：
其实弹窗里是支持输入框的，只不过我们要尽量的升级到最新的基础库。
我会在视频里教大家怎么升级基础库和编写评价功能的。
小程序开发 点餐 第10篇
我源码会在配套资料里给到付费用户，年卡用户也可以获取到
前期学习，只下载模拟支付版的源码
导入源码的时候一定要把appid换成你自己的。appid需要注册小程序才有的，所以学习这门课之前建议你先去看下我云开发基础课：《零基础人入门小程序云开发》 appid获取的位置如下图。
初始化云开发之前，必须先开通云开发。
这里要注意，选择的环境，必须和你里填入的环境id保持一致。
cloud目录下的云函数都要部署一下
复制上传好的音频链接，到里替换一下
小程序开发 点餐 第11篇
因为小程序内置的是腾讯地图，所以你需要到腾讯地图上查询经纬度。 首先，你要明确一个事情，任何位置都有它的 经纬度 ，所以你首先要获取到你想定位位置的经纬度。
腾讯地图经纬度查询： 如我这里的经纬度： 要记住纬度在前，经度在后。所以我这里的纬度是，经度是
我先把代码截个图出来。 然后把代码贴出来给到大家
这里我们用到了小程序的map组件来显示地图，可以直接设置经纬度和标记点。
我先把代码截图贴出来给到大家 然后把代码给到大家
所以我们要在里设置如下权限
到这里我们就可以很方便的让用户找到我们了。
小程序开发 点餐 第12篇
由于购物车是一个比较重要的功能，我们再用一章专门讲购物车和缓存功能。
首先我们来看下我们的购物车页面长什么样 如果有认真跟着石头哥前面视频学习的同学肯定会发现我们之前底部只有首页和我的，现在多了一个购物车。其实就是我们之前学习的tabar里多配置了一个页面。我会在视频里教大家配置，顺便复习下之前的知识点。
其实我们这一章上上面的第十四章的知识点基本上都是一样的无非就是我们上一章讲的是在弹窗里显示购物车内容，这一章讲的是在一个单独的页面里显示购物车内容。 我们在这一章里会把我们之前的知识点做一个汇总复习，这也是单独拿出来一章给大家讲解的原因。
我们为了加快进度，有些之前讲过的知识点就不在手把手的带着大家去敲了，要不然我们这门课会拉的很长。所以一些之前讲过的知识点，我们直接把之前的代码复制下，教大家如何修改。这也是现实工作中常用的，一些之前写过的代码和逻辑没有必要再重新写一遍了。这样为了节省开发时间，提高效率。 我会在视频里仔细的教大家去实现这个购物车页面
我们添加购物车需要用到的图标我也给大家放到了网盘里。 当然了，你也可以自己去找图片资源。我这里只是为大家提供一个便利。
小程序开发 点餐 第13篇
今天我们就来正式的开始手把手的开发了。后面的每一节都很重要，希望大家好好听。
首先是创建新项目，这里一定要记得用自己的appid,所以你要提前去注册一个属于自己的小程序，小程序的注册我小程序基础课里有讲过。 《10小时零基础入门小程序开发》
注意事项： 一定要用自己的appid
小程序开发 点餐 第14篇
先来回忆下菜品分类页的效果图。其实当我们菜品增多时，通过搜索是可以快速定位到某一个菜品，但是呢，如果通过菜品分类，让用户去选择购买，肯定会更方便客户的。
其实呢， 我们的菜品分类就是左侧的菜品类型列表，和右侧的每个菜品分类下的菜品列表。 我会在视频里带着大家一步步的实现菜品分类功能的，希望大家认真的跟着石头哥的视频教程走。
我们想知道菜品都有哪些分类，我们就要通过聚合分组操作，拿到目前所有菜品的分组。就是要知道我们的菜品有哪些分类。 这里我们用到了云开发官方的一个聚合操作。 对应的文档如下： 建议大家自己去仔细读下，当然我也会在视频里教大家一步步的去实现这个功能。
小程序开发 点餐 第15篇
今天我们就来讲解下个人中心的编写。
好多同学都会认为，我们下面这个箭头是个图片，其实不是，这个箭头是纯css代码画出来的。 代码如下：
你如果不想用这个css画的箭头，自己去网上找个箭头图片，放到这里也可以，记得图片是用image组件来显示的就可以了。
我会在视频里把css画的箭头和图片箭头都给大家演示一遍。大家自己决定用css箭头还是图片箭头。
我们这里以我的订单条目为例 可以看到核心代码如下
客户直接在小程序里发消息给客服 客服可以在网页端，或者微信端管理消息 网页端客服 小程序端客服
客户可以直接在小程序端提建议，建议里可以添加图片 管理员可以在小程序后台，查看客户的反馈 所以我们这里需要做的就是使用官方自带的功能。而这两个功能都是通过button按钮来实现的。 我们这里用到了button的open-type属性。可以看下我们代码里用的就是这个属性。 好多同学问石头哥，在线客服和意见反馈是怎么实现的。其实就是上面几行代码就可以轻松的实现了，因为主要功能小程序官方已经帮我们实现了，我们只需要通过button打开对应的open-type就行了。
因为button自带一些样式，我们的在线客服和意见反馈又必须通过button打开，所以我们要想办法消除button的默认样式。 重点代码如下： 我会在视频里给大家演示不消除css默认样式带来的影响，如下图所示，不去除button默认样式，会很难看。