设计一个基于百度大脑API的图片识别小程序，实现动物识别、植物识别和车辆识别三大功能。实验源码已经放到GitHub,欢迎测试修改。项目地址：https://github.com/ZHJ0125/ImageMaster

一、概述

1. 课程大作业目的与要求

本次课程大作业的目的是运用在本次课程中学到的知识来指导实践，了解程序设计其实现方法，学会解决实际问题。掌握微信小程序设计的具体步骤与基本方法，针对选定的程序做调研分析。通过课程大作业，提高实践动手技能，培养独立分析问题和解决问题的能力。

2. 课程大作业简介

图像识别是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对像的技术。在众多的图像识别分支中，拍照识别是一个重要的应用。利用图像识别技术，识别拍摄到的图片内容，已经广泛应用于各类图像识别App中。

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的“触手可及”和“即用即走”，用户扫一扫或搜一下即可打开应用。利用微信小程序使用便捷的特点，结合图片识别应用，本次大作业选定了制作微信小程序的图片识别应用——ImageMaster。本应用实现了基于微信小程序的动植物识别和车辆识别，使用便捷，充分发挥了微信小程序“即用即走”的特点。

同时，本次大作业项目制作过程只用了Git进行进度跟踪，便于进行版本回退和功能更新。

二、设计思路

根据初步选定的设计题目，查找相关资料，针对系统所涉及内容，查阅相关背景知识，将设计思路在此做一个概括。

本课题需要实现以下功能：

1. 动物识别

2. 植物识别

3. 车辆识别

设计思路如下：

1. 图片识别API:选择百度大脑API作为图片识别的核心技术。

2. 微信小程序UI框架：采用Taro样式进行开发，兼容微信小程序。

3. 设计方案：分为前端设计和后端设计两部分。前端设计包括页面布局、样式设计等；后端设计包括API接口设计、数据处理等。

4. 设计过程：分为四个阶段，分别是百度开放平台注册、获取access_token、图片上传、图片格式转化、API请求、实现植物识别、实现车辆识别、Taro样式测试和WeUI样式测试。

5. 关键问题：主要关注图片上传过程中的大小限制、API调用次数限制等。

6. 使用说明：为用户提供详细的使用方法和注意事项。

以下是重构后的内容：

图片识别API的选择以及微信小程序UI框架的选择是实现一个基本的图片识别应用所需要查阅的资料。首先，需要查阅图片识别API的相关资料，以便确定课题最终使用哪个API。下面我将在接口能力、是否有参考例程、个人评价三方面简要分析一下常见的几种图片识别API。

1. 百度大脑API平台

接口包含人脸识别、人体识别、证件识别、图像识别等多项功能。其中，动物识别、植物识别和车辆识别等功能可以通过调用相应的接口实现。此外，该平台还提供了丰富的开发指南和SDK文档，方便开发者进行二次开发。

2. WeUI微信小程序UI框架

WeUI是一款轻量级的微信小程序UI框架，提供了丰富的组件和样式，可以帮助开发者快速构建出美观易用的小程序界面。该框架支持多种设备尺寸，适配性强；同时还提供了多种主题风格和皮肤方案，方便开发者进行个性化定制。

以下是我对你提供的内容进行重构后的结果：

一、UI框架简介

1. WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

2. Vant Weapp

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

3. iView Weapp

iView 是一套高质量的微信小程序 UI 组件库。

4. MinUI

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广。覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。

5. Wux Weapp

Wux Weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库。UI 样式可配置，拓展灵活，轻松适应不同的设计风格。60多个丰富的组件，能够满足移动端开发的基本需求。

6. ColorUI

ColorUI 是鲜亮的高饱和色彩，专注视觉的小程序组件库。

7. Taro UI

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库。基于 Taro 开发 UI 组件一套组件，可以在微信小程序，支付宝小程序，百度小程序，H5 多端适配运行(ReactNative 端暂不支持)。提供友好的 API,可灵活的使用组件。

二、使用体验

经过亲自体验各种UI框架的官方Demo,最后感觉 Taro UI 使我印象很深刻。界面简洁，组件分类明确。但是在项目进行到UI设计阶段，发现Taro使用有些许难度，为简化开发过程，最终选择了WeUI框架。

需求分析的基础上，我们查阅资料，对在小程序设计中可能用到的相关技术进行了调研分析。微信小程序本身就是联网的应用平台，因此在微信小程序平台进行图片识别时，无需担心网络连接问题。从源头上追溯，实现图片识别需要用户首先上传图片或拍摄图片，这涉及到图片上传问题；之后发送API请求时，图片需要作为请求的参数，这涉及到图片转码的问题；最后API请求调用成功后，需要将识别的数据输出，这就涉及数据处理以及UI界面设计的问题。通过解决关键的“图片上传”、“图片转码”、“API调用”以及“界面设计”这几个问题，就可以实现基本的图片识别小程序。

4. 设计过程

根据初步选定的课程大作业程序设计题目，查找相关资料，结合课本中的案例以及前期的学习，整理设计过程。

4.1 百度开放平台注册

首先登陆百度智能云平台，同意它的服务条款。之后填写相关的信息，在控制台概览中创建应用。现在已经申请好了百度的API接口，下面尝试在微信小程序中进行调用。

4.2 获取access_token

在百度AI的官方文档中可以看到，这个API接口有两种调用方式，两种不同的调用方式有相同的接口URL地址，区别在于请求方式和鉴权方式不同。下面我将尝试使用微信小程序中常用的POST请求方式，调用该接口。在官方文档中可以看到，使用post请求需要用到access_token,所以现在去查看如何获取access_token。

4.3 服务器返回参数

获取access_token需要向授权的服务器地址发送post请求，使用固定的参数，即可得到服务器返回的json数据。下面就开始进行小程序的编写，实现access_token的获取。

首先，在空的小程序中添加一个按钮，在按钮按下后，调用wx.request方法向服务器发送POST请求。按钮绑定事件处理函数，这个事件处理函数就是用来发送POST请求的。

下面是重构后的内容：

在编写事件处理函数时，我们利用了wx.request方法请求百度API的URL地址，并按要求使用了POST方式。同时，我们还分别编写了请求完成、请求成功、请求失败的回调函数，以便在控制台中查看请求状态。

接下来需要在微信小程序后台添加合法域名，以便wx.request方法能够正确使用。在运行模拟器后，我们成功获取到了access_token的值。至此，Access_token的问题已经解决。

现在我们需要尝试去请求百度图片识别的API接口。根据百度大脑API接口文档，我们可以大致理解百度API的接口使用方式。具体流程可以参考下面的API文档截图。

为了请求这个API的URL地址，我们需要使用微信封装的request方法，注意要使用该POST方式。URL地址的具体内容就是文档中给出的地址，不同的API接口有不同的请求地址。同时，还需要添加一些参数，如access_token、Content-Type等等。此外，我们还需要一个image参数作为图片的标识，这个image是将图片转换成了base64编码的格式，也就是将图片传换成了一串字符。

查阅微信小程序wx.request方法后，我们了解到image这个参数可以通过小程序的data属性表示。这样一来，API接口的请求过程就可以在小程序中表示出来了。

下面是我们在小程序中进行程序编写的过程。首先添加一个变量“token”用来存储我获取到的access_token值，然后将success回调函数修改成下图中的代码。这样可以将token从服务器返回的json数据中提取出来。现在，token已经存储到了变量中。

4.3 图片上传

接下来有一个问题需要解决：微信小程序怎样获取图片数据呢？微信常用的方式是将用户的图片文件上传到微信开发者的服务器上，服务器接收到图片数据后再进行相关的处理。无论采用哪种方式，都需要使用微信提供的接口上传图片文件。因此，我们需要研究一下如何使用微信的图片上传接口。

微信提供了一个名为“wxchooseImage”的接口，允许用户从本地选择图片或使用相机拍照。这个接口非常有用，因为它可以帮助我们轻松地实现图片上传功能。下面是一个简单的示例，展示了如何使用这个接口上传图片文件。

首先，我们需要在逻辑文件中编写图片上传按钮的事件处理函数。当用户点击上传图片按钮时，会触发这个函数。在这个函数中，我们首先调用“wx.chooseImage”接口，让用户选择一张图片。然后，我们将选中的图片文件路径保存到一个变量中，并通过控制台显示出来。

接下来，我们需要将上传的图片显示在小程序界面中。这可以通过将tempFilePaths设置为组件的src地址来实现。这样，当图片上传成功后，它们就会自动显示在小程序界面上。

为了方便起见，我们可以在页面布局中添加一个组件，并将其src属性设置为动态变量imageUrl。然后，我们需要编写相应的事件处理函数，以便在图片上传后动态更新组件的src属性。这可以通过在原有的图片上传事件处理函数的基础上添加一些代码来实现。

最后，我们需要将图片转换成base64格式的数据。这可以通过使用微信提供的文件管理接口来实现。在上传图片的成功回调函数中(此时已经得到了本地图片地址),我们可以使用文件系统管理方法，读取本地文件的内容，并将其转换为base64格式。然后，我们可以将转换后的base64数据设置为新组件的src属性。

通过以上步骤，我们已经实现了图片的上传和动态更新。希望这个示例对你有所帮助！

下面是重构后的内容：

### 4.5 API请求

图片已经准备好了，现在已经可以去调用百度图片识别的API了。下面需要对包括“access_token”、“base64编码”等数据进行整合，并以动物识别为例尝试该API的调用。

首先添加识别按钮，然后编写相应的事件处理函数。

```markdown

图4.21 识别按钮

```

事件处理函数就是要进行API接口调用了。

```markdown

图4.22 识别图片

```

上面就是按照百度动物识别API文档的要求，结合小程序wx.request方法的属性写出来的事件处理函数。我在网上搜了一个狗的图片，添加到了小程序文件夹中作为测试图片。运行模拟器进行测试。依次点击“获取access_token”、“上传图片”以及“识别该图片”按钮，在控制台看到API返回的数据。

```markdown

图4.23 接口返回值

可以看到，在API返回的JSON数据中，标注了识别结果，其中置信度最高的结果是“威尔士柯基”。我特意搜了一下这个“威尔士柯基”，识别结果还是挺准的。还要测试一下非动物图片的识别情况。现在我继续上传一个头像图片进行测试，看看测试结果。可以看到，非动物也是可以被识别出来的，识别结果只有一个高置信度的“非动物”结果。

```markdown

图4.24 非动物识别

程序做到这里，可以说最大的障碍已经被克服了。目前已经实现了“动物识别”，下面就是逐步实现“植物识别”、“车型识别”等功能就可以了，他们的基本流程是一样的。

### 4.6 实现植物识别

现在来整理一下代码，尝试实现“植物识别”功能。通过阅读API文档可以看出，其实这几种不同的图像识别的接口，只是URL地址不同，其他参数都是一样的。所以我设置了一个变量apiUrl用来存放不同接口的URL地址，为“植物识别”编写一个新的事件处理函数。这个事件处理函数与“动物识别”唯一的不同就是apiUrl不一样罢了。

```markdown

图4.25 植物识别

```

很抱歉，我不太明白您的问题。您能否再解释一下您的问题或者提供更多的上下文信息呢？这样我才能更好地帮助您。谢谢！

你好！Taro UI是一个多端开发解决方案，可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码。如果你想在本地小程序中使用该框架进行练习，需要先安装Node.js版本在v8.x 或以上。你可以通过以下链接查看你的Node.js版本：

- 查看Node.js版本

- 安装新版本NodeJs

安装完成后，你可以使用命令安装相应的依赖。接下来，你需要安装Taro脚手架工具和Yarn依赖管理工具。对于Windows系统，你可以下载官方提供的安装器进行安装。安装完成后，可以使用命令安装相应的依赖。然后到小程序工程目录下，进行Taro模板的创建。这里注意，需要提前安装python2版本。现在模板安装完成了，可以进行模块引入了。下面进行taro模块的导入，需要使用npm本地编译taro模块。编译完成后，你就可以开始编写代码了。

WeUI 是一款与微信原生 UI 一致的 UI 库，其核心文件为 weui.css。要使用 WeUI 的组件，只需获取到该文件并在页面中引入即可。首先，从 WeUI 的 GitHub 网站下载源代码，新建一个工程文件进行测试和修改。在微信开发者工具中打开该工程，模拟器中就可以看到 WeUI 框架的各种组件样式。

以下是关于 WeUI 组织样式编写的一个样例：以 Grid 样式为例，先看一下它的效果，再看一下它的布局文件。可以看到，它是直接使用了 WeUI 提供的 class,利用 wx:for 循环实现 Grid 组件的控制。逻辑文件中给出了 grids 变量数组的数据，从 0 到 8 表示循环 9 次，显示 9 个 Grid 宫格。现在尝试将该样式移植到小程序中。移植样式最关键的就是它的 weui.wxss,按照教程，可以使用外联样式引入的方式将该样式文件引入到项目中。

首先将 style 文件夹整体复制到工程目录中，然后在全局样式中导入 weui 的样式文件。之后创建一个新的页面用来测试样式内容，并将其页面作为默认显示的页面。之后就可以分别在新创建的页面中编写 grid 布局和逻辑文件，内容与示例代码一样。这样效果就与示例代码相似了。

官方例程中 Grid 的九个组件是由组件组成的，用于实现页面之间的跳转。想要通过 button 组件实现用户选择不同类型图片的功能，所以需要使用 button 组件。下面再测试一下 button 组件的使用。首先是从官方历程中抽取出我们需要的组件。现在就需要移植一下样式文件了。在例程样式文件中找到 "weui-btn"、"class"、"page__bd"、"page__bd__spacing" 的文件内容，复制到本页面的样式文件中即可。最后实现的效果如下图所示。

下面尝试将原先的逻辑功能与样式结合起来。首先将样式文件复制到 index.wxss 文件中，然后将原先的 button 组件的样式改成测试时的样式。于是模拟器中的样式就改为如下图所示：接下来修改标题文本样式，将 WeUI 的标题文本样式移植到程序中。

图4.50 标题样式

在本次大作业中，我们需要实现一个微信小程序的图片识别功能。首先，我对上传图片的按钮进行了水平均匀排布，并修改了按钮样式。修改后的样式如下图所示：

图4.51 按钮样式修改

接下来，我又对上传按钮和文字输出按钮的样式进行了修改，添加了提示图片和提示信息。最终的样式如下图所示：

图4.52 最终样式

5 关键问题

在完成大作业过程中，我们遇到了一些关键问题，如图片上传、图片转码、API调用以及界面设计等。具体来说，我们在解决“图片上传”、“图片转码”、“API调用”以及“界面设计”等方面遇到了一些困难。

其中，图片上传主要使用了微信小程序中的wx.chooseImage方法；图片转码使用wx.getFileSystemMangaer方法解决；API调用使用wx.request方法实现；界面设计使用了微信小程序的官方UI框架实现。

6 使用说明

为了让大家更好地体验本次大作业的成果，我们提供了微信小程序体验版的访问方式(小程序码)。请大家使用体验版微信小程序，在自己的手机上进行测试。以下是测试过程及截图展示：

(1)上传图片

用户进入小程序后，首先需要通过相册或拍照，上传需要识别的图片。以“动物识别”为例，点击“上传动物图片”按钮，进行图片上传。

(2)选择图片

以从相册上传图片为例，点击从相册上传图片按钮，在相册中选择想要识别的图片。

(3)识别图片

上传图片完成后，点击小程序界面的“识别该图片”按钮，进行图片识别。经过短时间的等待，即可显示识别结果。

(4)识别结果

界面下方可以展示图片识别的结果。