在這樣春暖花開的時(shí)間尖滚，是不是想要和男神女神一起出門踏青賞花啦喉刘？看到一款好看的花花草草，不認(rèn)識豈不是很丟人漆弄。不如動(dòng)手?jǐn)]個(gè)看圖識物的小程序吧睦裳，還能一展咱程序媛[猿]的魅力。ok撼唾，帶著這樣的目的廉邑，記錄下我的這次開發(fā)。此次開發(fā)用到了微信小程序的云服務(wù)開發(fā)倒谷，畢竟咱也沒有服務(wù)器蛛蒙，還有用到了百度AI的api。
首先恨锚，如何進(jìn)行小程序的云服務(wù)開發(fā)呢宇驾？一直都在聽我老大說這個(gè)概念倍靡，這次終于動(dòng)手操作啦猴伶，對于小程序，之前只做過一個(gè)商品購物的小程序塌西，所以稍微有點(diǎn)基礎(chǔ)吧他挎。
第一步： 首先在創(chuàng)建的時(shí)候勾選云開發(fā)，這里AppID一定要用真實(shí)的AppID捡需，在微信公眾平臺開發(fā)設(shè)置可以找到：
此時(shí)會(huì)讓你創(chuàng)建個(gè)環(huán)境办桨，這里創(chuàng)建的環(huán)境id后續(xù)需要寫到全局app.js里，注意：這里是環(huán)境id站辉，不是環(huán)境名稱哦（在云開發(fā)控制臺設(shè)置中查找環(huán)境id）
創(chuàng)建之后會(huì)有兩個(gè)文件夾呢撞，第一個(gè)文件夾就是用來寫云函數(shù)损姜，第二個(gè)文件夾是頁面代碼。
cloudfunctions云函數(shù)文件里每次創(chuàng)建都只寫一種方法殊霞，因?yàn)楹竺骓撁嬲{(diào)用接口名稱就是你創(chuàng)建的文件夾名字摧阅，如我這里是: baiduAi，同時(shí)創(chuàng)建完需要鼠標(biāo)點(diǎn)擊文件夾右擊=》上傳并部署：云端安裝依賴绷蹲，這時(shí)棒卷，在云開發(fā)控制臺云函數(shù)可以看到創(chuàng)建的云函數(shù)
這里點(diǎn)擊左上方的云開發(fā)，可以看到里面有數(shù)據(jù)庫祝钢，存儲(chǔ)比规，云函數(shù)等，這里用到了存儲(chǔ)和云函數(shù)功能
第二步：寫好頁面后拦英，寫拍照蜒什，本地相冊上傳功能，這里微信小程序提供了相應(yīng)的api為：wx.chooseImage疤估，
第三步：圖片上傳后吃谣，會(huì)生成一個(gè)臨時(shí)url，我們需要做的就是把臨時(shí)url放到云服務(wù)的存儲(chǔ)中做裙，使用云開發(fā)api中wx.cloud.uploadFile岗憋，同時(shí)，我們需要給圖片命名锚贱，因?yàn)檫@里會(huì)傳多張圖片仔戈，所以使用時(shí)間戳來命名，同時(shí)跳轉(zhuǎn)到上傳圖片成功的頁面拧廊，這里需要向下一個(gè)頁面?zhèn)黜撁娴呐R時(shí)路徑以便顯示监徘，同時(shí)還要傳fileID，也就是圖片在云服務(wù)存儲(chǔ)里的圖片id吧碾，這里ID是為了后面百度AI接口調(diào)用的時(shí)候使用
wx.chooseImage({ // 上傳圖片
sourceType: sourceType, // 上傳圖片的類型【camera或者album】
success: res =>{
wx.showLoading({
title: '圖片上傳中...',
})
console.log('調(diào)用圖片的成功結(jié)果：', res);
let filePath = res.tempFilePaths[0];
let cloudPath = 'image/' + Date.now() + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({ // 將圖片上傳至云存儲(chǔ)空間
// 指定上傳到云路徑
cloudPath: cloudPath,
// 指定要上傳的文件的小程序臨時(shí)文件路徑
filePath: filePath,
// 成功回調(diào)
success: res =>{
console.log('上傳成功：', res);
// 跳轉(zhuǎn)圖片上傳成功頁面
wx.navigateTo({
url: `../showPhone/showPhone?fileID=${res.fileID}&&pic=${filePath}`,
})
},
fail: err => {
wx.showLoading({
title: '圖片上傳失敾丝！',
})
}
})
},
})
第四步：在上傳成功頁面里倦春，首先是顯示出圖片户敬，同時(shí)需要調(diào)用百度AI的接口，這里百度AI接口的處理我是在云函數(shù)中處理睁本，使用的是node尿庐。對于百度AI，需要去百度AI官網(wǎng)登錄注冊一個(gè)賬號呢堰，我是搜索植物識別抄瑟，使用免費(fèi)使用功能，畢竟咱自己玩枉疼，一天也玩不了多少次皮假，哈哈鞋拟。打開后創(chuàng)建應(yīng)用，會(huì)生成我們需要的APP_ID, API_KEY,SECRET_KEY惹资，對照著百度AI提供的文檔進(jìn)行開發(fā)严卖。注意：這里需要安裝baidu-aip-sdk，可以在控制臺進(jìn)入相應(yīng)文件后直接npm安裝
附百度ai開發(fā)文檔（我選擇的是NodeSDK文檔）： https://ai.baidu.com/ai-doc/IMAGERECOGNITION/Fk3bcxjx7
一切就緒后布轿，就開始處理圖片和百度AI之間的關(guān)系哮笆，將云服務(wù)中的圖片id傳入百度Ai接口中，返回的就是對應(yīng)圖片內(nèi)容的信息
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
let AirpImageClassifyClient = require('baidu-aip-sdk').imageClassify;
// 設(shè)置APPID/AK/SK
let APP_ID = "18927083"
let API_KEY = "tpsAYnBF16TxlxNedU6y9Saj";
let SECRET_KEY = "OhnH7KGWhTek0VFddUHFfKrk5Hh8DvV7";
// 新建一個(gè)對象汰扭，建議只保存一個(gè)對象調(diào)用服務(wù)接口
let client = new AirpImageClassifyClient(APP_ID, API_KEY,SECRET_KEY);
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
let { fileID } = event; // 這里是因?yàn)槲覀冞@個(gè)函數(shù)只需要一個(gè)fileID的參數(shù)
let res = await cloud.downloadFile({ // 云服務(wù)的下載
fileID: fileID
})
console.log('調(diào)用百度ai函數(shù)打印1：', res);
let image = res.fileContent.toString("base64"); // 將圖片轉(zhuǎn)成base64格式稠肘，因?yàn)檫@里百度ai只接受base64格式
let val = await client.advancedGeneral(image);
return {
val
}
}
處理好百度AI接口后，在顯示圖片的那個(gè)頁面調(diào)用該接口
wx.cloud.callFunction({
// 需要調(diào)用的云函數(shù)名
name: 'baiduAi',
// 需要傳給云函數(shù)的參數(shù)
data: {
fileID: options.fileID
},
success: res => {
console.log('百度ai傳回來的數(shù)據(jù)：', res);
wx.hideLoading();
this.setData({
pic: res.result.val.result
})
console.log(this.data.pic);
},
fail: error =>{
console.log('接口失斅苊：', error);
}
})
這個(gè)時(shí)候项阴，一個(gè)看圖實(shí)物的小程序就完成啦，這里不只是可以辨別植物笆包，百度Ai接口對于其他類型圖片也可以識別环揽。
關(guān)注我，一起努力庵佣，共同進(jìn)步Ｇ附骸！后續(xù)會(huì)將代碼傳入github巴粪。
