在這樣春暖花開的時(shí)間，是不是想要和男神女神一起出門踏青賞花啦？看到一款好看的花花草草，不認(rèn)識(shí)豈不是很丟人。不如動(dòng)手?jǐn)]個(gè)看圖識(shí)物的小程序吧，還能一展咱程序媛[猿]的魅力。ok，帶著這樣的目的，記錄下我的這次開發(fā)。此次開發(fā)用到了微信小程序的云服務(wù)開發(fā)，畢竟咱也沒有服務(wù)器，還有用到了百度AI的api。
首先，如何進(jìn)行小程序的云服務(wù)開發(fā)呢？一直都在聽我老大說這個(gè)概念，這次終于動(dòng)手操作啦，對(duì)于小程序，之前只做過一個(gè)商品購物的小程序，所以稍微有點(diǎn)基礎(chǔ)吧。
第一步： 首先在創(chuàng)建的時(shí)候勾選云開發(fā)，這里AppID一定要用真實(shí)的AppID，在微信公眾平臺(tái)開發(fā)設(shè)置可以找到：
此時(shí)會(huì)讓你創(chuàng)建個(gè)環(huán)境，這里創(chuàng)建的環(huán)境id后續(xù)需要寫到全局app.js里，注意：這里是環(huán)境id，不是環(huán)境名稱哦（在云開發(fā)控制臺(tái)設(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ā)控制臺(tái)云函數(shù)可以看到創(chuàng)建的云函數(shù)
這里點(diǎn)擊左上方的云開發(fā)，可以看到里面有數(shù)據(jù)庫，存儲(chǔ)，云函數(shù)等，這里用到了存儲(chǔ)和云函數(shù)功能
第二步：寫好頁面后，寫拍照，本地相冊(cè)上傳功能，這里微信小程序提供了相應(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。對(duì)于百度AI，需要去百度AI官網(wǎng)登錄注冊(cè)一個(gè)賬號(hào)，我是搜索植物識(shí)別，使用免費(fèi)使用功能，畢竟咱自己玩，一天也玩不了多少次，哈哈。打開后創(chuàng)建應(yīng)用，會(huì)生成我們需要的APP_ID, API_KEY,SECRET_KEY，對(duì)照著百度AI提供的文檔進(jìn)行開發(fā)。注意：這里需要安裝baidu-aip-sdk，可以在控制臺(tái)進(jìn)入相應(yīng)文件后直接npm安裝
附百度ai開發(fā)文檔（我選擇的是NodeSDK文檔）： https://ai.baidu.com/ai-doc/IMAGERECOGNITION/Fk3bcxjx7
一切就緒后，就開始處理圖片和百度AI之間的關(guān)系，將云服務(wù)中的圖片id傳入百度Ai接口中，返回的就是對(duì)應(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è)對(duì)象，建議只保存一個(gè)對(duì)象調(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接口對(duì)于其他類型圖片也可以識(shí)別。
關(guān)注我，一起努力，共同進(jìn)步?。『罄m(xù)會(huì)將代碼傳入github。
