PAGE題目《知公交》小程序的制作與實(shí)現(xiàn)PAGE2《知公交》小程序的制作與實(shí)現(xiàn)[摘要]微信小程序自面世以來(lái)在零售、餐飲、游戲等多個(gè)方面都為內(nèi)容創(chuàng)業(yè)者以及中小企業(yè)創(chuàng)造了許多利益，微信小程序因?yàn)楸晨课⑿?，能為企業(yè)帶來(lái)海量的流量，微信小程序還能為企業(yè)節(jié)省更多的成本。基于小程序?qū)崿F(xiàn)的《知公交》微信小程序主要功能是獲取自身所在城市內(nèi)的公交車(chē)路線信息以及附加功能中獲取的當(dāng)?shù)靥鞖獾膶?shí)時(shí)情報(bào)。通過(guò)微信開(kāi)發(fā)者工具中的API接口功能在和風(fēng)天氣以及極速數(shù)據(jù)API官網(wǎng)中注冊(cè)開(kāi)發(fā)者獲取小程序開(kāi)發(fā)需要的API接口以及調(diào)用數(shù)據(jù)需要的key。使用者可以通過(guò)公交車(chē)路線的搜索獲取對(duì)應(yīng)公交車(chē)路線的相應(yīng)信息，也能在附加功能頁(yè)面中獲取當(dāng)?shù)氐膶?shí)時(shí)天氣信息，給人們帶來(lái)生活中的便利。交通運(yùn)輸在一定程度程度上深刻影響著國(guó)家，它關(guān)系到一個(gè)國(guó)家的經(jīng)濟(jì)命脈及生產(chǎn)力的發(fā)展。它還關(guān)系到一個(gè)地區(qū)的興旺，對(duì)經(jīng)濟(jì)的發(fā)展有著巨大的推動(dòng)作用，而其中公交車(chē)算是比較大眾的一種交通運(yùn)輸方式。選擇微信小程序作為課題設(shè)計(jì)不僅是順應(yīng)了時(shí)代發(fā)展的潮流，還是在衡量了自身的所具備的知識(shí)、技術(shù)等開(kāi)發(fā)條件后做出的一個(gè)慎重選擇。小程序?qū)τ诮裉斓腁PP來(lái)說(shuō)，是將APP功能輕量化并保留核心功能的一類(lèi)隨取隨用APP，小程序可以取代部分功能單一的APP，對(duì)于粉絲的工具體驗(yàn)感可以很好。小程序有優(yōu)勢(shì)，自然也有一定的劣勢(shì)，小程序流量入口太少?gòu)亩鵁o(wú)法讓企業(yè)去沉淀自己的粉絲，也沒(méi)有明確的營(yíng)銷(xiāo)措施刺激粉絲與企業(yè)互動(dòng)也提高不了粉絲的購(gòu)買(mǎi)效率。[關(guān)鍵字]微信小程序；API接口；實(shí)時(shí)天氣；公交路線查詢(xún)

ThemakingandRealizationofthesmallprogramof"Zhigong"Abstract Sinceitsappearance,wechatapplethascreatedalotofbenefitsforcontententrepreneursandsmallandmedium-sizedenterprisesinretail,catering,gamesandotheraspects.Becauseofitsback-uptowechat,wechatappletcanbringmassivetraffictoenterprises,andwechatappletcanalsosavemorecostsforenterprises.Themainfunctionof"gettinglocalweatherinformation"istoobtainthelocalbusrouteinformationbasedonthemicromessagefunction.ThroughtheAPIinterfacefunctionofwechatdevelopertool,registerdevelopersintheofficialwebsiteofwindyweatherandextremespeeddataAPItoobtaintheAPIinterfaceneededforsmallprogramdevelopmentandthekeyneededtocalldata.Userscangetthecorrespondinginformationofthecorrespondingbusroutesthroughthesearchofbusroutes,andcanalsoobtainthelocalreal-timeweatherinformationintheadditionalfunctionpage,whichbringsconveniencetopeople'slife.Transportationisofgreatsignificancetoacountry,whichisrelatedtothedevelopmentofnationaleconomiclifelineandproductivity.Itisrelatedtotheprosperityofaregion,andhasahugeroleinpromotingthedevelopmentofeconomy.Amongthem,busisakindofpublictransportationmode.Choosingwechatsmallprogramasthesubjectdesignnotonlyconformstothetrendofthedevelopmentofthetimes,butalsomakesaprudentchoiceafterweighingitsowndevelopmentconditions.Comparedwithtoday'sapp,appletisakindofon-demandappthatlightensappfunctionsandretainscorefunctions.Appletscanreplacesomeappswithsinglefunctions,whichcanprovidefanswithagoodtoolexperience.Smallprogramshaveadvantages,butalsohavecertaindisadvantages.Thedisadvantagesarethattherearenotenoughtrafficentrancestoletenterprisesprecipitatefans,andtherearenotenoughactivemarketingmeasurestocontinuouslyactivatefans'interactionandpurchaseefficiency.KeyWordsWechatdevelopmentapplet;APIinterface;realtimeweather;busroutequery

目錄13910第1章緒論 1292781.1項(xiàng)目研究的背景和意義 1293511.2國(guó)內(nèi)研究現(xiàn)狀 149581.3本章小結(jié) 220599第2章微信小程序開(kāi)發(fā)相關(guān)技術(shù)研究 3285732.1微信小程序 3128692.2API接口 5244972.3Mysql數(shù)據(jù)庫(kù) 5138762.4本章小結(jié) 66534第3章需求分析與可行性分析 8290393.1需求分析 81983.1.1用戶(hù)需求分析 8305873.1.2功能需求分析 8100773.2可行性分析 1054153.2.1市場(chǎng)可行性 10264063.2.2技術(shù)可行性 109220第4章小程序分析及總體設(shè)計(jì) 1015474.1小程序概述 10170274.2小程序總體設(shè)計(jì) 1182224.2.1小程序架構(gòu)設(shè)計(jì) 11241154.2.2小程序模塊設(shè)計(jì) 13121454.3功能總體描述 1410417第5章小程序詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 1519765.1用戶(hù)登錄版塊 1554415.1.1功能說(shuō)明 1530685.1.2版塊設(shè)計(jì) 15113205.1.3流程設(shè)計(jì) 16222505.1.4核心代碼和實(shí)現(xiàn)效果 18109035.2自我定位消息可視化版塊 1947305.2.1功能說(shuō)明 19251005.2.2板塊設(shè)計(jì) 1916585.2.3流程設(shè)計(jì) 20134615.2.4核心代碼和效果實(shí)現(xiàn) 2070555.3查詢(xún)公交車(chē)版塊 21245575.3.1功能說(shuō)明 21297365.3.2板塊設(shè)計(jì) 2112013圖55查詢(xún)公交車(chē)信息板塊設(shè)計(jì)頁(yè)面 2215315Fig55Querybusinformationdesignpage 2263205.3.3流程設(shè)計(jì) 231495圖56查詢(xún)公交車(chē)信息流程圖 2318396Fig56Flowchartofbusinformationinquiry 23264535.3.4核心代碼和實(shí)現(xiàn)效果 2347365.4實(shí)時(shí)天氣版塊 2514545.4.1功能說(shuō)明 25229835.4.2板塊設(shè)計(jì) 2529059圖57查詢(xún)公交車(chē)信息板塊設(shè)計(jì)頁(yè)面 25223735.4.3流程設(shè)計(jì) 2589415.4.4核心代碼和實(shí)現(xiàn)效果 26316145.5數(shù)據(jù)庫(kù)設(shè)計(jì) 28266865.5.1數(shù)據(jù)庫(kù)需求分析 2817465.5.2數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì) 2825611第6章總結(jié)和展望 30110536.1總結(jié) 30236376.2展望 303176結(jié)論 3127644致謝語(yǔ) 323723參考文獻(xiàn) 33《知公交》小程序的制作與實(shí)現(xiàn)緒論項(xiàng)目研究的背景和意義我們現(xiàn)在處于信息快速發(fā)展的年代，信息社會(huì)中，當(dāng)代先進(jìn)生產(chǎn)力最重要的組成成分之一就是信息技術(shù)，它在產(chǎn)業(yè)結(jié)構(gòu)的調(diào)整與優(yōu)化、經(jīng)濟(jì)增長(zhǎng)、科技和教育的發(fā)展、社會(huì)進(jìn)步與國(guó)家綜合實(shí)力等方面起到了直接、深遠(yuǎn)的作用。小程序在商業(yè)領(lǐng)域的主要角色可以說(shuō)是間接作用，在國(guó)家進(jìn)步和發(fā)展中，小程序以流量大、成本低等一系列優(yōu)點(diǎn)而受到廣大商戶(hù)和創(chuàng)作者的青睞。小程序的開(kāi)發(fā)優(yōu)勢(shì)很大，比如可以將小程序引入多個(gè)進(jìn)口，再如小程序就是將app功能輕量化，并保持核心功能的隨取型app。交通運(yùn)輸對(duì)國(guó)家來(lái)說(shuō)有著重要的意義，它關(guān)系到國(guó)家的經(jīng)濟(jì)命脈及生產(chǎn)力的發(fā)展。它關(guān)系到一個(gè)地區(qū)的興旺與否，具有推動(dòng)經(jīng)濟(jì)發(fā)展的巨大作用，而公交車(chē)算是交通運(yùn)輸中比較大眾的一種方式。對(duì)經(jīng)濟(jì)發(fā)展起到了巨大的作用，而公交汽車(chē)則是較為大眾化的一種運(yùn)輸形式。國(guó)內(nèi)研究現(xiàn)狀根據(jù)中國(guó)產(chǎn)業(yè)信息網(wǎng)中2020年中國(guó)小程序發(fā)展現(xiàn)狀及前景分析這篇文章中的內(nèi)容可以看出，小程序雖自2017年面世以來(lái)不過(guò)三年不到的時(shí)間，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，人們?cè)谙硎芫W(wǎng)絡(luò)帶來(lái)的便利的同時(shí)，也會(huì)對(duì)網(wǎng)絡(luò)的時(shí)效性提出更高的要求。經(jīng)過(guò)一段時(shí)間的發(fā)展，如今小程序已經(jīng)在零售、餐飲、游戲等多個(gè)方面的運(yùn)用已經(jīng)逐漸承受，現(xiàn)在各種各樣的小程序?qū)映霾桓F，小程序已經(jīng)在不知不自覺(jué)中成為人們生活中不可缺少的一種便利方式，共享單車(chē)、共享充電寶以及許多餐廳里的掃碼點(diǎn)餐小程序、還有送外賣(mài)和送快遞的小程序等等已經(jīng)漸漸成為現(xiàn)代人們生活的一種常見(jiàn)事物。

微信小程序開(kāi)發(fā)相關(guān)技術(shù)研究微信小程序微信小程序是一種全新的將用戶(hù)與服務(wù)完美銜接的方式。小程序?yàn)橛脩?hù)提供了即取即用、用完即走的輕便服務(wù)，主要在用戶(hù)獲取小程序、使用小程序方便快捷的服務(wù)理念上得到體現(xiàn)。用戶(hù)可以用多種方法獲取到小程序，可以通過(guò)利用微信自帶的掃一掃功能獲取小程序，可以通過(guò)公眾號(hào)關(guān)聯(lián)的小程序碼獲取小程序，也還可以通過(guò)在微信的搜索頁(yè)面發(fā)小現(xiàn)程序，因?yàn)檎麄€(gè)小程序文件的占用內(nèi)存空間非常小小，用戶(hù)在下載安裝小程序的過(guò)程中幾乎感知不到消耗，因此從用戶(hù)獲取小程序到點(diǎn)擊進(jìn)入開(kāi)始使用小程序應(yīng)用的整個(gè)過(guò)程速度非?？?。MINA是微信小程序開(kāi)發(fā)的框架，該框架為開(kāi)發(fā)者在微信開(kāi)發(fā)中供了豐富的組件與API接口技術(shù)等開(kāi)發(fā)所需的工具和功能，使開(kāi)發(fā)變的盡可能簡(jiǎn)單、高效，具有原生APP的體驗(yàn)服務(wù)。圖2-1微信MINA框架架構(gòu)圖MINA框架為開(kāi)發(fā)者提供了視圖層描述語(yǔ)言WXML和WXSS，還有基于JavaScript的邏輯層框架，MINA框架在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，MINA的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。整個(gè)系統(tǒng)分為兩塊視圖層和邏輯層。視圖層：框架的視圖層由WXML與WXSS編寫(xiě)，由組件來(lái)進(jìn)行展示。微信小程序中數(shù)據(jù)在邏輯層中進(jìn)行處理后發(fā)送并展現(xiàn)在視圖層上，同時(shí)接收視圖層的事件反饋。視圖層以給定的樣式展現(xiàn)數(shù)據(jù)并反饋時(shí)間給邏輯層，而數(shù)據(jù)展現(xiàn)是以組件來(lái)進(jìn)行的。組件是視圖的基本組成單元。邏輯層：邏輯層是處理事務(wù)邏輯的“工作地點(diǎn)”。對(duì)于微信小程序而言，所有.js腳本文件的集合組成了邏輯層。在微信小程序中數(shù)據(jù)在邏輯層被處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。微信小程序開(kāi)發(fā)框架中JavaScript編寫(xiě)邏輯層。在JavaScript的基礎(chǔ)上，微信開(kāi)發(fā)團(tuán)隊(duì)做了一些適當(dāng)?shù)男薷?，進(jìn)而提高開(kāi)發(fā)小程序的效率。MINA框架具有四種不同類(lèi)型的文件，如表2-1所示。表2SEQ表\*ARABIC\s11MINA文件類(lèi)型序號(hào)文件作用1.js文件JavaScript編寫(xiě)，邏輯層框架2.json文件負(fù)責(zé)頁(yè)面或者項(xiàng)目的配置3.wxml視圖層文件MINA自帶的一套標(biāo)簽語(yǔ)言4.wxml視圖層文件描述頁(yè)面的展示樣式API接口API也叫應(yīng)用程序接口，是一些預(yù)先定義的函數(shù)或指軟件系統(tǒng)不同組成部分銜接的約定。用來(lái)提供應(yīng)用程序與開(kāi)發(fā)人員基于某軟件或硬件得以訪問(wèn)的一組例程，而又無(wú)需訪問(wèn)源碼，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)。應(yīng)用程序接口又稱(chēng)為應(yīng)用編程接口，是一組定義、程序及協(xié)議的集合，通過(guò)API接口實(shí)現(xiàn)計(jì)算機(jī)軟件之間的相互通信。程序設(shè)計(jì)的實(shí)踐中，編程接口的設(shè)計(jì)首先要使軟件系統(tǒng)的職責(zé)得到合理劃分。良好的接口可以降低系統(tǒng)各部分的相互依賴(lài)，提高組成單元的內(nèi)聚性，降低組成單元間的耦合程度，提高系統(tǒng)的可維護(hù)性和可擴(kuò)展性。在小程序開(kāi)發(fā)中需要根據(jù)開(kāi)發(fā)接口網(wǎng)站提供的開(kāi)發(fā)文檔，開(kāi)發(fā)者可以通過(guò)開(kāi)放的API接口從服務(wù)器中獲取所需要的數(shù)據(jù)進(jìn)而完成小程序部分功能模塊的實(shí)現(xiàn)。Mysql數(shù)據(jù)庫(kù)MySQL是一個(gè)小型關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，開(kāi)發(fā)者是瑞典MySQLAB公司，該公司在2008年被Sun公司收購(gòu)，2009年Sun公司被Oracle公司收購(gòu)。目前Internet上的中小型網(wǎng)站的數(shù)據(jù)庫(kù)大多是MySQL。MySQL具有體積小、速度快、總體擁有成本低、開(kāi)放源代碼、性能快捷、優(yōu)化SQL語(yǔ)言、容易使用、多線程和可靠性、多用戶(hù)支持、可移植性和開(kāi)放源代碼、遵守國(guó)際標(biāo)準(zhǔn)和國(guó)際化支持、為多種編程語(yǔ)言提供API等特點(diǎn)。圖2-2MySQL系統(tǒng)架構(gòu)圖mysql架構(gòu)大致上可以劃分為四層。(1)第一層，主要是不同客戶(hù)端的連接。(2)第二層（鏈接層），主要是處理客戶(hù)端的連接。(3)第三層（服務(wù)層），處理客戶(hù)端的sql語(yǔ)句。(4)第四層（引擎層），存儲(chǔ)引擎真實(shí)的執(zhí)行sql語(yǔ)句。本章小結(jié)在本章中，主要描述了本文工作中主要用到的關(guān)鍵技術(shù)，其中包含微信小程序的詳細(xì)框架，API接口技術(shù)，最后還闡述了選擇MySQL作為項(xiàng)目的數(shù)據(jù)庫(kù)的優(yōu)勢(shì)以及其系統(tǒng)架構(gòu)介紹。微信小程序?yàn)槲覀兲峁┝艘粋€(gè)非常好的發(fā)展平臺(tái)，可以展示各種資料和豐富的功能，通過(guò)請(qǐng)求webapi平臺(tái)獲得xml數(shù)據(jù)，并在小程序界面中動(dòng)態(tài)顯示數(shù)據(jù)。在數(shù)據(jù)重要環(huán)節(jié)中，我們?cè)O(shè)計(jì)并編寫(xiě)webapi平臺(tái)非常重要。在數(shù)據(jù)的關(guān)鍵一環(huán)中，我們?cè)O(shè)計(jì)和編寫(xiě)WebAPI平臺(tái)是非常重要的，通過(guò)這個(gè)我們可以實(shí)現(xiàn)數(shù)據(jù)的集中控制和管理。小程序云開(kāi)發(fā)的功能已經(jīng)越來(lái)越強(qiáng)大了，現(xiàn)在小程序云開(kāi)發(fā)可以直接借助云函數(shù)來(lái)鏈接mysql數(shù)據(jù)，操作mysql數(shù)據(jù)庫(kù)中的數(shù)據(jù)。

需求分析與可行性分析需求分析用戶(hù)需求分析做一個(gè)系統(tǒng)主要是為了解決用戶(hù)需求而開(kāi)發(fā)的，這樣才具有實(shí)際意義，所以研究用戶(hù)的需求是非常必要的，功能需求分析《知公交》小程序是可以幫助使用者查詢(xún)已知公交路線號(hào)的公交路線信息，附加功能還能為使用者提供自身的定位信息以及當(dāng)?shù)氐膶?shí)時(shí)天氣情況，使用者還可以查看自己的搜索路線記錄通過(guò)登錄用戶(hù)收藏常用路線。功能需求分析結(jié)合用戶(hù)需求分析后，結(jié)合小程序的開(kāi)發(fā)“知公交”小程序的功能需求如下：獲取并管理用戶(hù)信息通過(guò)小程序開(kāi)發(fā)中的特定功能代碼實(shí)現(xiàn)獲取自身地理位置等信息，用戶(hù)使用微信小程序搜索功能，搜索“知公交”后，進(jìn)入到“知公交”主頁(yè)面，獲取用戶(hù)的微信信息進(jìn)行綁定，所以需要用戶(hù)授權(quán)“知公交”獲得用戶(hù)的信息（昵稱(chēng)、頭像等）。定位功能智能手機(jī)產(chǎn)品一般都會(huì)有GPS，所以本小程序應(yīng)當(dāng)具有定位的功能，讓用戶(hù)允許“知公交”使用用戶(hù)的地理位置信息，顯示出用戶(hù)當(dāng)前位置信息，并在頁(yè)面地圖模塊上顯示用戶(hù)當(dāng)前的位置。搜索路線用戶(hù)在使用“知公交”小程序時(shí)，通過(guò)搜索頁(yè)面輸入公交路線班次號(hào)，通過(guò)搜索由API接口獲取的數(shù)據(jù)并將其對(duì)應(yīng)的車(chē)輛信息顯示在路線頁(yè)面中。收藏路線用戶(hù)在使用“知公交”小程序時(shí)，通過(guò)登錄后可進(jìn)入“我的”頁(yè)面中查看收藏的路線信息，也能在搜索后將路線信息收藏到“我的收藏”中。實(shí)時(shí)天氣用戶(hù)在使用“知公交”小程序時(shí)，通過(guò)定位自動(dòng)定位，顯示當(dāng)前城市的實(shí)時(shí)天氣狀況顯示搜索歷史用戶(hù)使用“知公交”小程序每次的搜索都會(huì)被記錄，顯示到記錄頁(yè)面，用戶(hù)可以通過(guò)按鈕跳轉(zhuǎn)至該頁(yè)面查看近期的搜索記錄?？尚行苑治鍪袌?chǎng)可行性自2017年小程序正式上線以來(lái)，發(fā)布的小程序就已經(jīng)覆蓋教育、媒體、工具、交通、、生活服務(wù)、科技、旅游、電商、餐飲等多個(gè)領(lǐng)域中，一直到今天微信月的活躍設(shè)備數(shù)已到達(dá)一個(gè)很高的數(shù)值，微信小程序受到眾多開(kāi)發(fā)者和用戶(hù)的熱情擁抱。微信小程序的頭部集中趨勢(shì)明顯，截至今日，在月活TOP100微信小程序中，電子商務(wù)、美食外賣(mài)、旅游出行、便攜生活和游戲服務(wù)類(lèi)這五類(lèi)共占據(jù)了71席，其中電子商務(wù)類(lèi)分布占比最大為20%。企業(yè)與商家的微信小程序越早進(jìn)行定制開(kāi)發(fā)，就能夠越早擁有更多的功能和市場(chǎng)優(yōu)勢(shì)。技術(shù)可行性該設(shè)計(jì)是以“車(chē)來(lái)了”實(shí)時(shí)公交車(chē)小程序?yàn)殪`感的設(shè)計(jì)，“車(chē)來(lái)了”實(shí)時(shí)公交車(chē)小程序是一款已經(jīng)取得重大成功的小程序，該設(shè)計(jì)從一定角度上可以說(shuō)是“車(chē)來(lái)了”小程序的簡(jiǎn)化版，那么在技術(shù)層面上是不太可能會(huì)存在其他問(wèn)題的，通過(guò)調(diào)查知「車(chē)來(lái)了」是最早一批參與內(nèi)測(cè)的小程序，作為以服務(wù)公交出行為基礎(chǔ)的工具，「車(chē)來(lái)了」最核心的一個(gè)功能就是告訴用戶(hù)實(shí)時(shí)的車(chē)輛位置信息。但其實(shí)很多城市的公交系統(tǒng)出于安全考慮，并不會(huì)輕易對(duì)車(chē)輛GPS進(jìn)行數(shù)據(jù)共享?！杠?chē)來(lái)了」為了更精準(zhǔn)的提供車(chē)輛實(shí)時(shí)數(shù)據(jù)，是通過(guò)車(chē)輛時(shí)刻表和公交站臺(tái)位置數(shù)據(jù)模擬車(chē)輛行進(jìn)過(guò)程。小程序分析及總體設(shè)計(jì)小程序概述“知公交”小程序是以“車(chē)來(lái)了”小程序?yàn)樵O(shè)計(jì)靈感的一款主打查詢(xún)公交車(chē)路線信息的一款微信小程序。除了主要功能為查詢(xún)對(duì)應(yīng)公交車(chē)路線信息外，該小程序還擁有額外的功能去實(shí)現(xiàn)當(dāng)?shù)靥鞖馇闆r的實(shí)時(shí)追蹤。通過(guò)獲取用戶(hù)信息后可實(shí)現(xiàn)對(duì)路線信息的收藏功能。小程序總體設(shè)計(jì)小程序架構(gòu)設(shè)計(jì)每個(gè)小程序都是由兩個(gè)主要部分來(lái)組成：主體部分以及各個(gè)頁(yè)面.類(lèi)似于許多框架，主體部分主要用于核心的配置，各個(gè)頁(yè)面主要用于不同業(yè)務(wù)場(chǎng)景。

主體部分主要由三個(gè)文件構(gòu)成

1）app.js：小程序邏輯，初始化APP

2）app.json：小程序配置，比如導(dǎo)航、窗口、頁(yè)面http請(qǐng)求跳轉(zhuǎn)等

3）app.wxss：公共樣式配置頁(yè)面由4個(gè)文件構(gòu)成

1）.js：頁(yè)面邏輯，相當(dāng)于控制層（C）；也包括部分的數(shù)據(jù)（M）

2）.wxml：頁(yè)面結(jié)構(gòu)展示，相當(dāng)于視圖層（V）

3）.wxss：頁(yè)面樣式表，純前端，用于輔助wxml展示

4）.json：頁(yè)面配置，配置一些頁(yè)面展示的數(shù)據(jù)，充當(dāng)部分的模型（M）圖4SEQ圖\*ARABIC\s11小程序架構(gòu)圖小程序模塊設(shè)計(jì)本小程序主要由三個(gè)功能模塊構(gòu)成，小程序功能結(jié)構(gòu)圖如下圖42小程序功能結(jié)構(gòu)圖1.主頁(yè)模塊：包括一個(gè)搜索按鈕用于跳轉(zhuǎn)頁(yè)面，以及一個(gè)map控件實(shí)時(shí)自我定位的可視化顯示。2.路線搜索模塊：通過(guò)主頁(yè)的搜索按鈕跳轉(zhuǎn)至搜索頁(yè)面，通過(guò)輸入相應(yīng)的公交車(chē)班次信息，搜索從API接口中獲取的符合關(guān)鍵字搜索的路線信息。并且可以在路線信息的頁(yè)面點(diǎn)擊收藏按鈕實(shí)現(xiàn)路線信息的收藏便于查看（得先進(jìn)行用戶(hù)的登錄）3.實(shí)時(shí)天氣模塊：打開(kāi)天氣頁(yè)面時(shí)定位到用戶(hù)所在當(dāng)前城市的位置信息，通過(guò)和風(fēng)天氣的API接口獲取并顯示相關(guān)數(shù)據(jù)到頁(yè)面上，實(shí)現(xiàn)當(dāng)前城市天氣的實(shí)時(shí)追蹤4.用戶(hù)登錄模塊：在進(jìn)入小程序后，通過(guò)登錄獲取用戶(hù)的信息后可以獲取收藏信息的列表并顯示出來(lái)功能總體描述用戶(hù)登錄：登錄用戶(hù)后可查看搜索歷史和收藏路線自我定位消息可視化：在地圖控件上顯示自身所處位置以及附近信息查詢(xún)公交車(chē)信息：通過(guò)搜索框進(jìn)行對(duì)應(yīng)路線信息的查詢(xún)實(shí)時(shí)天氣：自動(dòng)獲取當(dāng)前城市相對(duì)應(yīng)的實(shí)時(shí)天氣情況我的收藏：通過(guò)登錄用戶(hù)后可將路線收藏，便于查看搜索歷史：記錄搜索過(guò)的歷史小程序詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)用戶(hù)登錄版塊功能說(shuō)明1.在未登錄狀態(tài)下顯示登錄按鈕，用戶(hù)點(diǎn)擊后可以顯示微信頭像和昵稱(chēng)；2.登錄后讀取當(dāng)前用戶(hù)的收藏夾，展示收藏的公交車(chē)信息列表3.收藏夾中的路線可以直接點(diǎn)擊查看公交車(chē)路線信息4.未登錄狀況下收藏夾顯示為空版塊設(shè)計(jì)用戶(hù)登錄功能的板塊設(shè)計(jì)如下圖5-1圖5SEQ圖\*ARABIC\s11用戶(hù)登錄功能的板塊設(shè)計(jì)圖一個(gè)簡(jiǎn)潔的登錄界面需要的有輸入框、按鈕和提示字?！拔业摹表?yè)面由登陸面板（顯示微信頭像和昵稱(chēng)）和我的收藏部分（顯示收藏的公交車(chē)路線）構(gòu)成。登錄面板需要利用調(diào)用wx.login()獲取臨時(shí)登錄憑證code，并回傳到開(kāi)發(fā)者服務(wù)器。調(diào)用auth.code2Session接口，換取用戶(hù)唯一標(biāo)識(shí)OpenID和會(huì)話密鑰session_key。流程設(shè)計(jì)用戶(hù)登錄功能的功能結(jié)構(gòu)圖如下圖5-2圖52用戶(hù)登錄功能流程圖微信端點(diǎn)擊登錄按鈕后會(huì)去調(diào)用wx.login接口，如果接口調(diào)用成功，它會(huì)返回一個(gè)code值。我們就把這個(gè)code值放到緩存中，以變以后來(lái)調(diào)用。與此同時(shí)，微信端調(diào)用wx.getUserInfo去獲取用戶(hù)的基本信息，包括nickname、avatarUrl等。用以顯示在頁(yè)面上。獲取到code值后，微信端會(huì)調(diào)用wx.request接口，發(fā)起網(wǎng)絡(luò)請(qǐng)求，到服務(wù)器端。服務(wù)器端接收到請(qǐng)求后，會(huì)去調(diào)用auth.code2Session接口，換取用戶(hù)唯一標(biāo)識(shí)OpenID和會(huì)話密鑰session_key。服務(wù)器端獲取到OpenID和session_key之后會(huì)返回到微信端一個(gè)自定義登錄態(tài)，這個(gè)可以是一個(gè)字符串，也可以是一個(gè)對(duì)象，有自己決定。6.微信端通過(guò)wx.request接口接收到這個(gè)自定義登錄態(tài)的信息后，也將這個(gè)自定義登錄態(tài)存到緩存中，以變后面業(yè)務(wù)的身份確認(rèn)。核心代碼和實(shí)現(xiàn)效果核心代碼data:{nickName:"未登錄，點(diǎn)此登錄",src:"/assets/Tabbar/my-icon.png"},getMyInfo:function(e){//console.log(e.detail.userInfo)letinfo=e.detail.userInfothis.setData({src:info.avatarUrl,nickName:info.nickName,isLogin:true})},getMyFavorites:function(){letinfo=wx.getStorageInfoSync()letkeys=info.keysletnum=keys.lengthletMylist=[];for(vari=0;i<num;i++){letobj=wx.getStorageSync(keys[i])}this.setData({newslist=Mylist})},實(shí)現(xiàn)效果圖53用戶(hù)登錄無(wú)收藏時(shí) 圖54用戶(hù)登錄且有收藏后自我定位消息可視化版塊功能說(shuō)明 在進(jìn)入主頁(yè)面時(shí)，在地圖控件上中央位置顯示用戶(hù)自身所在位置，并以點(diǎn)的形式展示在地圖上。板塊設(shè)計(jì)圖55自我定位版塊設(shè)計(jì)圖1）主頁(yè)面設(shè)計(jì)由搜索按鈕和一個(gè)地圖（map）控件共同組成2）在地圖上設(shè)置一個(gè)按鈕可復(fù)位用戶(hù)所在位置流程設(shè)計(jì)圖56自我定位功能流程圖核心代碼和效果實(shí)現(xiàn)核心代碼onReady:function(e){this.mapCtx=wx.createMapContext('myMap')},getCenterLocation:function(){this.mapCtx.getCenterLocation({success:function(res){console.log(res.longitude)console.log(res.latitude)}})},moveToLocation:function(){this.mapCtx.moveToLocation()},includePoints:function(){this.mapCtx.includePoints({padding:[10],points:[{latitude:23.10229,longitude:113.3345211,},{latitude:23.00229,longitude:113.3345211,}]})}實(shí)現(xiàn)效果圖57移到任意位置 圖58自點(diǎn)擊按鈕后復(fù)位查詢(xún)公交車(chē)版塊功能說(shuō)明 通過(guò)主頁(yè)面跳轉(zhuǎn)到搜索頁(yè)面后。在輸入框中輸入要查詢(xún)車(chē)次的班次號(hào)，通過(guò)搜索將路線詳細(xì)信息顯示在同一頁(yè)面。板塊設(shè)計(jì)圖59查詢(xún)公交車(chē)信息板塊設(shè)計(jì)頁(yè)面搜索版塊采用了將詳細(xì)信息與搜索界面共同呈現(xiàn)在一個(gè)頁(yè)面中的設(shè)計(jì)通過(guò)在輸入框中輸入信息后直接搜索并顯示在下方的詳細(xì)信息畫(huà)面通過(guò)在詳細(xì)頁(yè)面最下方設(shè)置一個(gè)收藏按鈕（需登錄后方使用）流程設(shè)計(jì) 圖510查詢(xún)公交車(chē)信息流程圖核心代碼和實(shí)現(xiàn)效果核心代碼handleInput:function(e){this.setData({transitno:e.detail.value})this.getbus_name()},getbus_name:function(){varthat=thiswx.request({url:'/transit/line?cityid=366&appkey=4afec9a66f7cdcbd',data:{transitno:that.data.transitno},success:function(res){console.log(res.data)that.setData({transitno:res.data.result[0].transitno})that.setData({endtime:res.data.result[0].endtime})that.setData({station_list:res.data.result[0].list})that.setData({starttime:res.data.result[0].starttime})that.setData({startstation:res.data.result[0].startstation})}})},2.實(shí)現(xiàn)效果圖510查詢(xún)1路公交車(chē)信息 圖510查詢(xún)118路公交車(chē)信息實(shí)時(shí)天氣版塊功能說(shuō)明獲取用戶(hù)自身位置信息，通過(guò)選擇器中的信息（默認(rèn)為用戶(hù)當(dāng)前所在城市）匹配API對(duì)應(yīng)城市的實(shí)時(shí)數(shù)據(jù)。板塊設(shè)計(jì)圖513查詢(xún)公交車(chē)信息板塊設(shè)計(jì)頁(yè)面通過(guò)改變選擇器可查看其他地區(qū)的實(shí)時(shí)天氣，默認(rèn)是顯示用戶(hù)本地天氣情況流程設(shè)計(jì)圖514查詢(xún)公交車(chē)信息板塊設(shè)計(jì)頁(yè)面核心代碼和實(shí)現(xiàn)效果核心代碼changeRegion:function(e){this.setData({region:e.detail.value})this.getMessage();},getMessage:function(){varthat=this;wx.request({url:'/v2/city/lookup?',data:{location:that.data.region[2],key:'82c79ad55f284ddea3d131a252cc5aeb'},success:function(res){that.setData({Place_ID:res.data.location[0].id})//console.log(res.data);wx.request({url:'/v7/weather/now?',data:{location:that.data.Place_ID,key:'82c79ad55f284ddea3d131a252cc5aeb'},success:function(res){//console.log(res.data)that.setData({Place_Message:res.data.now})}})}})},onLoad:function(options){this.getMessage()},實(shí)現(xiàn)效果圖5-15首次進(jìn)入天氣頁(yè)面 圖5-16將城市修改為北京市后數(shù)據(jù)庫(kù)設(shè)計(jì)數(shù)據(jù)庫(kù)需求分析在該設(shè)計(jì)中需要借用到web云開(kāi)中的云數(shù)據(jù)庫(kù)技術(shù)，云數(shù)據(jù)庫(kù)技術(shù)就是一個(gè)簡(jiǎn)化的無(wú)需自建數(shù)據(jù)庫(kù)，一個(gè)不止可在小程序前端操作，還能通過(guò)云函數(shù)去讀寫(xiě)的JSON數(shù)據(jù)庫(kù)(相當(dāng)于一個(gè)簡(jiǎn)易的MySQL數(shù)據(jù)庫(kù))。該設(shè)計(jì)中需要兩個(gè)基本數(shù)據(jù)表，一個(gè)記錄登錄時(shí)的用戶(hù)信息，一個(gè)用于記錄用戶(hù)收藏的公交車(chē)路線信息。數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)根據(jù)將E-R圖轉(zhuǎn)換為數(shù)據(jù)庫(kù)的規(guī)則，將E-R圖實(shí)體和實(shí)體間的聯(lián)系轉(zhuǎn)換為關(guān)系模式，并明確關(guān)系模式中的相應(yīng)屬性。在實(shí)體中的屬性和關(guān)系模式中的屬性一一對(duì)應(yīng)，實(shí)體中與關(guān)系中的碼也是一一對(duì)應(yīng)。該小程序最后的數(shù)據(jù)模型以數(shù)據(jù)表的形式展現(xiàn)，具體說(shuō)明了數(shù)據(jù)表中屬性名稱(chēng)、主鍵、含義、約束條件，是否為空等信息，小程序中主要的數(shù)據(jù)庫(kù)表設(shè)計(jì)詳細(xì)如下：用戶(hù)信息user_id基本數(shù)據(jù)表，如表5-1。表5-1用戶(hù)信息表字段名類(lèi)型大小是否為空字段描述Idstring11否idnickNamestring20否用戶(hù)名avatarUrlstring50是頭像地址genderint3否性別openidstring20否微信idis_adminint5否是否為管理員（1是2不是）signTimeint10否注冊(cè)時(shí)間列表信息bus_list基本數(shù)據(jù)表，如表5-2.表5-2公交車(chē)信息基本表字段名類(lèi)型大小是否為空字段描述transitnostring11否車(chē)次號(hào)startstationstring20否首發(fā)站endstationstring50否終點(diǎn)站starttimestring3否首班車(chē)時(shí)間endtimestring20否末班車(chē)時(shí)間list_length string30是公交車(chē)路線站臺(tái)數(shù)總結(jié)和展望總結(jié)在此次小程序設(shè)計(jì)中，我以“車(chē)來(lái)了”小程序作為了我設(shè)計(jì)的一份靈感，在微信小程序開(kāi)發(fā)軟件的學(xué)習(xí)和使用過(guò)程中我逐漸學(xué)習(xí)制作一個(gè)屬于個(gè)人小程序的過(guò)程。我學(xué)習(xí)并設(shè)計(jì)了“知公交”微信小程序，以查詢(xún)公交路線信息的主要功能搭配上實(shí)時(shí)天氣等附加功能提升了“知公交”小程序給人們帶來(lái)的便利程度。在如今公交車(chē)已經(jīng)成為人們短途出行選擇的一種交通方式，查詢(xún)公交車(chē)小程序的出現(xiàn)給人們帶來(lái)了生活中的各種便利，我在進(jìn)行設(shè)計(jì)前通過(guò)對(duì)“車(chē)來(lái)了”小程序的使用，發(fā)現(xiàn)除了查詢(xún)公交路線的主要功能外，也能在附加功能中給人們提供生活的便利之處?！爸弧毙〕绦蜥槍?duì)經(jīng)常需要乘坐公交車(chē)的用戶(hù)，為這些用戶(hù)設(shè)計(jì)并實(shí)現(xiàn)了一款集地圖、公交路線、實(shí)時(shí)天氣三大功能為一體的微信小程序。在完成論文的過(guò)程中，我明白了需求分析和全局性規(guī)劃開(kāi)發(fā)的重要性。在進(jìn)行開(kāi)發(fā)工作之前，對(duì)于一個(gè)項(xiàng)目而言，一定要進(jìn)行經(jīng)濟(jì)、技術(shù)、政策以及市場(chǎng)的可行性分析和小程序或系統(tǒng)的功能分析等需求分析，根據(jù)業(yè)務(wù)需求和對(duì)象定義代碼的業(yè)務(wù)邏輯，并對(duì)多個(gè)模塊的功能實(shí)現(xiàn)進(jìn)行全局性的控制，減少重復(fù)和低效的編程工作。此外，數(shù)據(jù)庫(kù)的概念設(shè)計(jì)和邏輯設(shè)計(jì)對(duì)于項(xiàng)目的開(kāi)發(fā)也很重要，服務(wù)器和客戶(hù)端的功能實(shí)現(xiàn)都需要數(shù)據(jù)庫(kù)的支持。在這次小程序設(shè)計(jì)的過(guò)程中，遇到了不少的麻煩，其中大部分都是由于自己在開(kāi)發(fā)過(guò)程不注意細(xì)節(jié)，以為調(diào)用的方法拼寫(xiě)出了一點(diǎn)問(wèn)題，白白浪費(fèi)一大段時(shí)間去解決一個(gè)小小的問(wèn)題。在設(shè)計(jì)中我通過(guò)觀看多個(gè)小程序設(shè)計(jì)的案例，學(xué)習(xí)設(shè)計(jì)的方法也從中學(xué)到了許多新的知識(shí)。展望在這次的設(shè)計(jì)中，小程序的整體和功能還有進(jìn)步的空間：由于技術(shù)和時(shí)間關(guān)系，沒(méi)法將查詢(xún)公交車(chē)信息更進(jìn)一步實(shí)現(xiàn)實(shí)時(shí)公交查詢(xún)小程序還可以再增加一些附加功能：如到站提醒功能在路線信息還可以增加分享功能。結(jié)論城市公交運(yùn)輸是城市基礎(chǔ)設(shè)施的重要部分之一，在經(jīng)濟(jì)發(fā)展、城市建設(shè)和社會(huì)生活等領(lǐng)域中占有一定的比重，亦有著非凡的地位,它不僅僅關(guān)系著城市的經(jīng)濟(jì)發(fā)展與居民生活，也對(duì)城市經(jīng)濟(jì)具有許多有利的影響。優(yōu)先發(fā)展公共交通運(yùn)輸,是建設(shè)資源節(jié)約型、環(huán)境友好型社會(huì)和實(shí)現(xiàn)可持續(xù)發(fā)展的重要途徑，也是解決關(guān)系人民群眾切身利益的現(xiàn)實(shí)問(wèn)題的一種手段。在設(shè)計(jì)和開(kāi)發(fā)“知公交”小程序的過(guò)程中，我明確使用者是經(jīng)常乘坐公交車(chē)出行的用戶(hù)，明確使用者最基本的需求——查詢(xún)公交車(chē)的路線信息，在附加功能的設(shè)計(jì)上我考慮了和人們生活息息相關(guān)的天氣信息。在剛開(kāi)始學(xué)習(xí)小程序的結(jié)構(gòu)時(shí)，發(fā)現(xiàn)微信小程序開(kāi)發(fā)者工具是將之前學(xué)過(guò)的eclips、HTML、CSS、JavaScript等等多個(gè)知識(shí)結(jié)合于一身。在學(xué)習(xí)設(shè)計(jì)頁(yè)面布局的時(shí)候，通過(guò)在bilibili視頻網(wǎng)站上學(xué)習(xí)了一種設(shè)計(jì)頁(yè)面布局的好方法或者說(shuō)是一種好習(xí)慣，在設(shè)計(jì)前通過(guò)畫(huà)圖工具將布局的層次，樣式先設(shè)計(jì)完成然后再開(kāi)始進(jìn)行頁(yè)面的設(shè)計(jì)就會(huì)加快我們?cè)谠O(shè)計(jì)頁(yè)面所花的時(shí)間。在學(xué)習(xí)設(shè)計(jì)開(kāi)發(fā)小程序的邏輯部分時(shí)，在學(xué)習(xí)視頻中發(fā)現(xiàn)老師都會(huì)去使用微信小程序開(kāi)發(fā)者工具自帶的開(kāi)發(fā)者文檔，開(kāi)發(fā)者文檔就相當(dāng)與和開(kāi)發(fā)者工具配套使用的說(shuō)明書(shū)一樣，用著對(duì)各個(gè)部件的講解，也有一些實(shí)際案例去幫助開(kāi)發(fā)者更加的了解小程序開(kāi)發(fā)過(guò)程中的各種功能、組件和框架等。當(dāng)我看到有意思的功能我就會(huì)思考能否將其運(yùn)用到“知公交”小程序中去。在學(xué)習(xí)小程序開(kāi)發(fā)的過(guò)程中我對(duì)API接口的知識(shí)和技術(shù)產(chǎn)生了濃厚的興趣。在學(xué)習(xí)設(shè)計(jì)小程序的過(guò)程中我發(fā)現(xiàn)我自身也存在著許多不足之處，我在小程序編寫(xiě)過(guò)程中存在著一些不好的習(xí)慣，比如我在搬運(yùn)方法的命名代碼時(shí)有時(shí)為了追求