一，技術選型和效果圖

1，技術選型

1-1，前端

• 小程序原生框架
• css
• JavaScript

1-2，管理后臺

• 云開發Cms內容管理系統
• web網頁
• 百度開發者控制臺

1-3，數據后臺

• 小程序云開發
• 云函數
• 云數據庫
• 云存儲
• 百度人工智能圖片識別
• 百度人工智能語音識別

2，效果圖預覽

2-1，首頁

2-2，新聞

新聞分類

新聞詳情和收藏

新聞評論和熱門推薦

評論文章

2-3，圖片識別

拍照識別，

比如我拍一個評估識別結果

查看識別的圖片屬于什么垃圾

2-4，語音識別

長按識別，并查看識別結果

查看識別的文字屬于什么垃圾

2-5，視頻

視頻列表

視頻詳情

2-6，搜索功能

搜索垃圾

搜索文章

2-7，垃圾分類列表

四種垃圾分類介紹

每種分類包含那些垃圾

2-8，答題競賽

每日答題

注冊用戶參加排名

積分排名

錯題集

正確率分析

2-9，個人中心

未登錄

已登陸

我的收藏

2-8，在線客服

客戶直接在小程序里發消息給客服

客服可以在網頁端，或者微信端管理消息

網頁端客服

小程序端客服

2-9，意見反饋

客戶可以直接在小程序端提建議，建議里可以添加圖片

管理員可以在小程序后臺，查看客戶的反饋

2-10上面回收商

3，cms管理后臺

我們這里的可視化網頁后臺使用的時云開發自帶的cms(內容管理)

3-1，登錄頁

3-2，管理后臺

我們可以在這里

• 1，添加新聞，刪除新聞，修改新聞
• 2，添加垃圾，刪除垃圾，修改垃圾
• 3，添加視頻，刪除視頻，修改視頻
• 4，添加題庫，刪除題庫，修改題庫
• 5，查看文章評論
• 6，添加回收商，刪除回收商，修改回收商

還有更多的功能，我會在視頻課里給大家用視頻來演示，這樣更直觀。

4，數據庫

數據庫我們這里用云開發自帶的云數據庫，下面的集合就是我們的數據表。

二~微信開發者工具的安裝與使用

我們在開發小程序之前，首先需要安裝小程序開發者工具，今天就來教大家安裝小程序開發者工具。

2-1，其實很簡單，只需要進入小程序官網，然后點擊工具，如下圖所示。

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html


當然了，也可以直接通過下面鏈接去下載
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2-2，下載安裝包如下

不管你是window還是mac電腦，只需要雙擊安裝包實現安裝即可。

等待安裝即可

安裝完成

2-3，進入開發者工具

第一次進入時，如下

點擊上圖的加號，就可以創建一個新項目，我們主要教大家如何導入項目，視頻里會有詳細講解。

三，注冊小程序

我們前面雖然可以用測試號創建小程序,但是測試號有很多功能會受限,比如我們后面講的云開發,必須是注冊小程序后才可以使用,所以今天我們就來講講小程序的注冊.

3-1，其實官方給的注冊步驟很詳細了

官方注冊地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
進入注冊頁面時,跟著提示一步步來就可以了

3-2，注意點:

如果只是學習的話,注冊個人小程序即可.
如果想商用,想使用微信支付,取用戶手機號等復雜功能,可以注冊企業小程序,不過企業小程序必須有營業執照才可以注冊.

四，云開發環境的創建

今天我們就來正式的創建自己的第一個云開發項目,在創建云開發之前,有下面幾個注意事項

• 1,必須注冊小程序后才可以開通云開發
• 2,一個小程序可以創建兩個云開發環境，學習的時候最好只創建一個

4-1,創建一個云開發項目

和創建普通小程序一樣,如上圖所示,需要注意的就是這里必須要填寫自己的appid,不可以用測試號. appid的獲取如下圖所示.

4-2,開通云開發

• 1,點擊下圖箭頭所示,如果你第一步創建項目時,沒有使用自己的appid,這里不會有下圖箭頭所示的云朵.
  

• 2,給云開發環境取名
  

  等待創建
  
  創建成功
  

• 3,獲取云開發環境id
  

4-3,初始化云開發環境

在app.js里寫入環境id,注意這里要用你自己的云開發環境id

wx.cloud.init({env: "xiaoshitou-xs7fr"})

用時候云開發創建好以后,初始化可能需要一點時間,所以如果這里初始化有報錯,記得關閉開發者工具,等幾分鐘再重新打開即可.

五，開通cms內容管理

5-1，開通cms的準備工作

如下圖所示，直接點擊開通內容管理(CMS)即可

開通cms需要你云開發里使用按量付費，如果你是第一次開通云開發，記得做如下選擇。

如果你已經開通過云開發，記得把付費模式改為按量付費。如果你一開始云開發不是按量付費的模式。

點擊完開通以后，會有如下彈窗，直接點擊確定即可。不要被付費嚇著，官方每月會送我們一定的免費額度的。學習得話基本上夠用了。

上面點完確定后，我們只是開啟了按量付費功能，因為cms得使用必須要開通按量付費才可以得。所以還要再點一次開通。如下圖

點完開通后，會有如下彈窗，直接點擊下一步即可。

然后我們需要設置登錄內容管理后臺得賬號和密碼，然后點擊確定即可

然后我們就等待內容管理功能得開通了，需要等幾分鐘。

開通成功以后，我們就可以通過下面這個地址進入管理后臺了。

后面我們統一稱內容管理為cms

5-2，注意事項

• 一個云開發環境對應一個內容管理(cms)
• cms開通會存在開通失敗的情況，如果開通失敗了，就用新的云開發環境去開通，如果新的云開發環境還是不行的話，那就只能重新去注冊一個新的小程序了。一個小程序是可以開通兩個云開發環境的。
• 現在小程序官方改規則了，使用內容模型，每月可能要付幾毛錢。不過學習使用的話，不會用太多的。一個月幾元錢足夠了。

5-3，登錄Cms可視化管理后臺

上面開通好以后，就可以通過后臺地址登錄管理后臺了。如下

5-4，在cms里創建后臺項目

第一次登錄，我們還需要創建一個項目

自己輸入項目名和項目id即可

然后點擊進入剛剛創建的項目

到這里我們的cmd可視化網頁管理后臺就創建好了

5-5，內容模型

我會在視頻里教大家如何創建內容模型，其實內容模型和我們數據庫里的數據表(集合)是對應起來的。

5-6，導入內容模型（一定要導入）

我們在cms后臺，點擊導入模型

然后把我源碼數據目錄下的內容模型拖入即可導入，這里的內容模型其實就是我們的數據表。

5-9，導入數據

我把新聞，垃圾分類，題庫這三個表的數據，提前給大家準備好了，大家在cms網頁點擊導入即可。

通過json導入

5-8，修改表權限

我們下面5個表要改下表權限 huishou，news ，questions，refuse，video 權限改為所有用戶可讀，僅創建者讀寫。

六，垃圾分類小程序的部署

今天我們來講下垃圾分類小程序的部署，部署中一些細節的問題也會給大家講解下。

6-1，下載源碼

如果有買我課，或者辦我的年卡，都可以獲取到源碼。

6-2，打開開發者工具導入源碼

源碼的導入我在小程序基礎課里有講的。這門課的詳情講解里也會教大家如何導入源碼的。

6-3，云開發環境的初始化

云開發的開通，在我云開發基礎入門里也有講，這里就不在累述。
創建好云開發后，要在app.js里進行云開發環境的初始化。

6-4，部署云函數（一定要部署）

先選擇云開發環境

如下圖所示，部署云函數。

下面幾個云函數都要部署，部署成功后文件前面會出現一個云朵的標識。

七，圖片和語音識別準備工作

7-1，注冊百度開發者賬號

我們這里使用了百度的圖片識別技術，所以在使用之前我們要現在注冊百度開發者賬號，官方地址：https://ai.baidu.com
注冊地址：https://login.bce.baidu.com
至于如何注冊，這里不需要我再教了吧，大家自行注冊就行了。

我們主要用到的是圖片識別和語音識別技術

7-2，注冊完記得要實名下

現在使用百度圖片識別，必須要實名認證下。

根據自己的情況選擇認證方式

學習的話，只需要個人認證即可。

7-3，創建圖片和語音識別應用

我們要使用圖片識別和語音識別功能，就要創建一個應用 。

我們可以在圖像識別下創建應用，記得勾選圖片識別和語音技術就行。
點擊完創建應用后，把圖像識別和語音技術全部勾選。

當然了，如果你一開始考慮清楚都用那些功能以后，可以把你想要的功能都勾選了，這樣以后就不用重復的創建應用了。

選個人即可

這樣我們就創建好應用了

創建好以后，下面兩個東西我們后面會用到，知道在哪里即可。

7-4，領取免費資源

7-4-1，圖像識別資源

同樣的我們要使用圖片識別功能，也是要去領取免費資源的，要不然我們連免費使用的額度都沒有，當然啦，如果百度后面改規則了，我們就只能付費購買這些資源了。如果只是學習用的話，用不了幾毛錢。

所以先把能領的都領取下。

估計百度是在為后期收費做準備，但是目前還有免費資源可以領取。既然可以白piao就先領取免費的。即便后期收費了，咱們學習使用估計也用不了太多，幾毛錢的估計就夠咱們學習用的了。

點擊免費領取資源

既然免費，當然全部領取了啊。領取完，耐心等待生效即可。如果你在學習的時候，不能在免費領取了，那就花幾毛錢付費下也行的，基本上幾毛錢就夠咱們學習使用了。

領取完圖片識別的，語音技術的也要領啊。

7-4-2，語音技術資源

點擊免費領取

把能領的全部領了。

領取完大概30分鐘內生效。

7-5，添加百度域名到小程序

我們這里要調用百度的接口，所以需要配置域名到小程序，如果不配置的話，就會報如下錯誤。

所以需要到小程序后臺，把https://aip.baidubce.com 和
https://vop.baidu.com添加到如下位置。


點擊上面的服務設置，然后做如下設置。

一般設置后10分鐘左右生效。

7-6，技術文檔

語音技術文檔：https://cloud.baidu.com/doc/SPEECH/index.html
圖片識別文檔：https://cloud.baidu.com/doc/IMAGERECOGNITION/index.html

語音識別用的是短語音識別極速版。

八，圖片和語音識別的配置

8-1，應用的識別的配置

如下圖所示，我們要配置百度識圖的apikey和sectetKey

把上圖app.js里的apikey和secretkey換成你自己的。我們筆記的前面7-4章節有教大家如何注冊百度應用。這里我視頻里也會做講解，如果有買我課，或者辦我的年卡，都可以獲取講解視頻。

8-2，使用百度的圖片識別技術

這個時候直接使用，通常會報下面的錯誤，如果你跟著筆記里的7-5的域名配置做過配置的話，就只需要耐心的等待幾分鐘即可，如果沒有配置，就會報如下錯誤。

這個錯誤是因為我們沒有配置安全域名所致。

把https://aip.baidubce.com 和
https://vop.baidu.com添加到如下位置

配置好以后，記得等待幾分鐘才會生效，這樣我們再次使用時，就可以成功的使用垃圾圖片識別功能了。

這樣我們就可以愉快的使用垃圾分類小程序的圖片識別功能了。

8-3，真機測試語音識別

有時候如果是老人使用垃圾分類，打字搜索不太方便，這個時候我們就可以通過語音識別來實現垃圾分類搜索了。
和上面的圖片識別一樣，我們只需要調用百度的語音識別技術即可

我們直接在電腦模擬器上是無法使用語音識別的，會報如下錯誤。

到官方文檔的錯誤碼里看下這個就知道了：https://cloud.baidu.com/doc/SPEECH/s/pkhq0q4vy

解決辦法就是電腦模擬器沒法識別語音，必須用真機調試。

點擊真機調試，然后用手機掃碼，就可以在手機上查看了。只有用手機才可以識別出語音。

效果圖：

點擊去搜索：

8-4， 注意事項

如果報下面所示的錯誤，說明你的免費額度用完了，最好去開通下百度的付費識別功能。

去官方文檔里查詢也是說免費額度用完了

所以要開通付費功能，如下
首先聲明，我不是為了推廣百度，之前百度確實是有一定的免費額度供大家使用的，既然他們現在不提供免費額度給大家使用了，咱們作為弱勢群體也沒有辦法，要么換別家，但是別家頁基本上收費了，要么就省一瓶飲料錢來學習下。

如下圖，點擊開通即可。這里最好開通按量付費，用多少付多少就行

可以看出，我們花幾元錢就可以調用上千次，學習的話這幾千次基本上夠用了。

但是開通之前還要實名認證下。

這里我就不在啰嗦，自己實名認證完即可回來開通就行。

實名認證完，記得去充點money，幾元錢就行了。

然后就可以愉快的進行圖像識別了。

九，圖片識別核心代碼

9-1，獲取acess_token

我們后面做的所有操作，基本上都要獲取這個。

所以我把源碼貼出來給到大家，client_id和client_secret記得換成你自己的。

wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token',data: {grant_type: 'client_credentials',client_id:, //應用的API Keyclient_secret: //應用的Secret Key},header: {'Content-Type': 'application/json' // 默認值},success: res => {this.setData({token: res.data.access_token //獲取到token})console.log('獲取到的token', this.data.token)}})

我們圖片識別其實和上面的人臉識別操作步驟差不多的，依然也是先開通圖片識別功能。

通過上圖或者這個地址進入圖片識別頁面：https://cloud.baidu.com/doc/IMAGERECOGNITION/index.html

9-2，圖片識別核心文檔

我們首先去看下官方文檔 https://cloud.baidu.com/product/imagerecognition/general

我們這里使用通用物體和場景識別，這樣可以識別很多東西

9-3，圖片識別核心代碼

我們做圖片識別依然是先拍照，然后上傳到百度進行圖片識別
我先看下識別結果的格式如下：

我這里把代碼全部貼出來給到大家

wxml代碼

<view style="width: 100%; height:calc(100vh - 200rpx);"><camera style="width: 100%; height:100%;" wx:if="{{isCamera}}" device-position="back" flash="off" binderror="error"></camera><image style="width: 100%; height:100%;" wx:else mode="widthFix" src="{{src}}"></image> </view><view class='photo-view'><view class='takePhoto' bindtap="takePhoto">{{btnTxt}}</view> </view><!-- 識別結果彈窗 --> <view class="mask" hidden="{{!isShow}}" bindtap="hideModal"></view> <view class="mask_content" hidden="{{!isShow}}"><view class="mask_title">識別結果如下</view><block wx:for="{{results}}" wx:key="index"><view class="mask_item">{{item.keyword}}(點擊查看)</view></block> </view>

wxss代碼

.photo-view {width: 100%;height: 200rpx;display: flex;flex-direction: column;justify-content: center;align-items: center; }.takePhoto {width: 100rpx;height: 100rpx;border-radius: 100rpx;background-color: #00cc77;color: white;display: flex;flex-direction: column;justify-content: center;align-items: center; }/* 識別出的結果 */ .mask {position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.5;background: black;/* 設置組件的層級 */z-index: 100; }.mask_content {position: fixed;left: 80rpx;top: 200rpx;right: 80rpx;height: 600rpx;background: white;z-index: 200;overflow: auto; }.mask_title {text-align: center;font-size: 50rpx;color: red;margin-bottom: 20rpx; }.mask_item {text-align: center;padding: 15rpx;border-bottom: 1px solid gainsboro; }

js代碼

const app = getApp() Page({data: {accessToken: "",isShow: false,results: [{keyword: "人物特寫",score: 0.813571,root: "人物-人物特寫"},{keyword: "男孩",score: 0.630612,root: "人物活動-人物特寫"},{keyword: "女孩",score: 0.353866,root: "人物-人物特寫"}],src: "",isCamera: true,btnTxt: "拍照"},onLoad() {this.ctx = wx.createCameraContext()var time = wx.getStorageSync("time")var curTime = new Date().getTime()var timeInt = parseInt(time)var timeNum = parseInt((curTime - timeInt) / (1000 * 60 * 60 * 24))console.log("=======" + timeNum)var accessToken = wx.getStorageSync("access_token")console.log("====accessToken===" + accessToken + "a")// accessToken超過30天過期if (timeNum > 28 || (accessToken == "" ||accessToken == null || accessToken == undefined)) {this.accessTokenFunc()} else {this.setData({accessToken: wx.getStorageSync("access_token")})}},// 第一步，拍照takePhoto() {var that = thisif (this.data.isCamera == false) {this.setData({isCamera: true,btnTxt: "拍照"})return}this.ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath,isCamera: false,btnTxt: "重拍"})wx.showLoading({title: '正在加載中',})wx.getFileSystemManager().readFile({filePath: res.tempImagePath,encoding: "base64",success: res => {that.shibie(res.data)},fail: res => {wx.hideLoading()wx.showToast({title: '拍照失敗,未獲取相機權限或其他原因',icon: "none"})}})}})},//第二步：上傳圖片進行識別shibie(image) {var that = thisif (image == "") {wx.showToast({title: '請重試',icon: 'loading',duration: 500})return}if (image != "") {wx.request({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general',method: 'POST',data: {access_token: that.data.accessToken,image: image,},header: {'Content-Type': 'application/x-www-form-urlencoded' // 默認值},success(res) {wx.hideLoading()console.log("圖片識別返回結果", res)// 如果access_token過期，就重新請求access_tokenlet code = res.data.err_codeif (code == 111 || code == 100 || code == 110) {wx.clearStorageSync("access_token")wx.clearStorageSync("time")that.accessTokenFunc()return}// 返回的識別結果let results = res.data.resultif (results != undefined && results != null) {that.setData({isShow: true,results: results})console.log("識別到的結果", results)} else {wx.clearStorageSync("access_token")wx.showToast({icon: 'error',title: '識別失敗,請重試',})}}});}},// 獲取百度的AccessTokenaccessTokenFunc() {wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token',data: {grant_type: 'client_credentials',client_id: app.globalData.client_id, //應用的API Keyclient_secret: app.globalData.client_secret //應用的Secret Key},header: {'Content-Type': 'application/json' // 默認值},success: res => {this.setData({accessToken: res.data.access_token //獲取到token})console.log('獲取到的token', this.data.accessToken)wx.setStorageSync("access_token", this.data.accessToken)wx.setStorageSync("time", new Date().getTime())},fail: res => {wx.clearStorageSync("access_token")wx.showToast({icon: 'error',title: '調用失敗,請重新嘗試',})}})},// 選擇識別的結果radioChange: function (e) {console.log(e)console.log(e.detail)console.log(e.detail.value)wx.navigateTo({url: '/pages/result/list?keyword=' + e.detail.value,})},// 隱藏彈窗hideModal: function () {this.setData({isShow: false,})},})

效果圖如下：

識別出來的結果如下：

到這里我們圖片識別的功能也做好了。歡迎關注編程小石頭，后面會出更多更好的內容。

十，語音識別核心代碼

10-1，獲取acess_token

我們語音識別和圖片識別公用一個acess_token，所以代碼還是下面的這個。

所以我把源碼貼出來給到大家，client_id和client_secret記得換成你自己的。

wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token',data: {grant_type: 'client_credentials',client_id:, //應用的API Keyclient_secret: //應用的Secret Key},header: {'Content-Type': 'application/json' // 默認值},success: res => {this.setData({token: res.data.access_token //獲取到token})console.log('獲取到的token', this.data.token)}})

10-2，語音識別核心文檔

https://cloud.baidu.com/doc/SPEECH/s/Ikhq0parc

10-3，核心代碼

10-3-1，wxml代碼

<!-- 語音識別 --> <view class='ai_root'><image src='/image/speech.png' class='ai_img' bindtouchstart='onTouchStart' bindtouchend='onTouchEnd' /><text class='ai_txt'>長按語音識別</text> </view> <view wx:if="{{canRecordStart}}" class="speak_style"><image wx:if="{{j==1}}" class="sound_style" src="/image/speech_1.png"></image><image wx:if="{{j==2}}" class="sound_style" src="/image/speech_2.png"></image><image wx:if="{{j==3}}" class="sound_style" src="/image/speech_3.png"></image><image wx:if="{{j==4}}" class="sound_style" src="/image/speech_4.png"></image><image wx:if="{{j==5}}" class="sound_style" src="/image/speech_5.png"></image> </view>

10-3-2，js代碼

/*** 作者：編程小石頭* 微信：2501902696*/ const app = getApp()Page({isSpeaking: false,data: {canRecordStart: false,accessToken: "",},onLoad: function (options) {// 獲取accessTokenvar time = wx.getStorageSync("time")var curTime = new Date().getTime()var timeInt = parseInt(time)var timeNum = parseInt((curTime - timeInt) / (1000 * 60 * 60 * 24))console.log("=======" + timeNum)let accessToken = wx.getStorageSync("access_token")console.log("====accessToken===" + accessToken)// accessToken超過30天過期if (timeNum > 28 || (accessToken == "" ||accessToken == null || accessToken == undefined)) {this.accessTokenFunc()} else {this.setData({accessToken: wx.getStorageSync("access_token")})}},// 獲取百度的AccessTokenaccessTokenFunc() {wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token',data: {grant_type: 'client_credentials',client_id: app.globalData.client_id, //應用的API Keyclient_secret: app.globalData.client_secret //應用的Secret Key},header: {'Content-Type': 'application/json' // 默認值},success: res => {this.setData({accessToken: res.data.access_token //獲取到token})console.log('獲取到的token', this.data.accessToken)wx.setStorageSync("access_token", this.data.accessToken)wx.setStorageSync("time", new Date().getTime())},fail: res => {wx.clearStorageSync("access_token")wx.showToast({icon: 'error',title: '調用失敗,請重新嘗試',})}})},// 語音識別onTouchStart: function () {console.log('onTouchStart!' + this.data.canRecordStart);speaking.call(this);this.setData({canRecordStart: true});this.startRecord();},onTouchEnd: function () {console.log('onTouchEnd!canRecordStart:' +this.data.canRecordStart + '----isSpeaking:' + this.isSpeaking);clearInterval(this.timer);this.setData({canRecordStart: false});if (this.isSpeaking) {wx.getRecorderManager().stop();}},//開始錄音的時候startRecord() {console.log('開始錄音');const recorderManager = wx.getRecorderManager();const options = {duration: 30000, //指定錄音的時長，單位 mssampleRate: 16000, //采樣率numberOfChannels: 1, //錄音通道數encodeBitRate: 48000, //編碼碼率format: 'aac', //音頻格式，有效值 aac/mp3};console.log('開始正式錄音前，canRecordStart：' + this.data.canRecordStart);//開始錄音if (this.data.canRecordStart) {recorderManager.start(options);this.isSpeaking = true;}recorderManager.onStart(() => {console.log('recorder start')});recorderManager.onPause(() => {console.log('recorder pause')})recorderManager.onStop((res) => {this.isSpeaking = false;console.log('recorder stop', res);//wx.hideLoading();if (res && res.duration < 600) {wx.showToast({title: '說話時間太短啦！',icon: 'error'})return;}if (res && res.duration > 8000) {wx.showToast({title: '說的有點長，可以精簡點呀~',icon: 'error'})return;}const {tempFilePath} = resthis.speechRecognition(res);})//錯誤回調recorderManager.onError((res) => {// console.log('錄音錯誤回調：' + JSON.stringify(res));wx.showModal({title: '請打開錄音權限',success: res => {if (res.confirm) {wx.openSetting({withSubscriptions: true,})}}})})},// 識別語音speechRecognition: function (res) {wx.showLoading({title: '識別中...',})var that = this;var fileSize = res.fileSize;var tempFilePath = res.tempFilePath;var format = 'pcm';if (tempFilePath) {format = tempFilePath.substring(tempFilePath.lastIndexOf('.') + 1);}const fileSystemManager = wx.getFileSystemManager()fileSystemManager.readFile({filePath: res.tempFilePath,encoding: "base64",success(res) {// console.log(res);var base64 = res.data;var data = {"format": format,"rate": 16000,"dev_pid": 80001,"channel": 1,"token": that.data.accessToken,"cuid": "baidu_workshop","len": fileSize,"speech": base64}// console.log('語音識別請求參數：' + JSON.stringify(data));wx.request({url: 'https://vop.baidu.com/pro_api',method: 'post',data: data,success(res) {wx.hideLoading();console.log("========================語音識別結果", res.data)var result = res.data.result;if (result && result.length > 0) {var location = result[0].lastIndexOf("。");// var location = result[0].lastIndexOf("");var text = '';console.log(result[0]);console.log('符號位置：' + location);text = result[0].replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\。|\，|\！|\；|\>|\/|\?]/g, "")console.log('識別出來的文字' + text);if (location && location > 0) {text = text.substr(0, location)console.log('去除末尾句號' + text);}wx.showModal({title: '識別結果',content: '識別結果是《' + text + "》點擊確定去搜索頁查看屬于哪類垃圾",success: res => {if (res.confirm) {wx.navigateTo({url: '/pages/search/search?searchKey=' + text + '&type=0',})}}})} else {//沒有result，認為語音識別失敗wx.showModal({title: '提示',content: '不知道你說的啥，可以再試試~',showCancel: false,success(res) {if (res.confirm) {console.log('用戶點擊確定')} else if (res.cancel) {console.log('用戶點擊取消')}}})}},fail(error) {wx.hideLoading();console.log("====================語音識別失敗", error);wx.showToast({icon: 'none',title: '請求失敗了，請確保網絡正常，重新試試~',})}})},fail(res) {wx.hideLoading();console.log(res)}})}, }) //麥克風幀動畫 function speaking() {var _this = this;//話筒幀動畫var i = 1;this.timer = setInterval(function () {i++;i = i % 5;_this.setData({j: i})}, 200); }

10-3-3，wxss代碼

.ai_root {width: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 50rpx; }.ai_img {width: 250rpx;height: 250rpx;margin-top: 150rpx; }.ai_txt {font-size: 44rpx;font-weight: bold;color: #00cc77;margin-top: 30rpx; }/* 語音識別動畫 */ .speak_style {position: fixed;top: 250rpx;right: 20rpx;z-index: 999;justify-content: flex-end;align-items: flex-end;flex-direction: column;}.sound_style {width: 128rpx;height: 128rpx; }

效果圖如下：

點擊去搜索：

到這里我們核心功能就基本上講的差不多了

總結

以上是生活随笔為你收集整理的2022年最新垃圾分类小程序，含图片识别和语音识别，视频播放，垃圾分类搜索，垃圾知识答题，积分排行，文章推荐，收藏文章等功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。