在这样春暖花开的时间，是不是想要和男神女神一起出门踏青赏花啦？看到一款好看的花花草草，不认识岂不是很丢人。不如动手撸个看图识物的小程序吧，还能一展咱程序媛[猿]的魅力。ok，带着这样的目的，记录下我的这次开发。此次开发用到了微信小程序的云服务开发，毕竟咱也没有服务器，还有用到了百度AI的api。
首先，如何进行小程序的云服务开发呢？一直都在听我老大说这个概念，这次终于动手操作啦，对于小程序，之前只做过一个商品购物的小程序，所以稍微有点基础吧。
第一步： 首先在创建的时候勾选云开发，这里AppID一定要用真实的AppID，在微信公众平台开发设置可以找到：
此时会让你创建个环境，这里创建的环境id后续需要写到全局app.js里，注意：这里是环境id，不是环境名称哦（在云开发控制台设置中查找环境id）
创建之后会有两个文件夹，第一个文件夹就是用来写云函数，第二个文件夹是页面代码。
cloudfunctions云函数文件里每次创建都只写一种方法，因为后面页面调用接口名称就是你创建的文件夹名字，如我这里是: baiduAi，同时创建完需要鼠标点击文件夹右击=》上传并部署：云端安装依赖，这时，在云开发控制台云函数可以看到创建的云函数
这里点击左上方的云开发，可以看到里面有数据库，存储，云函数等，这里用到了存储和云函数功能
第二步：写好页面后，写拍照，本地相册上传功能，这里微信小程序提供了相应的api为：wx.chooseImage，
第三步：图片上传后，会生成一个临时url，我们需要做的就是把临时url放到云服务的存储中，使用云开发api中wx.cloud.uploadFile，同时，我们需要给图片命名，因为这里会传多张图片，所以使用时间戳来命名，同时跳转到上传图片成功的页面，这里需要向下一个页面传页面的临时路径以便显示，同时还要传fileID，也就是图片在云服务存储里的图片id，这里ID是为了后面百度AI接口调用的时候使用
wx.chooseImage({ // 上传图片
sourceType: sourceType, // 上传图片的类型【camera或者album】
success: res =>{
wx.showLoading({
title: '图片上传中...',
})
console.log('调用图片的成功结果：', res);
let filePath = res.tempFilePaths[0];
let cloudPath = 'image/' + Date.now() + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({ // 将图片上传至云存储空间
// 指定上传到云路径
cloudPath: cloudPath,
// 指定要上传的文件的小程序临时文件路径
filePath: filePath,
// 成功回调
success: res =>{
console.log('上传成功：', res);
// 跳转图片上传成功页面
wx.navigateTo({
url: `../showPhone/showPhone?fileID=${res.fileID}&&pic=${filePath}`,
})
},
fail: err => {
wx.showLoading({
title: '图片上传失败！',
})
}
})
},
})
第四步：在上传成功页面里，首先是显示出图片，同时需要调用百度AI的接口，这里百度AI接口的处理我是在云函数中处理，使用的是node。对于百度AI，需要去百度AI官网登录注册一个账号，我是搜索植物识别，使用免费使用功能，毕竟咱自己玩，一天也玩不了多少次，哈哈。打开后创建应用，会生成我们需要的APP_ID, API_KEY,SECRET_KEY，对照着百度AI提供的文档进行开发。注意：这里需要安装baidu-aip-sdk，可以在控制台进入相应文件后直接npm安装
附百度ai开发文档（我选择的是NodeSDK文档）： https://ai.baidu.com/ai-doc/IMAGERECOGNITION/Fk3bcxjx7
一切就绪后，就开始处理图片和百度AI之间的关系，将云服务中的图片id传入百度Ai接口中，返回的就是对应图片内容的信息
// 云函数入口文件
const cloud = require('wx-server-sdk')
let AirpImageClassifyClient = require('baidu-aip-sdk').imageClassify;
// 设置APPID/AK/SK
let APP_ID = "18927083"
let API_KEY = "tpsAYnBF16TxlxNedU6y9Saj";
let SECRET_KEY = "OhnH7KGWhTek0VFddUHFfKrk5Hh8DvV7";
// 新建一个对象，建议只保存一个对象调用服务接口
let client = new AirpImageClassifyClient(APP_ID, API_KEY,SECRET_KEY);
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
let { fileID } = event; // 这里是因为我们这个函数只需要一个fileID的参数
let res = await cloud.downloadFile({ // 云服务的下载
fileID: fileID
})
console.log('调用百度ai函数打印1：', res);
let image = res.fileContent.toString("base64"); // 将图片转成base64格式，因为这里百度ai只接受base64格式
let val = await client.advancedGeneral(image);
return {
val
}
}
处理好百度AI接口后，在显示图片的那个页面调用该接口
wx.cloud.callFunction({
// 需要调用的云函数名
name: 'baiduAi',
// 需要传给云函数的参数
data: {
fileID: options.fileID
},
success: res => {
console.log('百度ai传回来的数据：', res);
wx.hideLoading();
this.setData({
pic: res.result.val.result
})
console.log(this.data.pic);
},
fail: error =>{
console.log('接口失败：', error);
}
})
这个时候，一个看图实物的小程序就完成啦，这里不只是可以辨别植物，百度Ai接口对于其他类型图片也可以识别。
关注我，一起努力，共同进步！！后续会将代码传入github。
