微信小程序开发之菜品识别（调用百度AI菜品识别接口）

运行效果

用户点击选择图片或者拍照按钮，选择一张图片上传之后显示在图片区域，点击菜品识别，系统对菜品识别之后弹出对话框来提示菜品名称和热量，用户点击确定查看菜品详情。

小程序概述

此小程序主要调用了百度AI菜品识别的接口，项目可根据用户上传的图片来判断图片中菜品的名称/菜品的热量，并获取百度百科中关于菜品的详细说明。在wxml页面中，为了使得菜品图片呈现的更鲜艳，加了一个具有小圆点边框的背景，这里使用css样式来实现；中间部分是两个图片按钮，分别链接到选择图片或拍照函数和菜品识别函数，考虑到按钮样式不太好看，这里使用的是图片加文字的样式来呈现；最下方是根据用户的选择利用一个滚动区域来呈现菜品的详情，当用户确认要查看详情时，将此菜品百度词条内容和图片呈现出来，当然这里也可以跳转到百度百科页面，大家可以获取参数后自行设置。

小程序重点

1 用户上传图片要进行处理为base64格式编码，这样才可以传递给百度ai的api进行处理，用户上传图片可以直接使用wx.chooseImage()方法，图片上传成功之后可以获取到图片的临时路径，而临时路径的图片必须获取到才能处理为base64格式编码，这里使用wx.getFileSystemManager().readFile()方法，通过提供图片路径和编码格式来获取图片base64格式编码，这样就可以将编码之后的数据传递到百度ai的菜品api中进行处理

2 用户access_token的获取，官方文档已经给出了比较详细的说明，我们需要提供client_id和client_secret来进行获取，将这两个数据传递到官方给的api中，就可以获取到access_token,它的有效期为一个月，我们可以每次重新获取，也可以获取之后将其设置为常量，不再调用获取方法。

3 闪点效果的实现，这里是参考一个大转盘抽奖的效果，圆点的位置是存储到数组中，wxml中对数组进行遍历渲染，圆点闪现利用了计时器的方法，每隔0.5秒更换一下圆点的背景色来实现。

4 判断之后菜品数据的获取，其实这一部分也比较简单，可以通过console.log(res.data)输出返回的数据，在调试器中查看，然后依据数据层级来逐级调用显示即可，下图是输出的数据，大家可以看一下，正常情况下是可以显示出这个菜品所有可能的情况，我这里只显示了可能性最高的一种菜品，并且百度百科链接和文字的呈现需要在data中传递相关的参数才可以。

微信小程序开发之菜品识别（调用百度AI菜品识别接口）