各位開發者 介面檔案一定要看哦
介面檔案 https://ai.baidu.com/docs#/ImageClassify-API/71e05fb6
如何創建應用，獲取accesstoken 記得一定要看檔案的接入指南哦，官方已經給了圖文教程，小帥這里就不再重復說明了，
圖片不清晰的請看這里 https://my.oschina.net/xshuai/blog/3075992
--------------------------------------------分割線--------------------------------------------
- 創建自己的百度智能小程式
官網鏈接 https://smartprogram.baidu.com/developer/index.html
- 小程式名稱資訊填寫
名稱需要審核哦最好不要重名、選擇一個自己小程式的LOGO、簡介、服務范圍(一定要選擇正確哦)、標簽就自己找針對性的關鍵詞添加即可
- 查看自己的小程式
設定-開發設定 記錄自己的小程式id appkey、appsecret等相關重要資訊 備用
繼續往下，找到服務器域名 并配置百度ai介面域名 和 圖片轉base64的域名https://www.ydxiaoshuai.cnhttps://aip.baidubce.com
- 開發工具創建小程式
填寫自己小程式的appid、名稱、專案目錄后點擊完成即可
- 開始撰寫小程式代碼
圖片轉base64 百度智能小程式暫無直接可用組件或api，小帥為了方便大家，就封裝了一個在線的http的介面供大家使用，介面說明地址 https://www.kancloud.cn/ydxiaoshuai/image2base64/1170322
先來寫介面工具類等其他方法
baiduai.js
/** * 呼叫百度紅酒識別示例代碼 baiduai.js *///圖片轉base64介面let img2base64Url = 'https://www.ydxiaoshuai.cn/image/convert/base64/v1';let accessToken = ''//自己的accessToken 根據實際情況可以進行封裝 自動獲取tokenlet redwineUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/redwine';//紅酒識別介面//紅酒介面 圖片資料 回傳結果let redwineRequest = (base64Img,callback)=>{ //拼接介面body引數 let params = { image:base64Img } //發送介面請求 swan.request({ url: redwineUrl + '?access_token=' + accessToken, data:params, header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'POST', success:function(res){ callback.success(res.data) }, fail: function (res) { if (callback.fail) callback.fail() } })}function getImg2base64(){ return img2base64Url;}//暴露出去的介面&引數module.exports = { redwineRequest: redwineRequest, getImg2base64: getImg2base64}- 撰寫頁面樣式及相關代碼
- 頁面index.swan
頁面需要一個上傳圖片的按鈕 和圖片回顯的區域 還有介面識別回傳的資料顯示的區域帶html標簽代碼 老是被自動決議，只能圖片示例了
樣式index.css
給一些稍微友好 好看的ui樣式
.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;}.inner_text{ font-size: 36rpx; color: #1BA0E1; font-family: 微軟雅黑; word-break: normal; word-wrap: break-word;}.out_text{ margin-top:20rpx; margin-left: 10rpx; margin-right: 10rpx; border: 1rpx solid rgb(238, 238, 238); padding:10rpx 10rpx; font-size: 36rpx; font-family: 微軟雅黑;}- 撰寫頁面處理代碼
需要上傳圖片到小帥的圖片轉base64介面，回傳base64資料，再給介面進行識別，回傳資料進行頁面渲染，步驟不是很多哦
var app = getApp();//參考封裝的工具類方法、圖片轉base64介面地址var redWine = require('../../utils/baiduai.js');var img2base64Url = redWine.getImg2base64();Page({ data: { title: '酒知識 一步即知', result:null, img:"" },uploads: function() { var that = this; swan.chooseImage({ count: 1, sizeType: ['compressed'], success: res => { let image = ""; if(res.tempFiles[0].size > 4096*1024){ console.info('jinlaile '); swan.showToast({ title: '圖片檔案過大哦', icon:'none', mask:true, duration:1500 }); }else{ image = res.tempFilePaths[0]; } that.setData({ img:image }), swan.showLoading({ title: '資訊正在趕來的路上', mask: true }), //上傳圖片進行base64轉換 swan.uploadFile({ url: img2base64Url, filePath: image, name: 'file', success:function(res){ var data = https://www.cnblogs.com/AIBOOM/p/res.data; console.info('圖片轉base64回傳的結果：'+data.code); //如果成功，進行呼叫紅酒識別介面 if(data.code==200){ redWine.redwineRequest(data.data.base64,{ //介面回傳資料，對資料進行賦值 success(res){ swan.hideLoading(); that.setData({ result:res.result }) console.info(res) }, fail(res){ swan.hideLoading(); swan.showModal({ title: '識別失敗', content: '稍后再試一試' }); } }) } else { swan.showModal({ title: '圖片轉換出錯', content: '圖片轉換出錯' }); } } }); } });},});- 準備圖片進行功能測驗
- 紅酒圖
- 小程式演示圖
- 上傳代碼進行發布
- 上傳代碼
版本號、描述 自己定義即可 最低基礎庫 需要選擇哦
- 提交審核
開發管理-開發版本 提交審核 也可以選為體驗版 供部分人員優先體驗
測驗賬號 如果沒有 填寫 無 即可 對自己版本的描述 自己撰寫即可 提交審核即可
--------------------------------------------分割線--------------------------------------------
本次分享end～～～
作者：小帥
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/7230.html
標籤：其他
上一篇：SVN 部署（基于 Linux）