介紹
這是一款個人開發的微信小程序,集 文字查詢、語音識別、拍照識別其垃圾分類的小工具,可以使用微信掃碼下方二維碼立即體驗哦。
源碼地址:https://gitee.com/aaluoxiang/GarbageSort?_from=gitee_search#%E4%BB%8B%E7%BB%8D
部分預覽圖,詳情請掃描上方小程序碼體驗
端:微信小程序 採用 uni-app 開發框架,uni-app
是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。
後端:採用 SpringBoot 2 構建後端服務,才 Swagger2 構建 Restful風格接口文檔,數據庫採用 Mysql ,使用 Mybatis-Plus 做數據訪問層。
語音識別和圖像識別 採用 百度智能雲平臺服務。
安裝教程
- 開發需要準備相關的 IDE和 JDK8 開發環境 , 前端開發
uni-app
需要 下載 Hbuilder ,後端開發 需要下載Eclipse
或IDEA
。 - 其中的 語音識別和圖像識別 功能使用百度智能雲平臺服務,需要註冊登錄擁有自己的應用 (有5萬次調用 api 的免費使用量),在 後端
afterend
的uniapp-api
當中的配置文件裏面需要進行配置appid
、apikey
、secretkey
。 - 數據庫準備,創建一個 名稱爲
garbageSort
的數據庫,把跟目錄下garbagesort.sql
數據庫文件進行導入進去即可。 - 後端啓動:第一步、在
afterend
目錄下找到uniapp-ap
i 模塊,把配置文件application.yml.example
的 example 後綴去掉,命名爲application.yml。第二步、在 application.yml
中配置好 數據庫相關信息 和 上述 百度請求 api 管理的配置信息即可。 第三步、運行UniappApiApplication
,啓動後端服務,可以訪問 http://localhost:8899/wx/doc.html 查看接文檔 - 前端啓動:在 Hbuilder 中打開目錄
frontend
,在運行菜單中 點擊運行到小程序模擬器
—>微信開發者工具
,或者 使用 微信開發者工具 打開forntend
->unpackage
->dis
t ->dev
->mp-weixin
,即可運行微信小程序。(二次開發的時候在 Hbuilder 中修改文件,保存後可以到微信開發者工具看預覽效果)
技術棧
技術 | 名稱 | 版本 | 官網 |
---|---|---|---|
uni-app | 基於 vue 的跨端框架 | 2.1.0.20190713 | https://uniapp.dcloud.io/ |
vuejs | 漸進式 JavaScript 框架 | -- | https://cn.vuejs.org/ |
SpringBoot | Java 開源應用框架 | 2.1.6.RELEASE | https://spring.io/projects/spring-boot |
Mybatis-Plus | Mybatis 增強工具 | 3.0.6 | https://mybatis.plus/ |
swagger2 | 時間選擇器 | 2.8.0 | https://swagger.io/ |
swagger-bootstrap-ui | swagger 增強UI實現 | 1.8.8 | https://github.com/xiaoymin/Swagger-Bootstrap-UI |