基于百度智能小程序做一个植物识别的小程序。

关于注册之类的步骤就不说明了。大家最好是用自己企业信息注册哦。百度智能小程序不支持个人哦。组件 API 结构就不说了。文档中心很详细的。

此文源代码地址 https://gitee.com/xshuai/smartprogram-bd

开发工具下载：

• Windows开发工具下载 http://smartprogram.baidu.com/mappconsole/api/devDownload?system=windows&type=online
• MacOS开发工具下载 http://smartprogram.baidu.com/mappconsole/api/devDownload?system=mac&type=online

既然是做一个植物识别的小程序。那是超级简单的。百度智能小程序已经默认接入了很多AI能力。具体功能如下:

文档中心 https://smartprogram.baidu.com/docs/develop/api/ai/

本文以植物识别为示例简单说明。文档地址 https://smartprogram.baidu.com/docs/develop/api/ai_classify/#plantClassify/ 自己一定要看一遍哦

示例代码很简单哦 很方便无需管理图片的base64转换问题。token也无需管理。接口次数不够如何增加暂时不太清楚

swan.chooseImage({
  success(res) {
    let image = res.tempFilePaths[0];
    swan.ai.plantClassify({
      image,
      success(res) {
        console.log(res.result);
      }
    });
  }
});

                                                                                                               接下来。直接上做好的示例代码

app.json 给一个页面路由

{
    "debug": false,
    "pages": [
        "pages/aiplant/aiplant"
    ],
    "window": {
        "navigationBarBackgroundColor": "#3366FF",
        "navigationBarTitleText": "花样识图",
        "navigationBarTextStyle": "white",
        "backgroundTextStyle": "black",
        "enablePullDownRefresh": false
    },
    "networkTimeout": {
        "request": 30000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
    }
}

pages/aiplat.swan 写页面的布局代码

  
    
  

拍照/选取图片
  

  
      
        植物名称
        可信度
      
    
     
        {{item.name}}
        {{item.score*100}}%
      
    
  

pages/aiplat.css写页面的样式代码

.image {
  width: 100%;
  height: 360rpx;
}
button{
  font-family: 微软雅黑;
}
text{
  font-family: 微软雅黑;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding:60rpx;
  height:840rpx;
  border-top: 2rpx solid #D9D9D9;
  border-bottom: 2rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}

.faceInfo{
  font-size: 28rpx;
   display:block;
   margin:0 auto;
   margin-left: 33%;
}
.faceInfoValue{
  color: #1BA0E1;
  letter-spacing:0px;
}
.chooseImg {
  display:block;
  margin:0 auto;
  color: rgb(255, 255, 255);
  font-size: 40rpx;
  font-family: 微软雅黑;
  width: 400rpx;
  height: 100rpx;
  text-align: center;
  line-height: 90rpx;
  border-radius:50rpx;
  background-color:#3366FF;
  margin-top:10px;
}
.img_wrap {
    width: 750rpx;
    height: 620rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 20rpx 0;
    text-align: center;
}
.table {
 margin-top: 10rpx;
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
    font-size: 28rpx;
    width:40%;
     display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-w{

}
.bg-g{
  background: white;
}
.th {
  font-size: 28rpx;
  width: 48%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 80rpx;
  align-items: center;
}

页面效果如下：

接下来做业务处理的代码 在pages/aiplat.js中

会发现代码很少。就能实现植物识别小程序了。无需任何后台代码哦。

Page({
    data: {
        title: '植物识别',
        result:[],
        img:""
    },
//绑定事件 处理选图图片并进行植物识别api调用 并回显数据
uploads: function() {
        var that = this;
        swan.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            success: res => {
                let image =  res.tempFilePaths[0];
                swan.showLoading({
                    title: '努力分析中...',
                    mask: true
                }),
                that.setData({
                        img:image
                }),
                swan.ai.plantClassify({
                    image:image,
                    success(res){
                         swan.hideLoading();
                        that.setData({
                            result:res.result
                        })
                    }
                });
            }
        });
},
});

识别示例图: