微信小程序——简单饮食推荐（二）

本文主要是介绍微信小程序——简单饮食推荐（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

该篇是转接我的文章简单饮食推荐（一）中功能实现中的订餐模块。

目录

• • • 1、要实现的功能
    • 2、界面的布局
    • 3、设计思路
    • 4、实现过程

1、要实现的功能

• 能够显示菜单
• 可以切换不同的食物种类
• 可以将菜单中的菜品或者食物添加至购物车
• 在购物车中可以对已经选择的食物进行增加或减少
• 可以对购物车中的食物进行结账
• 结完账后可以扫码支付

2、界面的布局

该模块的界面采取的是左右联动的菜单列表，该功能的实现可以直接通过scroll-view来设置。但我没有直接用这个组件。我使用的组件是view组件，只不过是在它的css属性中通过将overflow设置为scroll来实现。

3、设计思路

1、整个页面分成左右两个view，横向布局；左侧view用子菜单view一个个填充，纵向布局，右侧的也是纵向布局。
2、在左边菜单中，子菜单内容存入数组，点击子菜单view，用<view class="{{tabIndex == index ? ‘menu active’ : ‘menu’}}"来记录当前选择的菜单，其中tabIndex是回传的数组索引index。
3、右菜单中，要想实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过判断js中存着的数组的id是否等于当前的tabIndex来筛选出id等于当前 tabIndex的数据。
4、图片资源的存储问题：可以利用图床来存放，然后把每一个图片的url记录下来，然后在js中存储到对应的菜品数组中。
5、对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
6、点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。
7、在购物车界面可以点击“结账”按钮进行结账，点击后会调出一个确认界面，确认之后就会进入支付界面，可以扫码支付。

4、实现过程

1、设置左右联动的菜单列表，关键代码如下：

其中要对view进行属性的配置，实现滚动的效果，关键就是要对overflow进行设置，overflow 属性规定当内容溢出元素框时发生的事情，这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，都会提供一种滚动机制。所以可以设置“overflow: scroll;”。
Overflow分别设置在aside和item-content中，对两个左右联动的菜单列表的最外层view的设置如下：

2、左侧菜单可以view的for循环来实现，循环遍历js中的menus数组，当然menus数组要传到视图层。Menus数组定义如下：

点击的每一个菜单框绑定的是js中的tabMenu事件，
绑定的tabMenu函数为：

当点击某个选项时如何判断点击的是哪个菜单？
查阅资料发现可以在标签里设置data-index，绑定一个点击事件，传参index，通过event.target.dataset.index来取；可在js中访问 event.target.dataset对象，而event.target.dataset.index里面的index就是我们在view标签上添加的" data-index “属性；然后用了三元表达式class=”{{tabIndex === index ? ‘menu active’ : ‘menu’}}"来动态赋值给class，这样就实现了动态控制class。
用这个函数实现了获取当前点击的是哪一个menu，也就是在js中定义的menus数组中其中选中的那一个数组的下标。

在tabMenu事件函数中添加console.log(index)来进行验证是否可以获取到当前点击菜单的事件：
从上到下依次点击按钮，可以看到在调试器中输出如下内容：

可以看出输出内容准确，上述功能以实现。

3.要先实现点击左侧子菜单的样式来显示不同的右侧页面，可以在wxml的一个view中通过“wx:if="{{tabIndex==item.id}}”来判断js中菜品数组中的id是否等于当前的tabIndex的值来筛选出id等于当前 tabIndex的菜品数据。也就是在items数组（存放菜品信息）中，同一种类别的食物共用一个id，如下定义：



4.图片资源的处理
为避免小程序代码文件整体过大，应该避免在文件夹中存储大量的图片资源，所以可以将所用到的图片资源上传到图床来存储。这里我选择的是 路过图床 来存储所用到的图片资源。
上传完后如下所示：


将每个图片的url保存到js中定义items数组中：

5.对于每个右侧的菜品，可以通过点击每个菜品旁边的“添加”按钮进行菜品添加，每次点击都会在底部显示选的菜品件数和总价钱，通过js来控制相关的钱数计算。
“添加”按钮绑定的事件是addOrder，在该函数中要实现的有：
购物单列表存储数据、改变添加按钮的状态、将已经确定的菜单添加到购物单列表、判断底部提交菜单显示隐藏、总价格求和、设置显示对应的总数和全部价钱、将选中的商品存储在本地。
购物单列表存储数据实现：购物单列表存储在subOrders这个数组中，如下所示：

改变添加按钮的状态，这里通过一个三元表达式来实现就可以，如下：

将已经确定的菜单添加到购物单列表，直接用push函数来添加到subOrders数组中，如下所示：

判断底部提交菜单显示隐藏，判断subOrders数组是否为空，若subOrders为空，底部提交菜单显示标志bottomFlag为false，否则底部提交菜单显示标志bottomFlag置为true。

总价格求和,这里只需简单的加法就可以，如下所示：

设置显示对应的总数和全部价钱，只需将orderCount这个集合进行setData就可以了，代码如下：

将选中的商品存储在本地，这里用的是wx.setStorage(Object object)函数，查找开发者文档得知该函数的用法如下：
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

6. 点击菜品旁边的“添加”按钮进行菜品添加时下方弹出的view中的右侧加一个转去购物车的按钮，点击这个按钮就可以转到购物车界面，在购物车界面中会显示出你所选的食物，在这里你可以单独对每一个所选食物进行数量上的添加或者减少。

这个按钮绑定的事件函数是js中的card函数。card函数如下：

查阅开发文档，跳转函数可以用wx.redirectTo(Object object)，该函数的功能是：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。点击之后会跳转到’…/order/order’界面。
跳转到该界面后，显示选中的菜品的代码如下：

这里和前面的列表显示异曲同工，用for遍历数组即可。
实现对购物车菜品量的加减界面的view代码：

其中加减按钮绑定的事件函数的代码如下：

点击加减按钮，测试框输出如下：


这里加减的数据对象是之前设定的orderCount集合中的num和money的值。

“结账”按钮绑定的事件是pay函数，pay函数代码如下：

1.	pay: function () {  
2.	    let that = this;  
3.	    let str = '选中' + that.data.orderCount.num + '件商品，共' + that.data.orderCount.money + '元，是否要支付？'  
4.	    wx.showModal({  
5.	      title: '提示',  
6.	      content: str,  
7.	      success: function (res) {  
8.	        // 至少选中一个商品才能支付  
9.	        if (that.data.orderCount.num !== 0) {  
10.	          if (res.confirm) {  
11.	            // 打开扫码功能  
12.	            wx.scanCode({  
13.	              onlyFromCamera: true,  
14.	              success: (res) => {  
15.	                wx.redirectTo({  
16.	                  url: '../pay/pay'  
17.	                });  
18.	              }  
19.	            });  
20.	          } else if (res.cancel) {  
21.	            console.log('用户点击取消')  
22.	          }  
23.	        } else {  
24.	          wx.showToast({  
25.	            title: '您未选中任何商品',  
26.	            icon: 'none',  
27.	            duration: 2000  
28.	          })  
29.	        }  
30.	      }  
31.	    })  

用if (that.data.orderCount.num !== 0)来判断当前orderCount中是否有数据，也就是是否有待结账的菜品，若有，就会弹出一个确认框，点击确认之后，就会调取扫码功能，扫码功能代码如下：

在这个函数中，调用之后会转到支付界面

这篇关于微信小程序——简单饮食推荐（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！