微信小程序开发之菜品识别（调用百度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中传递相关的参数才可以。

主要代码

01小圆点wxml代码

02菜品详情wxml代码

03图片base64编码

04获取token值js代码

05接口获取菜品信息

06闪点js代码

注：图标图片来源与阿里巴巴矢量图标库，可利用新浪账号登陆之后选择合适的颜色大小来下载使用

       百度AI菜品识别API调用之前需要完成个人账号的注册，以此来获取id和key

       页面效果为个人简单调试，不适之处大家可自行修改。 

如需源码，可关注以下公众号

后台回复“菜品识别小程序”获取