【微信小程序】调用百度API进行图像识别（以植物识别为例）

微信小程序调用百度API进行图像识别（以植物识别为例）

需要素材与源码可联系笔者，项目文件过多不适宜全部展示。

微信小程序调用百度API可分为以下三步：

1. 注册百度智能云账号，并开通植物识别API
2. 在小程序中调用
3. 渲染在小程序页面上

１.注册智能云账号

移步百度只能云平台https://cloud.baidu.com/
注册好账号之后，把鼠标放在产品上，侧边会展开具体的产品，这里我们选择图像技术，会展开三级标题，选择其中的植物识别，点击

进入后点击开屏大字立即使用

跳转到下图界面，去创建应用

之后页面跳转到填写信息的界面，首先给你的应用取个名字，然后这里我们选择植物识别，当然如果你还想实现其他技术也是可以的，具体操作过程也是大同小异。后面还会填一段应用描述，这里随便写两句就好啦。最后点击立即创建

创建好之后打开我们的应用，可以看到API key和Secret key，通过这两个值我们可以获取到access_token，获取方法见　百度鉴权认证机制
或者也可以直接点击API在线调试，按照以下步骤也可以获取到access_token

2.小程序调用

小程序创建项目：略

这边建议开通云函数，不然还要解决一系列跨域问题。

点击云开发，找到开发环境，把env参数写到app.js中。
开通好之后云函数的文件夹会带小云的标志，如下图

以下是云函数中index.js文件

// 云函数入口文件
console.log("成功调用云函数！！！！------------------")
const cloud = require('wx-server-sdk')
var AipImageClassifyClient = require("baidu-aip-sdk").imageClassify;

cloud.init()
// 设置APPID/AK/SK，这里需要改成你自己的APPID/AK/SK
var APP_ID = "wxc63****";
var API_KEY = "Rx3b3Bxu*****";
var SECRET_KEY = "cx4OwRf0jbhR*****";

// 新建一个对象，建议只保存一个对象调用服务接口
var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY);

// 如果有可选参数
var options = {};
options["baike_num"] = "5";

// 云函数入口函数
exports.main = async (event, context) => {
  let flower = await AIflower();
  // console.log(flower);
  return{
    flower
  }

  // event.img图片必须是base64编码的
  function AIflower(){
    return new Promise((resolve,reject) => {
      // 带参数调用植物识别
      client.plantDetect(event.img, options)
      .then((res) => {
        resolve(res);
      //  resolve(JSON.stringify(res));
      })
      .catch((err) => {
        // 如果发生网络错误
        reject(err);
      });
    })
  }
}

下面是上传图片的相关代码，需要先把图片转成base64编码，植物识别需要一个参数，就是图片的base64编码，返回值是name(植物名称)和score（相似度）

// 函数定义
  selectImage(){
    wx.chooseImage({
      count:1,
      // 指定只能上传压缩图
      sizeType: ['compressed'],
      sourceType: ['album','camera'],
      success: (res) => {
        // console.log(res);
        const path = res.tempFilePaths[0];
        // 解码图片base64
        var imgbase = wx.getFileSystemManager().readFileSync(path,"base64");
        this.flowerCloud(imgbase);
        this.setData({
          imagePath:path,
        })
      },
      fail: (err) => {
        console.log(err);
      }
    })
  },

  baikeShow(event){
    const baikedata = event.currentTarget.dataset.itemdes;
    this.setData({
      isShow:true,
      baikedata: baikedata
    })
  }

下面为调用云函数，这里的name指的是云函数根目录下的文件夹名称！！！

// 定义调用云函数的函数flowerCloud
  flowerCloud(imgbase){
    wx.cloud.callFunction({
      name:'flowers',
      data:{
        img:imgbase
      }
    })
    .then((res) => {
      let answer1 = res.result.flower.result;
      // map遍历
      let answer = answer1.map((item) => {
      const name = item.name;
      const score = (item.score*100).toFixed(2) + '%'; 
      return {
          name,
          score
      }
     })
   })
   .catch((err) => {
      console.log(err);
    })
  },

我们可以成功得到一组返回值，可以打印一下调用接口得到的res：

然后我们只需要把这些数据渲染到前端界面就可以了。

3.渲染

用一个answer储存从接口返回的数据，从上面的结果可以看到有name和score，我们可以直接把用for循环渲染到界面上

 <view class="show">
    <view class="title">
      <view>名称</view>
      <view>可信度</view>
    </view>
    <block wx:for="{{answer}}" wx:key="index">
      <view class="title data">
        <view>{{item.name}}</view>
        <view>{{item.score}}</view>    
      </view>
    </block>
  </view>

4.结果展示

可显示植物名称和对应的相似度。

5.可能遇到的坑

1. 云函数上传之后，记得右键点击云函数根目录，同步云函数列表
2. 如果需要从数据库调用数据，比如说先识别出植物的名称，然后需要从数据库调用该植物所对应的英文名并渲染，会遇到异步问题，后端数据发生了改变，但是页面渲染的数据没有改变（或者获取不到）
3. 一定要多次调试，记得随手console.log返回的数据，可能会发现很多理论上没有问题，但运行起来确实有问题的情况（乐
4. （补充上一条）这些问题大多都是因为

小程序是基于双线程模型，那就意味着任何数据传递都是线程间的通信，也就是都会有一定的延时。这不像传统Web那样，当界面需要更新时，通过调用更新接口 UI 就会同步地渲染出来。在小程序架构里，这一切都会变成异步。

——摘自小程序开发文档

---

完结撒花~

PS：以上均为片段代码，数据定义和样式等内容需要自己码，需要完整代码可联系笔者