基于微信小程序的垃圾分類系統的實現目錄TOC\o"1-3"\h\u摘要 摘要2020年5月1日北京市公布了《北京市公共機構生活垃圾分類標準》，各地也相繼公布各地的垃圾分類條例。垃圾分類走入家家戶戶，一時間“垃圾分類”成為年度網絡熱詞。如何分辨生活中的垃圾屬于什么種類，成了人們關心的問題。隨著移動應用的發展，人們更偏向于在移動設備上找到答案，垃圾分類系統與小程序開發的結合，能夠幫助人們解決這一難題。本系統通過分析移動設備上一些垃圾分類系統的現狀和發展，采用微信小程序作為系統框架。利用小程序·云開發對垃圾分類系統的垃圾條目進行設計整理。使用WXML、JS、WXSS等語言對小程序頁面進行設計，系統開發采用無服務器架構，利用云開發管理數據庫，采用云函數管理調用的api。關鍵詞：微信小程序；垃圾分類；云開發；緒論本章主要對垃圾分類系統的背景和現狀進行研究分析，分析現階段不同系統的優劣，從多個方向論述系統的研究意義。1.1研究背景2019年9月，為了全面深入貫徹落實習近平總書記關于垃圾分類工作的重要指示精神。國家機關事務管理局印發通知，公布《公共機構生活垃圾分類工作評價參考標準》。2020年5月北京市發布相關垃圾分類標準，全國各地相繼出臺垃圾分類政策，雖然截至目前還有一些地區的垃圾分類政策未頒布，生活垃圾分類已成為勢不可擋的全民趨勢。其中蘇州在2020年6月1日也推出了蘇州市相關標準。2020年5月中國移動互聯網用戶達到11.64億高位，越來越多互聯網服務平臺轉向移動設備，移動設備上的垃圾分類系統也是如雨后春筍，層出不窮。傳統的利用網站查詢垃圾分類信息的方式，網頁復雜，需要用戶耗費時間辨別真偽，難以為“一時詞窮”,找不到合適形容垃圾品類的詞語時，無法提供更好的幫助。應用市場中垃圾分類應用程序，往往存在占用手機空間資源的問題。微信平臺的小程序很好地解決了這一難題：微信小程序近水樓臺先得月，獲得了微信平臺所配備的大量資源，憑借著人們對微信社交網絡的深度依賴，微信小程序建立了緊密的用戶連接。憑借微信小程序這一輕應用的特殊性，幫助用戶無需下載就能完成。便捷的下拉獲取小程序功能，使得越來越多用戶選擇微信小程序垃圾分類系統解決自己的分類問題。可以說未來的互聯網世界必將有更加豐富的小程序出現。1.2研究現狀目前大部分用戶使用的垃圾分類系統分為app、支付寶小程序、微信小程序三種類型。app型垃圾分類系統在應用商店中數量不多，下載次數也不高，后兩種類型系統的用戶數量都是app難以比擬的。原因可能是對于系統開發者，app開發周期長，需要技術復雜，不同系統難以同步上線，對開發者技術水平有硬性要求。從用戶的角度來看app型垃圾分類系統需要占用比后兩者更多的網絡資源下載，還需要占據移動設備的存儲資源安裝，不方便使用。小程序型垃圾分類系統可以提供近乎媲美app的服務。且小程序占用資源更少，可以完美達到“隨用隨開”“用完即走”的效果，更能得到用戶的青睞。支付寶小程序型垃圾分類系統一般被嵌入在城市服務模塊中，屬于政府服務小程序，個人和企業開發支付寶型垃圾分類小程序比較少。可能是由于支付寶小程序提供的官方api接口主要關于支付寶相關的商家支付服務，不能很好的提供開發者所需要的支持。在微信app中，用戶可以搜索到上千種垃圾分類系統小程序。微信作為日活上億的社交網絡app,方便了小程序的傳播,更能達到增加系統用戶的效果。開發人員只要熟悉網頁前端開發就可以很快上手微信小程序的開發設計，微信小程序可以在不同系統的手機上同步上線，方便了系統上線和更新。用戶對于微信下拉顯示小程序的功能接受度高，也習慣了搜索相關服務小程序，讓每個小程序都有機會被使用，增加新的用戶。1.3本系統主要工作本系統采用微信小程序框架MINA作為開發框架，使用WXML、WXSS、JS作為開發語言，采用云開發實現系統的數據存儲，圖像識別等api調用等功能，使用微信開發者工具進行開發，實現“家中分好類”、“定時扔下樓”、“定點精確投”的基礎需求。具體實現功能如下：垃圾分類條目的文字搜索、百度AI智能拍照識別、智能助理問詢四種垃圾知識學習、缺失垃圾條目數據添加校園內垃圾桶信息查看1.4論文結構本文主要分六章。各章具體內容如下：第一章緒論，主要介紹本文研究背景和現狀，簡單概括系統主要工作和論文結構。第二章系統技術分析，敘述說明垃圾分類系統所用到的開發技術和工具，主要采用微信官方框架MINA，WeUI作為項目的UI框架，數據庫采用小程序云開發·云數據庫。第三章需求分析，對本系統的系統架構和數據庫設計進行需求分析。第四章系統設計,介紹小程序創建過程，分別介紹系統分類、識別、垃圾桶模塊的實現過程。對主要代碼進行說明。第五章系統測試，真機和電腦分別對系統進行調試，測試各個模塊是否能夠正常使用第六章結論，得出結論，展望系統未來前景第二章系統技術分析本章對本垃圾分類系統用到的開發技術進行介紹，簡單介紹系統選用的技術和選用相關技術的原因。2.1微信小程序框架 熟悉網頁開發就可以迅速上手小程序開發，兩者有著極大的相似性，開發者可以毫不費力地將網頁移植到微信小程序中。為與網頁開發類似，小程序主要使用的開發語言是JavaScript。在網頁開發過程中，網頁腳本線程有時會造成網頁界面阻塞，或是進程阻塞的情況。為避免這種情況，在微信小程序中，渲染層和邏輯層被放在不同的線程中進行。這種方式也加快了小程序的渲染和運行速度。在微信小程序種WXML模板和WXSS樣式工作在渲染層，JS腳本工作在邏輯層。圖2.1微信小程序的目錄架構圖2.1微信小程序的目錄架構主體文件如圖2.1所示，app.js、app.json、app.wxss作為主體文件決定小程序的全局框架。app.js負責小程序的生命周期。在小程序開發過程中，需要制定小程序的生命周期函數，如onLaunch(監聽小程序初始化)、onShow(監聽小程序由后臺進入前臺)、onHide（監聽小程序收起），這時就要采用app.js用來定義。app.js同樣用來定義函數的使用和程序中的全局數據。app.wxss和網頁設計中的css類似，app.wxss負責小程序的全局樣式渲染，頁面文件pages中的頁面樣式優于全局樣式展示。app.json文件用來設置小程序中的5個功能：配置頁面路徑，配置窗口表現，配置標簽導航，配置網絡超時，配置debug模式。頁面文件 頁面文件由js文件、wxml文件、wxss文件、json文件構成， 和網頁開發類似，js負責頁面的邏輯層，wxml負責頁面的視圖層，wxss負責對頁面進行渲染輔助wxml顯示頁面效果。微信小程序特有的json文件，負責小程序頁面數據的配置。2.2微信小程序常見UI框架介紹2.2.1WeUIWeUI是當前小程序開發使用最普遍的一套樣式庫，由微信官方團隊和小程序團隊為微信小程序量身設計，與微信小程序適配最好，令用戶使用感更加統一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。效果比較單一，可能會缺少一定亮點。2.2.2VantWappo VantWeapp由贊移動端組件庫提供，兩者基于相同的視覺規范，提供一致的API接口，幫助開發者快速搭建小程序應用。組件樣式分類井井有條，樣式簡潔美觀2.2.3TaroUITaroUI是一款基于Taro框架開發的多端UI組件庫。它提供基于Taro開發UI組件一套組件，可以在微信小程序，支付寶小程序，百度小程序，H5多端適配運行。提供便捷優雅的API和可靈活的使用組件。2.2.4ColorUIColorUI是一個高度自定義的Css樣式庫，包含了開發常用的元素和組件，元素組件之間也能相互嵌套使用。提供鮮亮的高飽和色彩，功能齊全，組件庫完備。本系統選用了微信小程序的原生UI框架，它開發更簡單，也更適配小程序頁面，減少了不必要的開發困難。2.2數據庫數據庫是一種電子化的文件柜，不同數據結構有組織的集合組成數據庫。數據庫通常由數據庫管理系統(DBMS)儲存。數據庫與數據庫管理系統和關聯程序被簡稱為數據庫。每個數據庫都設計了一個或多個API負責數據的增、刪、查、改。目前被較多開發者使用的數據庫有SQLServer、MySQL、Oracle等。本系統使用小程序云數據庫存儲，整理和分類垃圾信息。下面對小程序云數據庫進行介紹。圖2.2關系型數據庫和文檔型數據庫的參照關系小程序官方為云開發提供了一種J圖2.2關系型數據庫和文檔型數據庫的參照關系數據庫API由小程序端和管理端兩部分構成，小程序端有著更嚴格的調用權限，需要管理員在管理端進行讀寫權限選擇。開發者可在小程序內直接調用API，方便用戶進行非敏感數據的操作：例如數據讀取。管理端包括云函數和控制臺，對于有更高安全要求的數據，可在云函數內通過服務端API進行操作。云函數的環境與小程序端完全隔離，在云函數上可以私密且安全的操作數據庫。數據庫API包含增、刪、改、查的能力，使用API操作數據庫只需三步：獲取數據庫引用、構造查詢/更新條件、發出請求。2.3小程序云函數小程序云函數功能是騰訊云提供的無服務器環境。當開發人員使用云函數功能時，騰訊云會計算基本程序資源，例如服務器處理器，存儲，網絡和其他資源配置/維護，代碼部署和升級。彈性擴展，負載平衡，安全升級，資源運行狀況監視。開發人員必須將服務器管理交給騰訊云進行處理，無法再自定義環境或連接到服務器。云函數會自動提供部署給同一區域內的多個可用區域，以提供較高的容錯能力。在執行云函數時，它會根據需求負載進行擴縮。云函數的原生功能可以自動從每天幾個請求遷移到每秒數千個請求。只需為已經運行的云功能付費，即可在各種情況下確保服務可用性和可靠性，而無需手動配置或干預。如果云功能未運行，則不收取任何費用。開發人員可以調整云函數的運行時間。例如，再COSBucket下載時執行云函數，刪除文件時運行云函數，使用Ckafka處理消息時執行云函數，通過SDK調用應用程序時執行云函數，將云函數設置為定期執行。開發者可以使用云函數作為COS服務的數據處理觸發程序輕松實現IFTTT邏輯您還可以創建靈活的同步自動化任務來代替手動任務，輕松創建靈活且可控的軟件體系結構。Serverless（無服務器）并不意味著沒有服務器。使用無服務器，開發者不必擔心基礎資源，也不必連接到服務器，即可進行優化。只關注代碼的核心，跳過復雜繁瑣的基本工作。用。核心事件完全由事件或請求觸發，平臺會根據需要自動并行調整服務資源。無服務器提供幾乎無限的容量擴展。無事件時，資源將不會運行。代碼是無狀態運行的，可以輕易實現快速迭代、極速部署。第三章需求分析3.1系統架構本系統由四個模塊構成：垃圾識別、垃圾分類、垃圾桶位置垃圾分類系統模塊圖3.1.1垃圾識別模塊垃圾識別模塊提供文字檢索、拍照識別、智能問詢三種服務。用戶在系統開始頁面過在文本框輸入垃圾信息進行檢索，顯示垃圾信息或相近垃圾條目供用戶參考，輸入非法信息會彈出提示。點擊相機按鈕可以獲取拍照識別功能，拍照后遞交給百度智能AI得到垃圾信息或相近垃圾信息列表供用戶選擇，選擇后得到相應結果。3.1.2分類模塊垃圾桶模塊分別顯示了四種垃圾：廚余垃圾、有害垃圾、可回收垃圾、其他垃圾。按照首字母拼音順序對垃圾進行排序。在分類模塊用戶可以對需要補充的垃圾數據進行添加，再由開發者在后臺決定是否添加。3.1.3垃圾桶模塊垃圾桶模塊通過將靜態垃圾桶數據添加到數組中，在地圖中顯示校園內的垃圾桶位置。用戶可以點擊標記點獲得垃圾桶信息并進行導航。3.2數據庫設計垃圾的數據條目應該由垃圾編號、垃圾類型、垃圾名稱、添加時間構成。所以垃圾條目的數據庫設計應該包括垃圾編號id、垃圾類型sortId（1指可回收物、2指有害垃圾、3指濕垃圾、4指干垃圾）、垃圾名稱name、垃圾添加時間ctime構成。表3.1product表編號名稱垃圾類型添加時間idnameSortIDCtime1艾草310/25/202017:42:132棒棒糖310/25/202017:50:123白茶310/25/202017:52:144扁豆310/25/202017:51:165布丁310/25/202017:42:17同時需要考慮到用戶沒有識別到或檢索到的垃圾情況，需要對數據庫內容進行添加。但為了保持數據庫的準確和整潔，應該把用戶添加數據和原有垃圾數據庫區分開來。此外本系統使用云數據庫的免費版本，每日操作次數是有限的，大量的惡意添加會影響小程序的正常運行，所以為用戶另建一個表是十分必要的。表3.2commit表編號名稱垃圾類型添加時間idnameSortIDCtime1青醬34/25/202117:42:132迪迦14/25/202117:50:123奇奇蒂蒂14/25/202117:52:14如上圖表3.2，在小程序端添加相應文本框或許數據，可以在云數據庫中得到上述結果。第四章系統設計4.1創建AppID圖4.1申請appid本系統需要用到云開發對數據庫進行設計，云函數對api進行調用，測試號無法使用云開發功能進行編碼。所以需要創建APPID。如圖4.1所示在微信小程序注冊頁填寫開發者信息和小程序應用方向進行注冊審批，就可以得到app圖4.1申請appid4.2安裝開發者工具創建程序如圖4.2所示，在開發者工具下載頁面根據操作系統選擇相應安裝包，為小程序開發作準備。考慮到后續數據庫和拍照識別、地圖導航等功能的調用，創建程序時需要點選小程序·云開發對項目進行相關支持。圖4.圖4.2創建小程序4.3頁面初步設計在app.json中對頁面進行全局配置，在tabBar中設計系統的模塊list。模塊劃分分為三個：“識別”“分類”“垃圾桶”，在page中添加ai、sort、trash頁面對模塊進行編寫（見圖4.3），分別在pagepath中對相關頁面進行鏈接。代碼如下所示。圖圖4.3Pages目錄//對底部模塊框進行設計，在pagePath部分進行跳轉//對底部模塊框進行設計，在pagePath部分進行跳轉"tabBar":{"list":[{"pagePath":"pages/ai/index","text":"識別",//導入識別圖片"iconPath":"images/icon_ai_default.png","selectedIconPath":"images/icon_ai.png"},{"pagePath":"pages/sort/sort","text":"分類",//導入分類圖片"iconPath":"images/icon_sort_default.png","selectedIconPath":"images/icon_sort.png""selectedIconPath":"images/icon_sort.png"},{"pagePath":"pages/trash/trash","text":"垃圾桶",//導入垃圾桶圖片"iconPath":"images/trash.png","selectedIconPath":"images/trash_default.png"}]},4.4識別模塊設計圖4.4識別模塊頁面識別模塊被添加在pages/ai/index文件夾中，識別模塊需要完成3個功能：文字檢索、拍照識別和智能問詢功能（如圖4圖4.4識別模塊頁面4.4.1文字檢索文字檢索功能為用戶提供了輸入垃圾名稱獲得垃圾種類和詳細信息的方法。文字檢索功能實現通過input獲取用戶輸入的垃圾名稱，用bindtap綁定觸摸事件跳轉到search文件中，search文件用來鏈接小程序數據庫對文字內容進行搜索。垃圾名稱被儲存在云數據庫中的product中，所以在設計時需要連接數據庫加載相關數據，以下代碼實現了連接云數據庫的product集合（垃圾信息表）、搜索并展示搜索結果、跳轉垃圾詳情頁面的功能。//連接云數據庫constdb=wx.cloud.database()//連接云數據庫constdb=wx.cloud.database()//對product集合進行加載onLoad:function(options){this.data.dataCount=db.collection('product').count()},name:db.RegExp({regexp:that.data.searchTxt,name:db.RegExp({regexp:that.data.searchTxt,for(vari=0;i<res.data.length;i++)若成功，將符合用戶結果的字符串遍歷顯示出來。for(vari=0;i<res.data.length;i++)wx.showToast({title:'數據加載失敗',wx.showToast({title:'數據加載失敗',icon:"none"})檢索成功后，用戶點擊獲得垃圾條目或相近垃圾條目，屏幕彈出不同類型垃圾信息供用戶了解（如圖4.5所示）switch(parseInt(index)){//可回收switch(parseInt(index)){//可回收case1:logoImg=""break;//有害case2:logoImg=""break;圖4.5彈出垃圾信息頁面//濕垃圾case3:logoImg=""break;//干垃圾case4:logoImg=""break;}//可回收物彈出頁面的設計{color:"#014782",bgcolor:"#e9e8e6",//可回收物彈出頁面的設計{color:"#014782",bgcolor:"#e9e8e6",logo:"/images/RecycleableWaste.jpg",name:"可回收物",content:"可回收物介紹",desc:"可回收物的常見類型",action:["投放標準"],}]4.4.2圖片識別圖片識別功能幫助用戶拍照得到垃圾信息。圖片識別功能的實現，首先需要獲取用戶照相機權限，在index頁面中利用bindtap綁定照相機圖標。用戶點擊照相機圖標后，bindtap識別事件，跳轉到camera頁面。camera頁面用來實現拍照、調用百度識圖api、canvas繪圖工具處理拍照圖片、編碼圖片路徑，獲取accesstoken接口功能。上傳后百度識圖api得到結果列表并顯示在拍照頁面。用戶對認同的結果進行點選后，如上述文字檢索所介紹，在數據庫搜索相應字段，得到結果后顯示垃圾詳細信息。實現代碼如下所示。拍照首先需要用戶對攝像頭進行授權。wx.getSetting({wx.getSetting({success(res){//獲取攝像頭權限success(){console.log('授權成功')},fail()//獲取攝像機權限失敗title:'提示',content:'尚未進行授權，部分功能將無法使用',wx.navigateTo({url:'camera/camera',wx.navigateTo({url:'camera/camera',})},fail()//獲取攝像機權限失敗title:'提示',content:'尚未進行授權，部分功能將無法使用',//拍照方法//拍照方法takePhoto(){varthat=thisif(this.data.isCamera==false){this.setData({isCamera:true,btnTxt:"拍照"})return}//拍照成功src:res.tempImagePath,//拍照失敗重拍filePath:

res.tempFilePath,

//把canvas處理后的圖片路徑編碼

encoding:

"base64",

//若圖片編碼成功

得到垃圾照片后，限制照片長寬到4filePath:

res.tempFilePath,

//把canvas處理后的圖片路徑編碼

encoding:

"base64",

//若圖片編碼成功

success:res=>{success:res=>{//傳入百度識圖that.req(that.data.accessToken,res.data)},百度AI開放平臺提供了小程序所需要的圖像識別功能，在百度開放平臺進行注冊，申請圖像識別功能，獲取APIKey和APISecret,在camera頁面中將其傳入識圖網址，格式如下所示。exports.main=async(event,context)=>{exports.main=async(event,context)=>{let//寫入apiKey和secrtKey完成連接apiKey='百度識圖賬號',grantType='client_credentials',secretKey='百度識圖密碼',url=`識圖網址`圖4.6垃圾拍照識別頁面將編碼后的圖片上傳，得到識別后的相近物體選項，在拍照頁面顯示列表供用戶選擇（如圖4圖4.6垃圾拍照識別頁面選擇后，在數據庫進行檢索得到結果，在頁面顯示垃圾類型（如圖4.7所示）。圖4.7圖4.7識別后顯示垃圾類型4.4.3智能助理如圖4.8所示智能助理可以為用戶提供垃圾分類講解和閑聊娛樂功能。圖圖4.8智能助理功能智能助理調用了騰訊AI閑聊功能，開發者可以在騰訊開放平臺中對智能助理的對話選項進行設計，以達到自己滿意的效果。智能助理功能被插入在進入小程序的index頁面中。用戶點擊按鈕后，跳轉到bindtap綁定的qa頁面。在qa頁面中完成對話的上傳和接收，代碼如下所示。//添加自己的IDrequestData:{//添加自己的IDrequestData:{app_id:'wx855b3f9dc5094a0d',appKey:"a7c6b56dae2189ba461a78d798f358d0",time_stamp:'',nonce_str:'',text:'',sign:''}，http.req('/fcgi-bin/nlp/nlp_textchat',{http.req('/fcgi-bin/nlp/nlp_textchat',{//輸入賬號app_id:this.requestData.app_id,time_stamp:this.requestData.time_stamp,nonce_str:this.requestData.nonce_str,//獲取問題question:this.requestData.text,session:md5Str,sign:md5Param},4.5分類模塊設計4.5.1四種垃圾模塊如圖圖4.9分類頁面SEQFigure\*ARABIC1圖4.9分類頁面SEQFigure\*ARABIC1用戶點進不同模塊可以看到按照拼音首字母排序的垃圾條目，如圖4.10所示。圖4.10可回收物圖4.10可回收物頁面用戶沒有發現自己需要的垃圾條目，可以點擊頁面下方的添加按鈕，跳轉至垃圾添加頁面，按照指導話語添加垃圾信息，實現代碼如下。varindexClick=0;//跳轉到不同的垃圾類型頁面switch(index){case0:indexClick=1break;case1:indexClick=2break;case2:varindexClick=0;//跳轉到不同的垃圾類型頁面switch(index){case0:indexClick=1break;case1:indexClick=2break;case2:indexClick=3}//在傳入頁面中加入sortedId wx.navigateTo({url:'/pages/ai/filter/filter?type='+indexClick,})}}//在傳入頁面中加入sortedId wx.navigateTo({url:'/pages/ai/filter/filter?type='+indexClick,})根據調用云數據庫中的product表db.collection('product').where({//調用云數據庫中的product表db.collection('product').where({//不同的垃圾類型編號sortId:parseInt(this.data.type)})4.5.1添加垃圾信息找不到自己想要的垃圾條目，可以點擊分類頁面的添加按鈕利用bindtap跳轉至添加垃圾頁面commit，如圖4.11所示。在識別模塊中沒有得到想要的結果時，同樣可以跳轉至這個頁面。考慮到垃圾條目的準確和整潔，需要重新創建一個表commit供用戶添加垃圾數據。data:{//垃圾名稱"GarbageName":"",//通過sortID定義垃圾類型data:{//垃圾名稱"GarbageName":"",//通過sortID定義垃圾類型"sortID":"",//垃圾條目創建時間"ctime":""},圖4.11垃圾添加頁面圖4.11垃圾添加頁面//垃圾條目創建時間"ctime":""},//向product集合添加數據addGarbage:function(res){console.log(res)varsubmitData=res.detail.valuesubmitData.sortID=Number(submitData.sortID)小程序端添加數據后，云數據庫會添加相關條目。管理員可以查看后決定是否要添加到product數據庫中，參與用戶的垃圾檢索，如圖4.12所示圖4圖4.12云數據庫信息添加成功4.6垃圾桶模塊設計垃圾桶模塊實現對校園內垃圾桶位置進行顯示，點擊標記點可以實現到垃圾位置的導航。垃圾桶模塊首先要實現地圖的顯示，微信小程序官方提供的原生map組件實現了這一功能。在wxml頁面對地圖在頁面中的長寬進行設計,確定地圖開始的經緯度，通過include-points設置所有標記點在頁面中顯示，便于用戶看到全部垃圾桶位置。點擊垃圾桶標記，調用騰訊地圖或自帶地圖實現導航功能。4.6.1獲取當前位置并顯示垃圾桶信息用戶打開地圖時可以看到地圖上自己的位置顯示和校園內垃圾桶的位置信息，實現代碼如下所示。wx.openLocation({longitude:wx.openLocation({longitude:當前經度latitude:當前緯度})//集合中的垃圾桶信息{"id":1,"name":"http://集合中的垃圾桶信息{"id":1,"name":"14號樓垃圾桶","longitude":"120.58342","latitude":"31.22009,"},將集合導入trash頁面，利用creatMarker方法完成垃圾桶圖標的添加。同時在方法中利用callout實現垃圾桶的垃圾桶名稱和樓宇標注。用戶可以在標注點上方觀察到相應垃圾桶的信息，如“14號樓垃圾桶”。決定下一步導航要去的位置,如4.11所示。圖4.11垃圾桶標點顯示4.6.3圖4.11垃圾桶標點顯示//傳入用戶當前在//傳入用戶當前在文字校園內的位置from:{latitude:that.data.latitude,longitude:that.data.longitude},//to:傳入點擊的marker定位to:{latitude:weidu,latitude:weidu,longitude:jingdu},//坐標解壓（返回的點串坐標，通過前向差分進行壓縮）//坐標解壓（返回的點串坐標，通過前向差分進行壓縮）varkr=1000000;for(vari=2;i<coors.length;i++){coors[i]=Number(coors[i-2])+Number(coors[i])/kr;}//將解壓后的坐標放入點串數組pl中for(vari=0;i<coors.length;i+=2){pl.push({latitude:coors[i],longitude:coors[i+1]})}//console.log(pl)console.log(that.data.address);//設置polyline屬性，顯示路線,解壓坐標第一個數據作為起點that.setData({latitude:pl[0].latitude,//設置polyline屬性，顯示路線,解壓坐標第一個數據作為起點that.setData({latitude:pl[0].latitude,longitude:pl[0].longitude,polyline:[{polyline:[{arrowLine:true,points:pl,color:'#3394F8',borderColor:'#3394F8',borderWidth:6,width:6}]})第五章系統測試5.1系統測試意義與目的系統測試是為了排除系統隱藏的漏洞，通過多種方式多次測試避免系統產生不符合預期的效果。系統測試需要開發者耗費打開大量時間并采用多種方式。但為了系統的準確性和穩定性系統測試是非常必要的。本次系統測試主要是考察各個模塊是否能夠運行成功，是否出現渲染層錯誤，各項信息能否正常顯示數據庫能否調用成功：垃圾檢索是否能成功、垃圾信息的添加是否能在后臺看見。圖片識別，地圖顯示api能否成功調用。由于各個api的使用是互相穿插的，模塊調試出現問題后還需要查看是哪部分api出現了問題。此外，在微信開發者工具中運行出的小程序效果和真機效果還是有一定差別的，不同品牌、不同機型都會出現顯示差別。有可能會出現微信開發者工具運行成功，真機運行失敗的問題。有時頁面顯示由于網絡原因非常緩慢，會造成錯過相關漏洞的情況，這也需要多次測試得到結果5.2測試過程測試分為微信開發者工具根據多種機型進行虛擬測試：iPhone12、iPhone7P、nexus6等。發現確實出現由于機型屏幕輪廓造成的頁面缺失，但并不影響用戶的使用。在測試分類模塊的垃圾數據添加時，發現一開始的添加到原有product集合中的設計并不合理。由于小程序使用的是免費版的云數據庫，一個集合一天只有500次的訪問數據庫機會。如果出現用戶惡意添加的情況，系統的檢索模塊就會崩潰，無法再服務用戶。所以需要新建一個集合供用戶填寫，開發者在后臺選擇性添加相關信息。5.3其他錯誤在開發過程中也會遇到其他一些細微完全出于粗心產生的漏洞。如api調用時需要填寫正確的apiKey和apiSecret,調用api失敗后一直找不到原因,反復檢查代碼后發現是輸入錯誤。填寫文件路徑