|
畢 業(yè) 設(shè) 計(jì) [論 文] 題 目： 智能車位管理系統(tǒng)微信小程序的設(shè)計(jì)與實(shí)現(xiàn) 學(xué) 院： 計(jì)算機(jī)與數(shù)據(jù)科學(xué)學(xué)院 專 業(yè)： 姓 名： 學(xué) 號(hào)： 指導(dǎo)老師： 完成時(shí)間： 2020.5.10 摘 要現(xiàn)在人們的生活被停車問題越來越困擾，繳費(fèi)慢的問題給車主帶來了無盡的煩惱，為了解決這類問題，停車場(chǎng)生產(chǎn)廠家和車主兩方面都頭疼不已。雖然出現(xiàn)了可以對(duì)車牌進(jìn)行智能識(shí)別的產(chǎn)品，停車?yán)U費(fèi)仍麻煩不斷，手機(jī)端支付可以稍微緩解人工收費(fèi)和找零過程都效率低下等現(xiàn)狀，所以設(shè)計(jì)一個(gè)智能車位管理系統(tǒng)成為必要。 因此，本畢業(yè)設(shè)計(jì)設(shè)計(jì)了一個(gè)智能車位管理微信小程序的系統(tǒng)，截止目前快速支付可以依賴停車場(chǎng)管理系統(tǒng)以及第三方的支付平臺(tái)來實(shí)現(xiàn)，這種平臺(tái)上的運(yùn)營(yíng)商有著前沿技術(shù)和強(qiáng)大的經(jīng)濟(jì)資本，支付技術(shù)的成熟度更高、更便捷，依賴微信社交軟件的微信支付，已被越來越多的人關(guān)注并使用。用戶可以通過關(guān)注停車場(chǎng)管理系統(tǒng)的微信公眾號(hào)進(jìn)行繳費(fèi)支付，或者掃描停車場(chǎng)內(nèi)的二維碼，即可實(shí)現(xiàn)停車場(chǎng)中查詢車位信息、預(yù)約車位等一系列的功能，使得車主對(duì)停車過程非常滿意。 關(guān)鍵詞 微信；小程序；停車系統(tǒng)；智能 AbstractNow people's life disturbing by the parking problem, the slow payment brings endless troubles to the car owners . In order to solve the problems manufacturer of parking system and car owner are headache. In spite of the emerceing of license plate can be recognitioned by intelligented lication,parking payment is still a enormace trouble,mobile phone payment can relieve the process of manual charging and change and so on.so to design a intelligence system is essible. Therefore,this graduation project is design a parking system based on Mini Program. At the present,fast payment is a more effective method relyed on the parking system to link the third-party payment platform.Operators of those platforms often have powerful technical and economic,payment technology is mature and fast. Because of the related using of WeChat social terrace ,WeChat Payment is convenient.WeChat Payment has been used by great mass of people because of possessing the payment module of WeChat terrace. The official account,or scan the QR code straightly in the parking,can do a series of operations such as inquiry,reservation car,payment and so on,which can be done in the WeChat official account. The car owner's parking posses is very approving. Key words：WeChat;parking system;Mini Programs;Intelligence 目錄 2.1.2 微信小程序提供的功能對(duì)比......................................................................... 6 2.2.3 開發(fā)者工具的安裝與使用............................................................................ 8 1緒論1.1 選題的背景和意義隨著人們現(xiàn)實(shí)生活水平的提高以及車輛數(shù)目的迅速擴(kuò)大,使得交通擁擠和停車難等一系列問題變得更加嚴(yán)重。本系統(tǒng)通過研究當(dāng)前階段的停車管理系統(tǒng),對(duì)于市面上大部分系統(tǒng)并沒有實(shí)行智能化管理,還屬于封閉落后傳統(tǒng)類型,造成停車位信息和快速預(yù)定等問題無法被車主提前了解,基于此提出了相關(guān)智能停車場(chǎng)的研究課題[4]。人們開始越來越重視停車位的控制是因?yàn)楝F(xiàn)有的車位對(duì)于停車需求而言仍供小于求，同時(shí)交通的安全和暢通也被車輛的任意停放帶來了非常大的影響，也給交通管理工作帶來了很多麻煩。不僅如此，停車場(chǎng)汽車數(shù)量的迅速飆升，規(guī)模不斷擴(kuò)張，都給停車場(chǎng)的車輛管理帶來了新的挑戰(zhàn)，而產(chǎn)品數(shù)量依然滿足不了停車場(chǎng)管理類的系統(tǒng)，自動(dòng)化和智能化管理系統(tǒng)的停車場(chǎng)依然鳳毛麟角。配備一套智能、綜合的收費(fèi)及管理系統(tǒng)來讓停車場(chǎng)安全、便捷運(yùn)轉(zhuǎn)成為了必要。作為騰訊下的一款智能產(chǎn)品，微信小程序是一種應(yīng)用程序，安裝在WeChat，同時(shí)也是WeChat系統(tǒng)的必不可少的組成部分。它的特點(diǎn)是：開發(fā)成本低廉、友好的用戶體驗(yàn)、訪問便捷且速度飛快、并可以實(shí)現(xiàn)共享等，同時(shí)還可以到微信入口來實(shí)現(xiàn)搜索的功能、訪問用戶及其信息。這種新理念是通過線上線下雙結(jié)合，不僅實(shí)現(xiàn)了綠色環(huán)保，更有利于提升人們的體驗(yàn)度。 各類型的大型停車場(chǎng)是為解決停車難等一系列問題而出現(xiàn)的，然而收效甚微，并使得停車位尋找的問題更加突出。司機(jī)不能快速迅捷地找到距離最近的停車位；并且采用人力疏導(dǎo)停車的方式不僅效率超低，還耗費(fèi)人力財(cái)力，總而言之，人員分配方面不能達(dá)到最合理，這也是這種管理方式帶來的巨大的缺點(diǎn)。這種社會(huì)現(xiàn)象已普遍存在，它的出現(xiàn)不僅困于的城市規(guī)模，更是讓社會(huì)的中高速發(fā)展變的遲緩。因此當(dāng)前的焦點(diǎn)問題就在于怎樣達(dá)到司機(jī)對(duì)車輛的停放管理需求，減少駕駛員尋找空閑車位的時(shí)間來緩解城市道路的交通壓力，還要有益于社會(huì)的綠色發(fā)展，所以建設(shè)一個(gè)高效、科學(xué)的智能車位管理系統(tǒng)已成燃眉之急。結(jié)果證實(shí)，該系統(tǒng)不僅極大地提高了停車場(chǎng)的泊車管理水平,還加快了車輛的出入速度,顧客尋找車位的時(shí)間也大大節(jié)省，亂停車的現(xiàn)象亦減少，系統(tǒng)不僅可靠穩(wěn)定，還實(shí)現(xiàn)了智能管理，又維護(hù)了社會(huì)的秩序。[1] 1.2 國(guó)內(nèi)外發(fā)展現(xiàn)狀分析1.2.1 國(guó)內(nèi)停車系統(tǒng)發(fā)展現(xiàn)狀停車場(chǎng)系統(tǒng)的研究和實(shí)踐在我國(guó)起步稍慢，80年代，在我國(guó)交通工程界的努力奮斗下，國(guó)內(nèi)才開始接觸到相關(guān)的智能車位導(dǎo)航的概念和技術(shù)。但是總得不到相應(yīng)的支持，同時(shí)技術(shù)上的弱項(xiàng)和落后，經(jīng)濟(jì)基礎(chǔ)上的資金匱乏，相關(guān)管理體制也不完善。然而在一些慈善團(tuán)體的慷慨捐助下以及政府的大力支持，我國(guó)的科技領(lǐng)域不斷的在蓬勃發(fā)展，在國(guó)內(nèi)專家學(xué)者的不懈奮斗下，在智能車位導(dǎo)航領(lǐng)域取得了一定的傲人成績(jī)，并為后續(xù)的接力發(fā)展打下了堅(jiān)固的基礎(chǔ)。 目前停車場(chǎng)管理系統(tǒng)雖然存在，社會(huì)上雖然研發(fā)了相關(guān)智能停車管理系統(tǒng)的產(chǎn)品，但它的核心是車輛的圖像管理，它對(duì)于車輛出入停車場(chǎng)的憑證是ID/IC卡，這種卡是非接觸式的[5]。并且大多數(shù)為了對(duì)車位的數(shù)目詳情進(jìn)行實(shí)時(shí)顯示，其硬件手段都是單一的，網(wǎng)絡(luò)的共享和網(wǎng)絡(luò)化管理不僅都不能實(shí)現(xiàn)，而且資源的利用率也是不盡人意。停車引導(dǎo)功能依然不完善，稱不上智能、快速，采用人工記錄的方法來統(tǒng)計(jì)車輛，浪費(fèi)人力資源不說，對(duì)總體車流量的統(tǒng)計(jì)更是達(dá)不到標(biāo)準(zhǔn)。大多停車場(chǎng)不具備最短路徑式的找尋功能，司機(jī)不能在第一時(shí)間內(nèi)找到最優(yōu)的停車路徑。作為和智能交通管理系統(tǒng)緊密相關(guān)的部分，智能車位管理系統(tǒng)潛能無限，具有很光明的發(fā)展前景。 1.2.2 國(guó)外停車系統(tǒng)發(fā)展現(xiàn)狀德國(guó)是最早進(jìn)行智能車位引導(dǎo)系統(tǒng)的，在發(fā)展中穩(wěn)中求健，功能建設(shè)的相對(duì)完善、穩(wěn)定。1971年，亞瞋研發(fā)了世界上第一個(gè)智能車位系統(tǒng)。在那期間，智能車位引導(dǎo)系統(tǒng)在英國(guó)、法國(guó)和瑞士也接續(xù)興起。1973年,亞洲的第一個(gè)車位導(dǎo)航系統(tǒng)在日本的處于東京中心區(qū)域的新宿區(qū)得到逐步建立，智能車位導(dǎo)航系統(tǒng)開始得到普遍發(fā)展。日本的建立贏得了社會(huì)的一致好評(píng)，這促使了日本使系統(tǒng)功能更趨完善，逐漸地，逐步實(shí)現(xiàn)了其商業(yè)區(qū)域系統(tǒng)的建立。 在國(guó)外，智能停車場(chǎng)管理系統(tǒng)經(jīng)過了數(shù)年積累和沉淀，其收費(fèi)系統(tǒng)越來越智能化，無人操作進(jìn)行收費(fèi)的專用設(shè)備也得以實(shí)現(xiàn)。停車場(chǎng)管理系統(tǒng)的功能不斷的被優(yōu)化、完善，是因?yàn)樵S多管理系統(tǒng)配備了車位引導(dǎo)、查詢等智能化設(shè)備，一些外國(guó)停車設(shè)備廠商正努力建立一個(gè)在稍微寬廣地區(qū)內(nèi)的多個(gè)停車場(chǎng)之間任意泊車的'網(wǎng)絡(luò)化存車’停車場(chǎng)管理系統(tǒng)，該系統(tǒng)的網(wǎng)絡(luò)連接可以依賴Internet。這種新興的停車場(chǎng)管理極大的擴(kuò)展了它的使用范圍，并使得功能更加延伸、完善、豐富。 1.2.3 停車系統(tǒng)未來發(fā)展前景當(dāng)前，人們出行的交通工具普遍是汽車，造成交通擁擠不堪的原因有很多，最主要的卻是車輛數(shù)目的急速劇增、車輛的任意亂停亂放，對(duì)于傳統(tǒng)的停車場(chǎng)，不僅占地面積大，而且車輛管理系統(tǒng)智能化程度偏低、停車位利用率等一系列紛繁復(fù)雜問題造成了停車難問題。鑒于此，從實(shí)時(shí)位置查看、精確定位、位置信息上報(bào)等通信衛(wèi)星導(dǎo)航系統(tǒng)的特點(diǎn)出發(fā),接口為物聯(lián)網(wǎng)中間件成為必不可少的一環(huán)[6]。中國(guó)各大城市對(duì)泊車位的需求總是供不應(yīng)求，其需求缺口約五成，所以可以預(yù)測(cè)智能停車行業(yè)有著光明的發(fā)展前景?！爱?dāng)斯定律”同樣適用于智能停車領(lǐng)域：道路設(shè)施由于新建，所以會(huì)觸發(fā)車流量的新增，而交通需求卻依然偏向供過于求的交通供給的一方，這定律和道路交通極其相似。因此，智能停車管理系統(tǒng)結(jié)合互聯(lián)網(wǎng)，不僅使用戶可以提前進(jìn)行車位狀態(tài)信息的查詢、停車時(shí)間的自動(dòng)計(jì)時(shí)繳費(fèi)，還可以有效緩解停車難的問題并使得停車效率更加高效。 停車誘導(dǎo)系統(tǒng)主要是平衡停車位和駕駛員車輛二者之間的關(guān)系,但是目前停車誘導(dǎo)技術(shù)并不從駕駛員所想的停車因素方面來進(jìn)行誘導(dǎo)， 停車場(chǎng)外部的區(qū)域引導(dǎo)是主要方面，而內(nèi)部停車場(chǎng)引導(dǎo)機(jī)制僅僅隨機(jī)生成一條從停車場(chǎng)入口到空余車位的單一的最短路徑。如果場(chǎng)外誘導(dǎo)系統(tǒng)可以增加停車場(chǎng)的空余車位預(yù)測(cè)技術(shù)模塊的話，則會(huì)有效幫助停車場(chǎng)外部的引導(dǎo)[8]。而反向?qū)ぼ囅到y(tǒng)不僅增加了反向?qū)ぼ囌T導(dǎo)的功能，同時(shí)系統(tǒng)還推薦給用戶一些空余車位讓用戶進(jìn)行自由選擇，與傳統(tǒng)停車場(chǎng)相比，該系統(tǒng)的功能更豐富、完善。它大大縮減了用戶反向?qū)ぼ嚨臅r(shí)長(zhǎng)，停車位的使用效率更進(jìn)一步提升[9]，同時(shí)為達(dá)到選擇算法最優(yōu)的目的，并且只考慮一種因素下的最短路徑問題，它把儲(chǔ)物柜原理和蟻群算法相結(jié)合。最后，通過實(shí)施軟件硬件相結(jié)合，車位引導(dǎo)系統(tǒng)得以完成開發(fā)和使用。[11] 由于停車市場(chǎng)的兼容性不斷延伸，作用范圍越來越普遍，阿里、騰訊等一些電商巨頭都紛紛爭(zhēng)先恐后的涌入市場(chǎng)，電子支付成為“香餑餑”已是必然。隨著微信小程序的正式上線，停車?yán)U費(fèi)的“電子支付”迎來了春天，使用小程序可進(jìn)行掃碼預(yù)支付、更可通過小程序進(jìn)行車牌號(hào)的綁定來實(shí)現(xiàn)無感支付功能，電子發(fā)票功能使得車主開票更便捷、憑證更得以長(zhǎng)期保存。智能停車是幫助車主快速找到一個(gè)可用的、路徑最優(yōu)的停車位，它為司機(jī)提供導(dǎo)航路線的技術(shù)依賴物聯(lián)網(wǎng)、大數(shù)據(jù)、人工智能等，在使用期間，傳感器會(huì)監(jiān)測(cè)到的大量的實(shí)時(shí)數(shù)據(jù)，這些數(shù)據(jù)會(huì)被傳到司機(jī)手中設(shè)備的專用App或車載上面。未來停車管理產(chǎn)業(yè)的主打方向?qū)?huì)是智能化、無人化，而行業(yè)想要立足的基石將會(huì)是技術(shù)、終端、資金等。 1.3 研究的主要內(nèi)容為了推動(dòng)“智能交通”向“智慧交通”過程的轉(zhuǎn)換，需進(jìn)行不懈的努力，如在交通管理中不斷增科技含量、科學(xué)管理方法的創(chuàng)新、服務(wù)市民能力水平的提高等；實(shí)現(xiàn)交通管理數(shù)據(jù)化服務(wù)需要平臺(tái)的大力支撐；為預(yù)防應(yīng)用事故的發(fā)生，需要進(jìn)行設(shè)施管理的融合，同時(shí)還要搭建大數(shù)據(jù)庫(kù)[3]。人們已然適應(yīng)騰訊服務(wù)的社交行業(yè)轉(zhuǎn)到了付款方式，而本次基于智能車位管理系統(tǒng)微信小程序的畢業(yè)設(shè)計(jì)，使用現(xiàn)在數(shù)據(jù)并發(fā)處理非常流行的js代碼，設(shè)計(jì)了智能車位管理小程序，可以通過掃描二維碼或計(jì)時(shí)收費(fèi)來實(shí)現(xiàn)模擬支付，具體分析設(shè)計(jì)有：系統(tǒng)分析及總體架構(gòu)、數(shù)據(jù)庫(kù)的設(shè)計(jì)，具有車位位置的顯示、查詢以往車輛的收費(fèi)記錄、車位信息查找等功能，方便節(jié)時(shí)。[2] 2 系統(tǒng)的相關(guān)技術(shù)2.1 微信小程序小程序不需要下載安裝，應(yīng)用因而變得觸手可及，進(jìn)入微信頁(yè)面掃一掃就可以打開，同時(shí)它的新理念也體現(xiàn)在“用完就走”上，應(yīng)用將會(huì)變得無時(shí)無地不在，不需要卸載省了手機(jī)內(nèi)存。小程序存在的必要性和必然性：擁有訂票功能、訂餐等功能；服務(wù)號(hào)功能相對(duì)不完善，小程序的功能非常強(qiáng)大；附近的用戶可以輕易的搜索到，還可以結(jié)合公眾平臺(tái)進(jìn)行推廣。[7]本系統(tǒng)主要從開發(fā)角度，簡(jiǎn)略地闡述小程序的開發(fā)過程，并綜合分析了微信小程序的開發(fā)環(huán)境、頁(yè)面框架、API組件等方面，討論了針對(duì)小程序目前的發(fā)展現(xiàn)狀以及未來的發(fā)展趨勢(shì)。用戶可以在微信公眾平臺(tái)獲取服務(wù)，這是全新的方式，高校圖書館作為文獻(xiàn)資料、知識(shí)服務(wù)的中心，也是一種提供服務(wù)延伸的方式[10]。電子商務(wù)平臺(tái)與傳統(tǒng)的手機(jī)應(yīng)用APP相比有優(yōu)勢(shì)，不僅可以滿足大眾購(gòu)物的需要，同時(shí)用微信小程序來構(gòu)建占用的資源會(huì)更小、運(yùn)行和操作更簡(jiǎn)單方便。系統(tǒng)需求會(huì)用到客戶端微信小程序、并用Web服務(wù)器、Https協(xié)議進(jìn)行數(shù)據(jù)傳輸?shù)?，系統(tǒng)功能更加穩(wěn)定。[12] 本文主要工作：1.研究微信小程序的背景和國(guó)內(nèi)外停車系統(tǒng)發(fā)展現(xiàn)狀，使系統(tǒng)開發(fā)更具意義；2.根據(jù)市場(chǎng)上面的需求以及小程序自身具有的優(yōu)勢(shì)，梳通思路來進(jìn)行可行性的分析；3.搭建開發(fā)環(huán)境、熟悉關(guān)鍵技術(shù)，前端和后端、數(shù)據(jù)庫(kù)的設(shè)計(jì)；4.完善系統(tǒng)測(cè)試的功能。[13]小程序與APP的關(guān)系特點(diǎn)：跨平臺(tái)；依賴于微信；小程序可通過掃一掃或搜一搜找到。微信小程序與APP關(guān)系如圖2.1所示： 圖2.1 小程序關(guān)系圖 2.1.1 微信小程序的發(fā)展歷程 （1）2016年1月，應(yīng)用號(hào)的概念被微信團(tuán)隊(duì)第一次提出； （2）2016年9月，微信公眾平臺(tái)對(duì)外發(fā)送內(nèi)測(cè)通知； （3）2016年11月，微信公眾平臺(tái)開始首次對(duì)外發(fā)出公測(cè)，但只允許提交審核，禁止發(fā)布上線； （4）2016年12月，微信小程序的答疑公開課回應(yīng)了沒有應(yīng)用商店、沒推送消息等被別人疑惑的一些問題； （5）2016年12月，當(dāng)時(shí)的微信小程序最多只可以生成一萬個(gè)含有參數(shù)的二維碼，距離上線還有一段距離； （6）2017年1月，小程序正式上線； 2.1.2 微信小程序提供的功能對(duì)比 （1）分享當(dāng)前頁(yè)面的功能，但是只能分享到群或一個(gè)好友； （2）小程序支持線下掃碼功能； （3）小程序的掛起有時(shí)間限值； （4）小程序具有消息通知的功能； （5）小程序和公眾號(hào)二者之間你中有我，我中有你； （6）小程序可以進(jìn)行搜索以及查詢歷史列表； （7）小程序不僅沒應(yīng)用商店，還沒有地方作為集中的入口； （8）小程序無訂閱關(guān)系； （9）小程序不能進(jìn)行消息的推送； （10）小程序不含做游戲的功能； 2.1.3 微信小程序迅速發(fā)展的表現(xiàn) 生態(tài)體系：企業(yè)中會(huì)通過微信小程序來拓展業(yè)務(wù)，如滴滴打車、美團(tuán)外賣等。 開放能力：主要為開發(fā)者進(jìn)行深度挖掘提供便利。 用戶黏性：隨著小程序用戶量的激增，許多訴求會(huì)隨之而來，同樣改進(jìn)產(chǎn)品的機(jī)會(huì)也越來越多，小程序會(huì)快速崛起。小程序依賴微信的程度會(huì)加深，在未來用戶獲取小程序也會(huì)更加便捷。 2.2 開發(fā)環(huán)境的搭建和使用2.2.1 開發(fā)環(huán)境開發(fā)環(huán)境如表2.1所示： 表2.1 開發(fā)環(huán)境
2.2.2 注冊(cè)開發(fā)者賬號(hào)首先，到微信公眾平臺(tái)，注冊(cè)一個(gè)自己的微信開發(fā)者賬號(hào)，復(fù)制網(wǎng)址“https://mp.weixin.qq.com”到瀏覽器；注冊(cè)賬號(hào)的類型需手動(dòng)進(jìn)行選擇；單擊“小程序”即可注冊(cè)成功。如圖2.2和2.3所示：
圖2.2 微信公眾平臺(tái) 圖2.3 注冊(cè)類型 在微信公眾平臺(tái)左側(cè)的“設(shè)置”里找到“開發(fā)設(shè)置”，即可查看自己的AppID號(hào)，如圖2.4：
圖2.4 開發(fā)者ID 2.2.3 開發(fā)者工具的安裝與使用微信開發(fā)者工具的下載網(wǎng)址在微信公眾平臺(tái)里，如圖2.5所示；創(chuàng)建項(xiàng)目：首次微信掃碼登錄，登錄成功后選擇開發(fā)模式，如圖2.6所示；小程序項(xiàng)目創(chuàng)建成功后，就會(huì)進(jìn)入到開發(fā)調(diào)試環(huán)境中，開發(fā)者工具的使用如圖2.7所示：
菜單欄：可以訪問微信開發(fā)者工具的大部分功能 項(xiàng)目：新建項(xiàng)目，或者打開最近的項(xiàng)目。 文件：文件的新建、保存和關(guān)閉。 編輯：代碼的編寫，或者格式化。 工具：查看輔助工具。 界面：界面的顯示和隱藏。 設(shè)置：設(shè)置開發(fā)界面的外觀、快捷鍵工具等。 工具欄：常用快捷按鈕，詳細(xì)信息如下： 個(gè)人中心：顯示目前已登錄的用戶頭像信息。 模擬器、編輯器及調(diào)試器：工具的顯示和隱藏。 云開發(fā)：小程序、游戲等的開發(fā)。 微信開發(fā)者工具：賬號(hào)的切換、開發(fā)模式更改、控制臺(tái)調(diào)試等。 編譯下拉菜單：用于編譯模式之間的切換，默認(rèn)模式是普通編譯。 編譯：編寫小程序的代碼后，需要編譯才能運(yùn)行。 預(yù)覽：點(diǎn)擊預(yù)覽會(huì)生成二維碼，用微信進(jìn)行掃描。 真機(jī)調(diào)試：在手機(jī)上調(diào)試正在運(yùn)行的小程序。 切后臺(tái)：模擬小程序在切后臺(tái)后的效果。 清緩存：數(shù)據(jù)緩存、文件緩存等的清除。 上傳：將代碼上傳到小程序管理后臺(tái)。 模擬器：用于模擬手機(jī)環(huán)境，查看各種手機(jī)型號(hào)的運(yùn)行結(jié)果，如圖2.8所示：
圖2.8 模擬器運(yùn)行結(jié)果圖 編輯器分為前后兩欄：前欄用于瀏覽項(xiàng)目目錄結(jié)構(gòu)，后欄用于編寫代碼。 在前欄中點(diǎn)擊某個(gè)文件就可以在后面欄中編輯該文件。 調(diào)試器：和瀏覽器中的開發(fā)者工具相似。 Console：控制臺(tái)，把調(diào)試信息打印輸出。 Sources：源代碼，查看和編輯源代碼，支持代碼的調(diào)試。 Network：記錄服務(wù)器的網(wǎng)絡(luò)請(qǐng)求信息，根據(jù)它進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。 AppData：數(shù)據(jù)面板，當(dāng)前小程序運(yùn)行時(shí)的數(shù)據(jù)可以被查看或者編輯。 Audits：審計(jì)面板，用于對(duì)小程序進(jìn)行體驗(yàn)評(píng)分。 Sensor：傳感器，模擬地理位置、重力感應(yīng)。 Storage：存儲(chǔ)，本地緩存數(shù)據(jù)的查看和管理。 Trace：跟蹤面板，用于真機(jī)調(diào)試時(shí)跟蹤調(diào)試信息。 Wxml：wxml面板，填充WXML組件和渲染W(wǎng)XSS樣式。 2.2.4 項(xiàng)目的目錄結(jié)構(gòu)“Hello World”小程序的目錄結(jié)構(gòu)如表2.2所示： 表2.2 目錄結(jié)構(gòu)表
wxml、wxss、js和json四個(gè)文件構(gòu)成了每個(gè)頁(yè)面，如圖2.9所示：
圖2.9 頁(yè)面文件關(guān)系圖 pages配置項(xiàng)是用來在json文件中生成index首頁(yè)的頁(yè)面，其中的pages數(shù)組有兩個(gè)頁(yè)面，index頁(yè)面和logs日志文件。在事件處理函數(shù)中，綁定了一個(gè)視圖點(diǎn)擊事件bindViewTap，它的功能是調(diào)用wx.navigateTo進(jìn)行跳轉(zhuǎn)頁(yè)面。 單擊頭像即可進(jìn)入到登錄日志頁(yè)，查看用戶登錄的歷史記錄，如圖2.10所示,在log.js界面中，有onload加載函數(shù)，其功能是調(diào)用wx.getStorageSync('logs')來進(jìn)行緩存信息的打印，并將目前的時(shí)間一并輸出到日志界面中。
圖2.10 登錄日志界面圖 2.3 API相關(guān)組件微信小程序柜架里的UI組件有很多，如視圖容器類組件、基礎(chǔ)內(nèi)容類組件、完善的表單組件、友好的邏輯交互操作反饋組件、導(dǎo)航組件里面的頁(yè)面鏈接、媒體組件用于音視頻播放、地圖導(dǎo)航以及畫布類組件。這些UI組件就像小時(shí)候玩的積木一樣，使用這些積木可以建造一座房子、一座大橋，而每個(gè)UI組件也都有不同的用處，有了這些組件，就可以完成界面的布局和界面的渲染。 2.3.1 組件分類（1）視圖容器類組件； （2）基礎(chǔ)內(nèi)容類組件； （3）表單類組件； （4）導(dǎo)航類組件； （5）媒體類組件； （6）地圖類組件； （7）畫布類組件； （8）開放能力類組件； 2.3.2 常用API闡述（1）服務(wù)器數(shù)據(jù)的請(qǐng)求：請(qǐng)求、上傳和下載的發(fā)起； （2）媒體的操作：圖片的添加、錄音的插入、視頻的播放； （3）文件操作：文件的打開、保存和刪除； （4）數(shù)據(jù)操作：數(shù)據(jù)的獲取、保存與刪除； （5）位置操作：當(dāng)前位置的獲取及查看； （6）設(shè)備管理：系統(tǒng)的狀態(tài)、重力的感應(yīng)、電話的撥打； （7）界面設(shè)計(jì)：交互邏輯的反饋、導(dǎo)航頁(yè)面、過渡動(dòng)畫、下拉操作； （8）開放接口；用戶登錄檢測(cè)、狀態(tài)信息查詢、當(dāng)前頁(yè)面分享； 2.3.3 登錄授權(quán)平常所使用的應(yīng)用程序，都離不開用戶的注冊(cè)和登錄。小程序擁有完整的登錄流程，在這套登錄流程里，進(jìn)行通訊交互的涉及到小程序端、應(yīng)用自身的服務(wù)端、微信的服務(wù)端。小程序端首先調(diào)用API的wx.login()獲取code，這個(gè)code是用戶的臨時(shí)登錄憑證，它是有有效期的。獲取到登錄憑證后，需要向服務(wù)端發(fā)送一個(gè)request請(qǐng)求，并攜帶上剛剛所獲取到的code，服務(wù)端在接受到這個(gè)請(qǐng)求后會(huì)帶上小程序應(yīng)用的appid以及appsecret,這個(gè)appsecret表示小程序應(yīng)用的一個(gè)秘鑰。服務(wù)端拿到code之后，調(diào)用微信提供的接口，這條接口是微信的登錄憑證校驗(yàn)接口，這個(gè)校驗(yàn)接口包含三個(gè)實(shí)參，分別是appid和appsecret，第三個(gè)就是臨時(shí)登錄憑證code。在調(diào)用微信的這條登錄憑證校驗(yàn)接口之后，會(huì)換取一個(gè)seccion_key和openid，這個(gè)seccion_key就是用戶當(dāng)前會(huì)話的一個(gè)密鑰，這個(gè)openid是用戶在小程序里面的唯一標(biāo)識(shí)。 換取seccion_key和openid后，服務(wù)端需要將兩者組合生成小程序應(yīng)用中用戶當(dāng)前的登錄態(tài)標(biāo)識(shí)。服務(wù)端還需要將seccion_key和openid所生成的登陸態(tài)標(biāo)識(shí)這三者相關(guān)聯(lián)，存入到對(duì)應(yīng)的數(shù)據(jù)庫(kù)中。生成一個(gè)自定義的登錄態(tài)標(biāo)識(shí)之后，小程序擁有登錄態(tài)標(biāo)識(shí)后，將它存起來，這里不是通過小程序全局變量來存儲(chǔ)，而是一般會(huì)將它存入到小程序的本地緩存中。服務(wù)器端在接收到這樣的一個(gè)請(qǐng)求，并拿到所攜帶的登陸態(tài)標(biāo)識(shí)之后就可以去數(shù)據(jù)庫(kù)中查詢當(dāng)前所攜帶的登錄態(tài)標(biāo)識(shí)所對(duì)應(yīng)的用戶的openid及seccion_key，通過openid對(duì)用戶的數(shù)據(jù)來進(jìn)行存取，并且返回給小程序端結(jié)果。具體如圖2.11所示：
圖2.11 授權(quán)登錄流程 在小程序業(yè)務(wù)端，應(yīng)該如何對(duì)用戶進(jìn)行登錄健全的操作？在這張流程圖中，小程序啟動(dòng)的時(shí)候，也就是onLaunch生命周期函數(shù)內(nèi)，會(huì)去檢測(cè)本地緩存中是否存在一個(gè)skey，即自己下發(fā)的一個(gè)登錄態(tài)標(biāo)識(shí)，如果存在，就需要去調(diào)用小程序所提供的一個(gè)wx.checksession的API來去檢測(cè)當(dāng)前用戶的一個(gè)seccion_key是否過期，如果用戶的seccion_key過期，需要調(diào)用login進(jìn)行重新登錄，這個(gè)登錄操作是自己去定義的，不是微信提供的API，如果調(diào)用API里面的wx.checksession后，用戶的seccion_key沒有過期，就可以進(jìn)行用戶正常的一個(gè)業(yè)務(wù)請(qǐng)求。如果本地緩存中沒有登錄態(tài)標(biāo)識(shí)，同樣需要進(jìn)行l(wèi)ogin這樣的一個(gè)登錄操作，具體流程如圖2.12所示：
圖2.12 業(yè)務(wù)端登錄圖 2.4 微信支付技術(shù)這個(gè)應(yīng)用程序中也會(huì)涉及到微信支付的一個(gè)功能，小程序給用戶提供了這個(gè)開放功能。在小程序管理后臺(tái)，左側(cè)有一個(gè)微信支付的入口，個(gè)人主體類型是沒有這樣的入口的，因?yàn)橹挥形⑿耪J(rèn)證之后，其支付功能才能夠使用，而個(gè)人主體類型沒有微信認(rèn)證的入口。開通微信支付有兩種方式，首先是申請(qǐng)新的微信支付的商戶號(hào)，否則只能綁定之前的商戶號(hào)。在開通微信支付功能之后，會(huì)分配一個(gè)微信商戶系統(tǒng)的登陸賬號(hào)和密碼，拿到賬號(hào)和密碼后就要去登錄微信商戶的一個(gè)平臺(tái)來進(jìn)行一些相關(guān)的設(shè)置，在賬戶中心找到'賬戶設(shè)置’，再找到'API安全’這一項(xiàng)，需要去進(jìn)行一個(gè)秘鑰的設(shè)置，密鑰是32位的密鑰，所有微信支付相關(guān)的接口都可以使用這個(gè)密鑰來加密，同時(shí)需要去下載商戶對(duì)應(yīng)的一個(gè)證書，然后將這個(gè)證書部署到web代理服務(wù)器上，使用微信支付功能之前，要確保web代理服務(wù)器開通了一個(gè)HTTPS的服務(wù)。 在微信支付交互中，用戶需要去主動(dòng)的觸發(fā)支付行為，并將這個(gè)行為傳達(dá)給小程序，小程序在接收到這行為之后會(huì)向服務(wù)端進(jìn)行一個(gè)下單的請(qǐng)求，在進(jìn)行下單請(qǐng)求之前，要確保用戶登錄過小程序，并通過getuserinfo獲取用戶的openid標(biāo)識(shí)，服務(wù)端在接收到下單請(qǐng)求之后，需要去生成對(duì)應(yīng)的商戶定單數(shù)據(jù)，然后去調(diào)用微信支付所提供的一個(gè)統(tǒng)一下單的API，這個(gè)統(tǒng)一下單API會(huì)在微信支付服務(wù)后臺(tái)來生成一個(gè)預(yù)支付的交易單。在所有的支付方式中都需要通過統(tǒng)一下單這個(gè)API來獲取到一個(gè)支付的憑證。 服務(wù)端調(diào)用微信支付統(tǒng)一下單接口成功的情況下，會(huì)返回一個(gè)預(yù)付單的信息prepay_id，它表示當(dāng)前商戶系統(tǒng)預(yù)支付交易單的標(biāo)識(shí)，然后組合前面所傳入的一些參數(shù)的數(shù)據(jù)進(jìn)行再次簽名，并將簽名結(jié)果以及前面所傳入的一些參數(shù)下發(fā)給小程序，小程序端就可以通過wx.requestpayment結(jié)合這些參數(shù)以及簽名來發(fā)起支付的操作。支付交互如圖2.13所示：
圖2.13 支付交互流程圖 2.5 MySql數(shù)據(jù)庫(kù)2.5.1 MySQL簡(jiǎn)介MySql是一種傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù)類型的產(chǎn)品，它擁有開放式架構(gòu)，并且技術(shù)日漸成熟，性能也在不斷增強(qiáng)，支持的功能也日益完善，用戶對(duì)平臺(tái)的支持量以及社區(qū)的開發(fā)與維護(hù)人數(shù)也在逐日增多。目前，在遵守GPL協(xié)議的條件下，因MySql功能優(yōu)越、性能穩(wěn)定可靠，并可以免費(fèi)的使用和修改而得到用戶的青睞。關(guān)系型數(shù)據(jù)庫(kù)不是把所有的數(shù)據(jù)都融合、統(tǒng)一地放一起，它鮮明的特點(diǎn)是將數(shù)據(jù)存到不同的工作表里，然后再將這些工作表放進(jìn)不同的數(shù)據(jù)庫(kù)中，這樣不僅加快了MySql的讀取速度，而且其變通性和可管理性也得到了極大的改善。Sql——結(jié)構(gòu)化查詢語言是對(duì)MySql數(shù)據(jù)庫(kù)訪問和管理的最常用的標(biāo)準(zhǔn)化語言。對(duì)數(shù)據(jù)庫(kù)進(jìn)行增添、刪除、修改、查找的操作因Sql變得更加簡(jiǎn)單、方便。 2.5.2 項(xiàng)目數(shù)據(jù)庫(kù)技術(shù)在項(xiàng)目中，可以后臺(tái)錄入數(shù)據(jù)進(jìn)行測(cè)試。即用到了數(shù)據(jù)庫(kù)來查詢個(gè)人信息、車位信息等。當(dāng)后臺(tái)錄入數(shù)據(jù)后，在小程序中再次進(jìn)行查詢和登錄等操作時(shí)，即可正常進(jìn)行存取操作。 例如：當(dāng)用戶查看個(gè)人信息時(shí)，會(huì)調(diào)用wx.getStorageSync('sessionid')方法來獲取storage中的信息，并返回對(duì)應(yīng)的session_key來查看信息，js界面調(diào)用wx.request方法，用getStorageSync同步獲取小程序的sessionid，成功之后會(huì)調(diào)用一個(gè)帶有參數(shù)的callbackFun函數(shù)來獲取用戶個(gè)人信息userInfo，否則就顯示圖標(biāo)為加載的提示框wx.showToast，代碼為： wx.request({ data:{ Session_Id: wx.getStorageSync('sessionid'), } success: function(res) { app.callbackFun(res); if(res.data.status == 1000000){ that.setData({ userInfo:res.data, }) }else{ wx.showToast({ title:res.data.message, icon:'loading', }) } } }) 3 系統(tǒng)分析及總體設(shè)計(jì)3.1 系統(tǒng)概述在智能停車管理系統(tǒng)小程序中，本系統(tǒng)基于小程序平臺(tái)的客戶端，主要解決車主尋找停車位的問題。首先，用戶通過手機(jī)號(hào)來注冊(cè)賬號(hào)，注冊(cè)后進(jìn)行登錄，登錄系統(tǒng)后可以查看目前所在的位置，停車場(chǎng)的詳細(xì)信息也可以被查詢到，如車庫(kù)所在位置、是否有空余車位等。其次，用戶還可以通過小程序來進(jìn)行空余車位的預(yù)約，并查看導(dǎo)航路線，根據(jù)路線進(jìn)行駕駛。用戶查詢服務(wù)主要是客戶端，可以根據(jù)個(gè)人中心的頁(yè)面詳情來進(jìn)行信息的查詢，如停車記錄、我的錢包、充值等信息。設(shè)計(jì)較為人性化、簡(jiǎn)潔的界面，與小程序的特點(diǎn)相吻合。 本系統(tǒng)設(shè)計(jì)了一個(gè)智能車位管理系統(tǒng)的微信小程序，以此來把傳統(tǒng)停車場(chǎng)進(jìn)行智能化、自動(dòng)化等不同程度的改進(jìn)，讓設(shè)備來處理需要花費(fèi)人力的問題，如停車收費(fèi)、人力疏導(dǎo)式導(dǎo)航等。這不僅使得數(shù)據(jù)更加實(shí)時(shí)、精確、高效，同時(shí)還幫助車主更加方便快捷的尋找泊車位、取車，進(jìn)而解決停車難的問題。預(yù)約車位的功能可以讓車主提前查看是否有空余車位，避免到場(chǎng)后才發(fā)現(xiàn)沒有車位的情景；自動(dòng)計(jì)時(shí)的功能可以使用戶的停車收費(fèi)更加透明化，自主付費(fèi)結(jié)合微信應(yīng)用，可以有效的推廣，并且提高用戶滿意度，增加社會(huì)以及經(jīng)濟(jì)效益。 3.2 功能總體描述該系統(tǒng)主要實(shí)現(xiàn)微信小程序用戶的注冊(cè)和登陸、個(gè)人信息的管理、車位狀態(tài)的查詢和預(yù)約、線上的支付模塊等功能。項(xiàng)目將實(shí)現(xiàn)以下功能： 1)用戶登錄管理：用戶注冊(cè)，用戶登陸 2)用戶信息管理：查看和修改個(gè)人資料，密碼等信息 3)車位信息查詢：實(shí)時(shí)查詢某車庫(kù)位置信息以及車位的狀態(tài) 4)車位預(yù)約：提前進(jìn)行預(yù)約車位，并進(jìn)行支付策略 5)其他：1、云端管理系統(tǒng)：用戶管理、車位狀態(tài)查看；2、微信小程序：①功能：顯示停車場(chǎng)名稱、地址等信息；短時(shí)車位預(yù)定；車費(fèi)在線支付；②界面設(shè)計(jì)遵循簡(jiǎn)潔原則、信息量最小原則； 3.3 業(yè)務(wù)功能分析3.3.1 用戶登錄管理用戶登陸管理模塊分為用戶的注冊(cè)和登陸。用戶注冊(cè)后才方便對(duì)自己的信息進(jìn)行管理，并且使用系統(tǒng)相應(yīng)的功能。用戶注冊(cè)需要用到手機(jī)號(hào)。用戶登陸主要是用戶查看和管理個(gè)人信息、停車的記錄、車位信息等業(yè)務(wù)活動(dòng)。用戶登陸系統(tǒng)可以防止非法數(shù)據(jù)的寫入，用戶登陸需要填寫正確的賬號(hào)和密碼才可以進(jìn)入系統(tǒng)。 3.3.2 用戶信息管理用戶登錄后，可以查看個(gè)人信息，包括頭像，昵稱等信息；同時(shí)還有停車記錄、我的錢包、消息通知等其他信息。用戶信息管理模塊的功能主要有：查詢個(gè)人信息，查詢停車記錄，同時(shí)添加車牌號(hào)以及刪除之前的車牌信息等操作來管理車倆信息。登陸后可以查看之前的停車記錄信息，并且可以對(duì)車輛的車牌信息進(jìn)行查詢、增加和刪除。 3.3.3 車位查詢和預(yù)約1、尋找導(dǎo)航上的停車場(chǎng)；2、查看停車信息；3、可短時(shí)預(yù)約車位。實(shí)現(xiàn)方案：通過程序提供車場(chǎng)地址，結(jié)合網(wǎng)商地圖組件實(shí)現(xiàn)功能；利用傳感器車輛檢測(cè)技術(shù)結(jié)合嵌入式系統(tǒng)實(shí)現(xiàn)功能，再通過云端與程序內(nèi)置場(chǎng)內(nèi)陸圖實(shí)時(shí)校對(duì)實(shí)現(xiàn)功能。 3.3.4 行車導(dǎo)航和記錄車輛入場(chǎng)：1、找到停車場(chǎng)后，通過地圖組件導(dǎo)航至指定位置，同時(shí)自動(dòng)生成車輛入場(chǎng)信息記錄；2、入場(chǎng)后，計(jì)費(fèi)系統(tǒng)開始計(jì)費(fèi)；3、用戶端可實(shí)時(shí)查看車位位置。實(shí)現(xiàn)方案：終端通過傳感器的檢測(cè)，可自動(dòng)生成信息報(bào)表，計(jì)費(fèi)系統(tǒng)開始計(jì)費(fèi)，并與用戶端通過云端實(shí)時(shí)同步實(shí)現(xiàn)功能。 3.4 系統(tǒng)總體架構(gòu)設(shè)計(jì)整體系統(tǒng)的流程結(jié)構(gòu)如圖3.1所示： 圖3.1 系統(tǒng)整體架構(gòu)圖 4 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.1 用戶登錄管理模塊4.1.1 功能結(jié)構(gòu)用戶登錄模塊的功能結(jié)構(gòu)如圖4.1所示：
圖4.1 用戶登錄管理流程圖 4.1.2 流程設(shè)計(jì)微信小程序的登錄環(huán)節(jié)是不可或缺的，登錄流程可以簡(jiǎn)單分為以下幾步：調(diào)用wx.login()來獲取臨時(shí)登錄憑證code；獲取到code后再結(jié)合AppID、小程序的秘鑰appsecret，服務(wù)端會(huì)調(diào)用微信登錄憑證接口來獲取session_key；拿到session_key再結(jié)合openid生成用戶當(dāng)前的登錄態(tài)標(biāo)識(shí)存儲(chǔ)在本地緩存storage中；以后用戶再進(jìn)入小程序，先再storage獲取信息，再根據(jù)這個(gè)去尋找合法的session_key。用戶登錄管理模塊流程設(shè)計(jì)如圖4.2所示：
圖4.2 用戶登錄流程圖 4.2 用戶信息管理模塊4.2.1 功能結(jié)構(gòu)用戶的信息管理功能結(jié)構(gòu)如圖4.3所示：
圖4.3 用戶信息管理流程圖 4.2.2 流程設(shè)計(jì)用戶登陸后進(jìn)入小程序首頁(yè)面，會(huì)顯示系統(tǒng)用戶的基本信息，點(diǎn)擊可進(jìn)行密碼的修改，修改成功后即可返回首頁(yè)。用戶信息管理模塊的流程如圖4.4所示。
圖4.4 用戶信息流程圖 4.3 車位查詢和預(yù)約模塊4.3.1 功能結(jié)構(gòu)車位狀態(tài)信息的查詢、預(yù)約結(jié)構(gòu)圖如圖4.5所示：
圖4.5 車位狀態(tài)信息查詢流程圖 4.3.2 流程設(shè)計(jì)用戶登陸后，點(diǎn)擊左方的車位信息管理即可進(jìn)行車位信息添加和車位信息查詢。在車位信息添加里可以進(jìn)行車位號(hào)的添加；在車位信息查詢里，可以搜索車位號(hào)以及查看具體車位的狀態(tài)信息是停車還是空閑、車位是否被預(yù)約。并且在操作中可以對(duì)車位進(jìn)行修改、刪除、查看詳細(xì)信息。車位信息查詢功能如圖4.6所示。
圖4.6 車位信息查詢圖 4.4 行車導(dǎo)航和記錄模塊4.4.1 功能結(jié)構(gòu)行車導(dǎo)航和記錄模塊結(jié)構(gòu)圖如圖4.7所示：
圖4.7 行車導(dǎo)航和記錄圖 4.4.2 流程設(shè)計(jì)小程序通過調(diào)用wx.getLocation接口來獲得用戶的當(dāng)前位置，用戶在查看當(dāng)前位置后，可以選擇到指定停車場(chǎng)的位置，通過調(diào)用wx.chooseLocation來選擇指定停車場(chǎng)，同時(shí)查看位置是通過調(diào)用wx.openLocation來實(shí)現(xiàn)的，它使用的地圖是微信自帶的內(nèi)置地圖；最后通過moveToLocation方法移動(dòng)到停車場(chǎng)的地點(diǎn)。調(diào)用wx.getStorageSync同步緩存數(shù)據(jù)到本地，方便瀏覽停車記錄的信息，具體流程如圖4.8所示：
圖4.8 行車導(dǎo)航圖 4.5 數(shù)據(jù)庫(kù)設(shè)計(jì)4.5.1 數(shù)據(jù)庫(kù)概念設(shè)計(jì)以前學(xué)過MySql數(shù)據(jù)庫(kù)，它是一種關(guān)系型數(shù)據(jù)庫(kù)，而微信上面的云數(shù)據(jù)庫(kù)是不同類型的文檔型。云開發(fā)提供數(shù)據(jù)庫(kù)，但它是json類型的，并且一個(gè)json格式的對(duì)象與數(shù)據(jù)庫(kù)的一條記錄相對(duì)應(yīng)。一個(gè)數(shù)據(jù)庫(kù)可以有很多集合，而集合相當(dāng)于一個(gè)json數(shù)組，一條記錄對(duì)應(yīng)著數(shù)組中的一個(gè)對(duì)象，json對(duì)象是被記錄的格式。 設(shè)置數(shù)據(jù)庫(kù)的相關(guān)連接信息以及把數(shù)據(jù)庫(kù)的模式信息寫到配置文件中，這是 信息管理模塊最主要的功能。數(shù)據(jù)庫(kù)中數(shù)據(jù)表、視圖的結(jié)構(gòu)信息是指模式信息，而系統(tǒng)的核心功能模塊是查詢定義模塊，并且根據(jù)查詢的需求對(duì)所要查詢定義進(jìn)行配置，并將所配置信息存儲(chǔ)到文件中。用戶對(duì)數(shù)據(jù)的查詢需求不僅在該系統(tǒng)被高效地回應(yīng)，而且系統(tǒng)的開發(fā)效率也得以提升，同時(shí)系統(tǒng)維護(hù)起來更方便。[14]關(guān)系型和json文檔型數(shù)據(jù)庫(kù)的概念對(duì)比關(guān)系如下表4.1所示： 表4.1 關(guān)系型和文檔型數(shù)據(jù)庫(kù)的對(duì)比
4.5.2 小程序與數(shù)據(jù)庫(kù)的交互在小程序開發(fā)過程中需要從小程序后臺(tái)請(qǐng)求相應(yīng)的數(shù)據(jù)，但是小程序直接連接后臺(tái)服務(wù)的數(shù)據(jù)庫(kù)是不能實(shí)現(xiàn)的，可以在微信小程序的index.js文件中編寫請(qǐng)求數(shù)據(jù)庫(kù)的小程序代碼，var app = getApp()來獲取App實(shí)例，然后在Page頁(yè)面中啟動(dòng)加載onLoad函數(shù)，功能是向服務(wù)器發(fā)送wx.request請(qǐng)求獲取服務(wù)器的url地址，并攜帶name為'bob’的參數(shù)。 Page({ onLoad: function () { wx.request({ url: //服務(wù)器地址 data: { name: 'bob'//請(qǐng)求參數(shù) } }) } }) Page頁(yè)面中的事件處理函數(shù)是通過loadState函數(shù)實(shí)現(xiàn)的，其中向服務(wù)器發(fā)送request請(qǐng)求，獲取全局變量的app.globalData，以及小程序API的頁(yè)面中的json內(nèi)容。核心代碼句為： loadState: function() { wx.request({ data:{ sessionId: wx.getStorageSync('sessionid'), } }) } 4.5.3 數(shù)據(jù)庫(kù)設(shè)計(jì)代碼實(shí)現(xiàn)如用戶個(gè)人信息的添加，在頁(yè)面的初始數(shù)據(jù)中，通過switchChange函數(shù)功能來進(jìn)行用戶的性別的選擇，然后進(jìn)行formSubmit表單的提交，通過向服務(wù)器后臺(tái)發(fā)送 wx.request請(qǐng)求，獲取鏈接地址URL后通過POST方法，添加e.detail.value數(shù)據(jù)詳情值，成功的話會(huì)顯示'添加成功’的圖標(biāo)，否則顯示data.msg錯(cuò)誤圖標(biāo)。 Page({ switchChange:function(e) { if (e.detail.value) { this.setData({ sex: '男' }); } else { this.setData({ sex: '女' }); } }, formSubmit: function (e) { wx.request({ url: , data: e.detail.value, success: (res) => { wx.showToast({ title: '添加成功’, }) } }) } }) 5 系統(tǒng)實(shí)現(xiàn)5.1 系統(tǒng)界面當(dāng)用戶首次登陸小程序時(shí)，會(huì)顯示初始index界面，里面包含用戶個(gè)人中心、當(dāng)前位置、目的地查找、預(yù)約時(shí)長(zhǎng)等跳轉(zhuǎn)界面的組件，點(diǎn)擊相應(yīng)的組件，會(huì)調(diào)用一些函數(shù)完成相應(yīng)的功能，如圖5.1所示：
圖5.1 初始界面圖 圖5.2 用戶注冊(cè)圖 當(dāng)用戶點(diǎn)擊首頁(yè)的注冊(cè)時(shí)，會(huì)進(jìn)行個(gè)人信息的注冊(cè)，注冊(cè)完成后返回進(jìn)行登錄，如圖5.2所示。點(diǎn)擊個(gè)人信息，會(huì)跳轉(zhuǎn)到個(gè)人中心界面，里面包含停車記錄、消息通知、密碼的修改等信息，點(diǎn)擊相應(yīng)的組件會(huì)完成相應(yīng)的功能，如圖5.3：
圖5.3 個(gè)人中心界面 5.2 關(guān)鍵代碼5.2.1 index首頁(yè)當(dāng)用戶進(jìn)入小程序首頁(yè)后，通過const app = getApp()來獲取小程序?qū)嵗?，在Page頁(yè)面的data數(shù)組中，包含 markers數(shù)組的標(biāo)記點(diǎn)，以及controls的數(shù)組控件，默認(rèn)的經(jīng)度longitude緯度latitude都為0，在timetxt文本框中顯示'預(yù)計(jì)時(shí)長(zhǎng)’的字樣。然后調(diào)用onReady函數(shù)里面的wx.createMapContext來創(chuàng)建MapContext對(duì)象，同時(shí)打印并判斷l(xiāng)ongitude是否為0。 IF longitude != 0 THEN Do this.gethearadr() ELSE this.getAdrDate() THEN DO this.loadState() 同理，在onLoad加載函數(shù)中，如果有e.longitude參數(shù)，就把數(shù)據(jù)設(shè)置成當(dāng)前事件的經(jīng)緯度。在searchFun的搜尋函數(shù)中，通過wx.navigateTo進(jìn)行頁(yè)面的跳轉(zhuǎn)，跳轉(zhuǎn)的URL地址包含在navigate組件中，還可以通過wx.navigateBack返回原來的頁(yè)面。在導(dǎo)航函數(shù)中，通過調(diào)用wx.openLocation來打開用戶當(dāng)前所在位置的經(jīng)緯度，查看當(dāng)前地址，同時(shí)設(shè)置scale的縮放級(jí)別(3-20)。在選擇預(yù)約時(shí)長(zhǎng)的函數(shù)中，通過wx.showActionSheet顯示操作菜單，首先是按鈕的文字?jǐn)?shù)組itemList中可以選擇需要的預(yù)約時(shí)長(zhǎng)。 5.2.2 登錄<view class="ad_popError" wx:if="{{popmsg}}">{{errorMsg}}</view> <view class='in-main'> <form bindsubmit="formSubmit"> <view class="lin-box"> <input class='txt' type="number" name="phone" placeholder='手機(jī)號(hào)'></input> </view> <view class="lin-box"> <text class='st'>密碼</text> <input class='txt' type="password" name="password" ></input> </view> <view class='lin-nav'> <navigator class='lf' hover-class="none" url='../register/register'>立即注冊(cè)</navigator> </view> <button class='login-btn' form-type="submit">登錄</button> </form> </view> 5.2.3 個(gè)人中心在個(gè)人中心界面，通過系統(tǒng)后可以進(jìn)行密碼的修改，首先通過String olduserpass=request.getParameter("ymm")輸入原始密碼，其次通過代碼String userpass=request.getParameter("xmm1")進(jìn)行新密碼的修改，最后 String copyuserpass =request.getParameter("xmm2")進(jìn)行新密碼的再次輸入確認(rèn)。如果輸入的密碼不等于原來的密碼，則會(huì)返回錯(cuò)誤信息，否則會(huì)重新進(jìn)行密碼的設(shè)置。 if(!(((String)m.get("pwd")).equals(olduserpass))){ request.setAttribute("error", ""); go("mod.jsp", request, response); }else{ String sql = "update allusers set pwd='"+userpass+"' where username='"+(String)request.getSession().getAttribute("username")+"'"; dao.commOper(sql); request.setAttribute("suc", ""); go("mod.jsp", request, response); } } 6 系統(tǒng)測(cè)試6.1 車位信息管理6.1.1 車位信息添加進(jìn)入系統(tǒng)后，添加車位號(hào)可以提交到系統(tǒng)，或者進(jìn)行車位號(hào)的重置，具體如圖6.1所示：
圖6.1 車位信息添加圖 圖6.2 車位信息查詢圖 6.1.2 車位信息查詢點(diǎn)擊車位信息添加，即可查看車位的具體信息，包括車位號(hào)、車位狀態(tài)、車位是否預(yù)約、以及進(jìn)行詳細(xì)的操作如圖6.2所示： 6.2 車位預(yù)約記錄通過查看具體車位狀態(tài)信息后，可以對(duì)空閑車位進(jìn)行預(yù)約，輸入所空閑的車位號(hào)以及預(yù)約人姓名進(jìn)行查找。在記錄中，包含車位號(hào)、車主姓名、預(yù)約日期、具體的修改、刪除和詳細(xì)的操作，具體如圖6.3所示：
圖6.3 預(yù)約車位記錄圖 圖6.4 車位信息添加圖 6.3 停車記錄6.3.1 停車收費(fèi)點(diǎn)擊停車收費(fèi)可以進(jìn)行具體車位的停車、結(jié)賬等操作，具體如圖6.4所示。 6.3.2 停車記錄管理點(diǎn)擊停車記錄管理可以查看車位、停車時(shí)間來進(jìn)行查找。如圖6.5所示：
圖6.5 停車記錄圖 總 結(jié)本系統(tǒng)以物聯(lián)網(wǎng)為核心，通過結(jié)合移動(dòng)端設(shè)備和數(shù)據(jù)庫(kù)，來有效利用空閑的車位資源，實(shí)現(xiàn)避免浪費(fèi)人力資源的目的。本系統(tǒng)包括微信小程序端、后臺(tái)管理平臺(tái)、服務(wù)器端、數(shù)據(jù)庫(kù)等幾大模塊，建立以停車位為核心的系統(tǒng)軟件模型與功能框架，之后采用JavaWeb和Android技術(shù)開發(fā)基于微信平臺(tái)開發(fā)小程序，最終實(shí)現(xiàn)車主查看車位狀態(tài)信息來預(yù)約使用車位，即時(shí)使用停車位。 本系統(tǒng)設(shè)計(jì)的智能車位管理系統(tǒng)微信小程序是鑒于社會(huì)對(duì)停車場(chǎng)停車的硬性需求，核心是智能終端，同時(shí)加上物聯(lián)網(wǎng)和互聯(lián)網(wǎng)技術(shù)，通過手機(jī)端的微信小程序，來對(duì)停車場(chǎng)空閑狀態(tài)的車位信息加以利用。本設(shè)計(jì)核心是停車位，主體是多樣化，利用停車場(chǎng)中空閑的車位，通過共享的理念，使得社會(huì)少量資源得到了最大化的社會(huì)效益，不僅有效的解決了停車難的問題，而且讓停車位真正的流動(dòng)起來。 參考文獻(xiàn)[1]洪長(zhǎng)平.一種停車場(chǎng)管理系統(tǒng)的設(shè)計(jì)與研究[J].漳州職業(yè)技術(shù)學(xué)院,2020年01期,ISSN 1673-1417 [2]姜俊杰,張毅,姚錫凡等.基于SQL的停車場(chǎng)管理系統(tǒng)軟件[J].華南理工大學(xué),2015. [3]趙和平.對(duì)標(biāo)“五型”政府 打造“智慧交通”[N].要聞·綜合2019,12-D631.5. [4]張恒.基于RFID的智能停車場(chǎng)三維分層定位的研究與設(shè)計(jì)[J].南京郵電大學(xué),2019. [5]劉文利.國(guó)內(nèi)停車場(chǎng)管理系統(tǒng)的現(xiàn)狀與發(fā)展趨勢(shì)[J].北京信息職業(yè)技術(shù)學(xué)院,2011.01.185. [6]祗旭,劉逸飛等.智能停車場(chǎng)定位推送服務(wù)系統(tǒng)的開發(fā)[J].西北民族大學(xué)電氣工程學(xué)院,2019.18.006. [7]袁堂青,亓婧.基于微信小程序的開發(fā)與研究[J].山東傳媒職業(yè)學(xué)院,2018. [8]趙戊辰.智能停車場(chǎng)泊位預(yù)測(cè)及誘導(dǎo)停車方法研究[D].哈爾濱商業(yè)大學(xué), 2015.06.07. [9]趙春展.大型停車場(chǎng)反向?qū)ぼ囅到y(tǒng)設(shè)計(jì)[D].華南理工大學(xué)，2015.01.003 [10]劉小龍.河南省高校圖書館微信公眾平臺(tái)建設(shè)現(xiàn)狀及對(duì)策探析[J].圖書情報(bào)導(dǎo)刊，2017,01:26-30. [11]段東辰.綿陽(yáng)長(zhǎng)虹國(guó)際城地下停車場(chǎng)車位主動(dòng)引導(dǎo)信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué)，2015.08:03-09. [12]傅偉,涂剛,張賢龍.基于微信小程序的電子商城設(shè)計(jì)與實(shí)現(xiàn)[J].江蘇財(cái)經(jīng)職業(yè)技術(shù)學(xué)院,2019. [13]段萌萌.Design of Smart Campus System Based on WeChat Mini Program[D]. 華中師范大學(xué),2017. [14]梁海燕.數(shù)據(jù)庫(kù)通用查詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].華中科技大學(xué),2014. 致 謝畢業(yè)設(shè)計(jì)即將完成，我興奮不已，最要感謝的是我的畢業(yè)設(shè)計(jì)指導(dǎo)老師，正是因?yàn)樗臒o私幫助，我大學(xué)四年所學(xué)到的知識(shí)才有機(jī)會(huì)展現(xiàn)成果。 回想我的大學(xué)生活，還記得在大一第一次上計(jì)算機(jī)課時(shí)，老師給我們講課的場(chǎng)景歷歷在目，記得學(xué)的第一本關(guān)于專業(yè)課的書，是老師讓我對(duì)物聯(lián)網(wǎng)工程這一門行業(yè)產(chǎn)生了濃厚的興趣，這四年學(xué)了很多關(guān)于專業(yè)課的知識(shí)，每一位老師都讓我難以忘記，還記得每一節(jié)課老師神采飛揚(yáng)的講課。那種印象，我想，無論過去多長(zhǎng)時(shí)間都不會(huì)忘記，每一位老師在課堂上是我在計(jì)算機(jī)這個(gè)行業(yè)的領(lǐng)路人。每一次周末，老師都會(huì)對(duì)我們說歡迎大家去她家玩，大學(xué)可以遇到這樣的好老師，我會(huì)銘記于心。還記得在第一次考證書時(shí)，無論是在晚上還是在周末向老師提一些自己不懂的知識(shí)，老師都會(huì)給我解答，對(duì)我鼓勵(lì)。轉(zhuǎn)眼間大學(xué)生活就要結(jié)束了 ，帶著不舍即將離開校園，但我無論在哪工作，都不會(huì)忘記老師在課堂上對(duì)我的諄諄教誨，更不會(huì)忘記作為一名計(jì)算機(jī)人員的職業(yè)道德。 畢業(yè)設(shè)計(jì)結(jié)束了，但通過設(shè)計(jì)讓我明白的道理以及學(xué)到的知識(shí)卻讓我受益終身。我深刻理解了在大學(xué)課堂上，老師們教學(xué)的辛苦和希望學(xué)生們學(xué)到知識(shí)的心愿。通過這次畢業(yè)設(shè)計(jì)不但檢查了我的學(xué)習(xí)成果，同時(shí)也是學(xué)校和老師們給我們上的最后一堂課，目的是讓我們縷清思路，容光煥發(fā)的去面對(duì)這個(gè)社會(huì)，為社會(huì)做出一份貢獻(xiàn)。最后感謝大學(xué)四年的校園，感謝教過我的老師，感謝我的同學(xué)們。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
