垃圾分類小程序 — 微信小程序源碼分享

介紹

這是一款個人開發的微信小程序,集 文字查詢、語音識別、拍照識別其垃圾分類的小工具,可以使用微信掃碼下方二維碼立即體驗哦。

源碼地址: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 做數據訪問層。

語音識別和圖像識別 採用 百度智能雲平臺服務。

安裝教程

  1. 開發需要準備相關的 IDE和 JDK8 開發環境 , 前端開發 uni-app 需要 下載 Hbuilder ,後端開發 需要下載 Eclipse 或 IDEA
  2. 其中的 語音識別和圖像識別 功能使用百度智能雲平臺服務,需要註冊登錄擁有自己的應用 (有5萬次調用 api 的免費使用量),在 後端 afterend 的 uniapp-api 當中的配置文件裏面需要進行配置 appidapikeysecretkey
  3. 數據庫準備,創建一個 名稱爲 garbageSort 的數據庫,把跟目錄下 garbagesort.sql數據庫文件進行導入進去即可。
  4. 後端啓動:第一步、在 afterend 目錄下找到 uniapp-api 模塊,把配置文件 application.yml.example 的 example 後綴去掉,命名爲 application.yml。第二步、在 application.yml 中配置好 數據庫相關信息 和 上述 百度請求 api 管理的配置信息即可。 第三步、運行 UniappApiApplication ,啓動後端服務,可以訪問 http://localhost:8899/wx/doc.html 查看接文檔
  5. 前端啓動:在 Hbuilder 中打開目錄 frontend ,在運行菜單中 點擊 運行到小程序模擬器 —> 微信開發者工具,或者 使用 微信開發者工具 打開 forntend -> unpackage -> dist -> 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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章