微信小程序开发之菜品识别（调用百度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
页面效果为个人简单调试，不适之处大家可自行修改。
如需源码，可关注以下公众号
后台回复“菜品识别小程序”获取
微信小程序开发之菜品识别（调用百度AI菜品识别接口）相关推荐
- 微信小程序开发之颜值测试,调用百度AI人脸检测接口
页面效果 插播一下,颜值71,还可以那么狂,哼........ 项目介绍 页面实现上传一张带有人像的图片,点击测试颜值之后返回照片中人像的年龄和颜值,此项目为颜值测试初级,access_token值 ...
- 微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气
效果预览 页面功能介绍 此天气预报功能首先获取用户当前位置城市名,对于获取当前位置城市名和百度天气ak申请有疑问可以参考之前文章,然后根据城市名调用百度天气接口返回天气各项数据,最后对返回的数据进行处 ...
- 微信小程序实现图林机器人聊天和百度AI语音识别的简单人工客服
用微信小程序实现简单的人工客服 最近在做软件工程的课程设计,选择性的做了微信小程序的简单的人工客服.在这里对该课程设计的原理和实现进行一个讲解,也算做一个总结和笔记,方便自己以后查看.复习和帮助大家的 ...
- 微信小程序开发前准备
微信小程序开发前准备 前期准备 开发者工具 聚合免费API接口 开发者账号注册 文件解析 1.app.js是小程序的脚本代码.程序的主体代码主要在这个文件中实现.这个文件中包括小程序的生命周期函数 ...
- 微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别——基于腾讯云开发者实验项目
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别--基于腾讯云开发者实验项目 开通腾讯云相关权限(AI人脸识别,文字识别-身份证识别) 查看API密钥 部署微信小程序 成功演示 代码包 开通腾 ...
- 微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
- 与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发 概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
- 微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用 框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
- 微信小程序开发总结与心得(一)
Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 0 前言 最近的工作重心一直在小 ...
最新文章
- 长篇自动驾驶技术综述论文（下）
- 用GAN来做图像生成，这是最好的方法
- 揭示Win32 API拦截细节/API hooking revealed (1)
- 厉害了！SpringBoot是如何动起来的！
- python configparse_python中ConfigParse模块的用法
- C#DNS域名解析工具(DnsLookup)
- 调试器工作原理--CPU软件断点/硬件断点/单步执行标识
- python的前世今生
- Linux 100个常用指令
- TortoiseSVN 官网 中文语言包位置
- 2015年职称计算机考试宝典,2015年职称计算机考试宝典模块软件.doc
- 大一学计算机需要准备做东西,我是浙江大学大一的学生，以后打算学习计算机专业，想去卡耐基梅隆大学或MIT读研，不知道需要做哪些准备？...
- OSPF 理论二 （赤诚善良 永远热爱）
- 区块链+游戏：未来真的有未来吗？
- Orcad与PADS交互设计技巧一
- 20175208 实验二 《Java面向对象程序设计》实验报告
- 03-日志汇总，处理和安全分析
- 数据团队总监生存指南
- 安装windows server 2008 R2虚拟机，并成功安装VMware Tools（上）
- 为什么sop很重要？