本科畢業(yè)設(shè)計(jì)（論文）題目:基于微信小程序的在線教育分銷系統(tǒng)

摘要目前，科學(xué)信息技術(shù)極速發(fā)展，移動(dòng)互聯(lián)網(wǎng)終端軟件事業(yè)隨之變得更為智能化和便利，效率更高。從當(dāng)今世界全球化國(guó)家信息化發(fā)展速度來(lái)看，從線下課堂發(fā)展到在線教育，是教育行業(yè)發(fā)展的必然趨勢(shì)。隨著智能手機(jī)的應(yīng)用和推廣，2017年1月9日微信小程序的出現(xiàn)，開啟了網(wǎng)絡(luò)教育的新起點(diǎn)。學(xué)者不僅可以享受在線教育的便利，而且具有快速方便的特點(diǎn)，可以隨時(shí)隨地打開手機(jī)進(jìn)行學(xué)習(xí)。因此,有必要開始構(gòu)建一個(gè)基于微信小程序的在線教育分銷系統(tǒng)。本文著重分析了該在線教育系統(tǒng)的研究背景、設(shè)計(jì)流程、開發(fā)方法以及關(guān)鍵技術(shù)。此系統(tǒng)基于HBuilderX平臺(tái)，運(yùn)用了Bmob后臺(tái)數(shù)據(jù)服務(wù)，并使用uni框架中的vue語(yǔ)法與小程序標(biāo)簽和API來(lái)設(shè)計(jì)前端頁(yè)面并完成交互，運(yùn)用Javascript、css、html語(yǔ)言作為主要編寫語(yǔ)言來(lái)進(jìn)行程序開發(fā)，以完成頁(yè)面中需要實(shí)現(xiàn)的效果。完成了一款包括課程信息顯示模塊，音頻、視頻雙模式，收藏課程，樣片試看，在線訂購(gòu)等功能以及留言板模塊和咨詢、評(píng)價(jià)管理模塊等功能的基于微信小程序的在線教育分銷系統(tǒng)。將微信小程序與在線教育相結(jié)合,能夠改善傳統(tǒng)的線下教學(xué)方式，用戶可以通過網(wǎng)絡(luò)獲取學(xué)習(xí)資源，增長(zhǎng)知識(shí)，提高學(xué)習(xí)效率，有效利用閑余碎片時(shí)間，也讓用戶少花錢和時(shí)間，無(wú)需集中授課、抽調(diào)時(shí)間，也不會(huì)像線下授課感到拘束和無(wú)趣，使在線教育有了一個(gè)廣闊的發(fā)展未來(lái)。關(guān)鍵詞：微信小程序；在線教育；uni框架；視音頻雙模式；

ABSTRACTAtpresent,withtherapiddevelopmentofscienceandinformationtechnology,themobileinternetterminalsoftwareindustryhasbecomemoreefficient,intelligentandconvenient.Fromtheperspectiveofthedevelopmentspeedofinformationtechnologyintoday'sglobalizedcountries,fromoff-lineclassroomtoonlineeducationistheinevitabletrendofeducationdevelopment.Withtheapplicationandpromotionofsmartphones,onJanuary9,2017,theemergenceofWechatappletusheredinanewstartingpointforonlineeducation.Scholarscannotonlyenjoyonlineeducationthroughitsconvenience,butalsohavethecharacteristicsoffastandconvenientWechatapplet,whichcanalsoopenmobilephonestolearnatanytimeandanywhere.Therefore,itisnecessarytostartbuildinganonlineeducationaldistributionsystembasedonWechatapplet.Thispaperfocusesontheanalysisoftheresearchbackground,designprocess,developmentmethodsandkeytechnologiesoftheonlineeducationsystem.ThissystemisbasedonHBuilderXplatform,usesBmobbackgrounddataservice,VuegrammarinuniframeworkandwechatlabelandAPItodesignfront-endpagesandcompleteinteraction,andusesJavascript,CSSandHTMLasthemainprogramminglanguagestodevelopprogramstoachievethedesiredresultsinthepages.AnonlineeducationaldistributionsystembasedonWechatapplethasbeencompleted.Includingcourseinformationdisplaymodule,audioandvideodualmode,collectioncourse,sampletest,onlineorderingandotherfunctions,aswellasmessageboardmoduleandconsultation,evaluationmanagementmodule.ThecombinationofWechatsmallprogramandonlineeducationcanimprovethetraditionalofflineteachingmethod.Throughthenetwork,userscanacquirelearningresources,increaseknowledge,improvelearningefficiency,effectivelyusesparedebristime,andalsomakeusersspendlessmoney,withoutcentralizedteaching,timeallocation,andfeelconstrainedanduninterestinglikeofflineteaching.Broaddevelopmentfuture.Keywords:Wechatapplet;onlineeducation;uniframework;videoandAudioDualmode;

目錄摘要Abstract第1章 緒論 11.1研究背景及意義 11.2國(guó)內(nèi)外研究現(xiàn)狀 11.2.1國(guó)內(nèi)外微信小程序研究現(xiàn)狀 11.2.2國(guó)內(nèi)外在線教育系統(tǒng)研究現(xiàn)狀 21.3本課題主要內(nèi)容以及實(shí)現(xiàn)功能 51.4本章小結(jié) 8第2章 相關(guān)運(yùn)用知識(shí)介紹 92.1HbuilderX介紹 92.2uni-app框架介紹 92.3其他相關(guān)開發(fā)工具介紹 102.4本章小結(jié) 11第3章 系統(tǒng)分析及設(shè)計(jì) 123.1 可行性分析 123.1.1技術(shù)可行性 123.1.2經(jīng)濟(jì)可行性 123.1.3操作可行性 123.2系統(tǒng)結(jié)構(gòu)設(shè)計(jì) 133.3系統(tǒng)分層結(jié)構(gòu) 143.4系統(tǒng)功能劃分 203.5文件結(jié)構(gòu)圖 223.6本章小結(jié) 26第4章 系統(tǒng)實(shí)現(xiàn) 274.1系統(tǒng)功能實(shí)現(xiàn) 274.1.1界面基本框架 274.1.2開始界面 284.1.3發(fā)現(xiàn)與課程選擇界面 294.1.4課程播放界面 304.1.5我的界面 334.1.6視頻、圖片獲取與項(xiàng)目配置 354.2系統(tǒng)展示 364.2.1微信第三方工具授權(quán)登陸界面： 374.2.2首頁(yè)課程發(fā)現(xiàn)部分 374.2.3課程播放頁(yè)面部分 384.2.4預(yù)約購(gòu)買模塊 394.2.5收藏模塊 404.2.6發(fā)表評(píng)價(jià)模塊 414.2.7查看評(píng)價(jià)模塊 424.3本章小結(jié) 43第5章 總結(jié)及展望 445.1總結(jié) 445.2展望 44參考文獻(xiàn) 46

緒論1.1研究背景及意義目前，隨著科技的發(fā)展迅速，智能化手機(jī)系統(tǒng)也迅速普及開來(lái)，移動(dòng)互聯(lián)網(wǎng)事業(yè)變得便捷，效率更高。智能手機(jī)的進(jìn)步使得各種各樣的移動(dòng)應(yīng)用功能也不斷發(fā)展更新，形式包括應(yīng)用程序、WebPC等各種平臺(tái)。移動(dòng)互聯(lián)網(wǎng)的發(fā)展也給教育行業(yè)帶來(lái)了新的機(jī)遇。教育模式的改革使網(wǎng)絡(luò)教育應(yīng)運(yùn)而生。作為“互聯(lián)網(wǎng)+”時(shí)代的產(chǎn)物，網(wǎng)絡(luò)教育正在成為一種新興的學(xué)習(xí)模式，不斷改變著與教育相關(guān)的行業(yè)的經(jīng)營(yíng)模式和利潤(rùn)模式[1]?，F(xiàn)如今，無(wú)論是學(xué)生還是職場(chǎng)人或各種群體，隨著科技的發(fā)展，對(duì)于知識(shí)的渴求越來(lái)越豐富，教育市場(chǎng)火爆，造成了龐大的需求市場(chǎng)局面。線下教育市場(chǎng)的發(fā)展過程中產(chǎn)生了較多問題，例如，學(xué)生多、管理困難、流失率高、課程不統(tǒng)一等。在線教育的一個(gè)嶄新的發(fā)展方向，是由于微信用戶的增長(zhǎng)、微信應(yīng)用的普及，2017年小程序的出現(xiàn)與發(fā)展是一種新的教育應(yīng)用的思維變革。將會(huì)對(duì)互聯(lián)網(wǎng)行業(yè)帶來(lái)怎樣的影響，未來(lái)的小程序?qū)逃袠I(yè)可以帶來(lái)哪些便利都是我們應(yīng)該深入探知的問題。基于此，本文概述了微信小程序與在線教育的關(guān)系，分析了教育行業(yè)的現(xiàn)有不足和微信小程序可以給教育行業(yè)帶來(lái)的哪些驅(qū)動(dòng)與便利因素、契合之處以及其產(chǎn)品的功能與特點(diǎn)，提出了給予微信小程序的在線教育系統(tǒng)的開發(fā)內(nèi)容。1.2國(guó)內(nèi)外研究現(xiàn)狀1.2.1國(guó)內(nèi)外微信小程序研究現(xiàn)狀微信是一個(gè)廣為人知的即時(shí)通訊程序，可以連接人們、人與服務(wù)之間的關(guān)系。微信小程序是我國(guó)首次基于微信平臺(tái)，采用dcloud流模式開發(fā)的應(yīng)用程序。為了實(shí)現(xiàn)更方便實(shí)用的多功能，微信正式發(fā)布了微信開發(fā)者工具。用于完成微信小程序的測(cè)試、開發(fā)和上線接口功能[2]。基于此技術(shù)進(jìn)行開發(fā)互聯(lián)網(wǎng)+教育課程平臺(tái)的技術(shù)與資料，在公開文獻(xiàn)與開源代碼中也并不多見。此技術(shù)的開發(fā)屬于國(guó)內(nèi)領(lǐng)先技術(shù)水平，其主要優(yōu)點(diǎn)如下：(1)程序簡(jiǎn)化、優(yōu)化體驗(yàn)(2)開發(fā)成本降低、門檻低(3)微信的海量用戶基礎(chǔ)、易推廣(4)輕量,易傳播小程序的開發(fā)成本較低，開發(fā)者們可以將更多精力等放在做好產(chǎn)品上。相較于APP程序，微信小程序利用微信平臺(tái)進(jìn)行推廣運(yùn)營(yíng)也更容易，更簡(jiǎn)單。而對(duì)于用戶，微信小程序的UI界面和使用方式也會(huì)更統(tǒng)一、方便?，F(xiàn)在由于智能手機(jī)的普遍流行，國(guó)人都在使用微信，小程序也就同時(shí)具有很大的用戶粘性，與微信捆綁使用?？梢钥闯?，微信小程序的發(fā)展前景廣闊，但由于小程序開發(fā)上線無(wú)門檻，使得小程序數(shù)量增多，慢慢會(huì)出現(xiàn)程序多而雜的情況，此時(shí)，只有一個(gè)好的有用的小程序才會(huì)有廣闊的前景。由于小程序于2017年上市，且僅適用于微信程序內(nèi)部，故國(guó)外研究現(xiàn)狀暫時(shí)比較少，但相信微信小程序的簡(jiǎn)便性和與微信的捆綁性，隨著時(shí)間推移，針對(duì)微信小程序的國(guó)外研究也將會(huì)越來(lái)越多。1.2.2國(guó)內(nèi)外在線教育系統(tǒng)研究現(xiàn)狀在如今社會(huì)的大數(shù)據(jù)背景下，網(wǎng)絡(luò)教育的普及是教育產(chǎn)業(yè)在互聯(lián)網(wǎng)發(fā)展中不斷變化的目標(biāo)。隨著教育資源的大量共享，越來(lái)越多的人參與、組織、促進(jìn)在線教育行業(yè)的發(fā)展，競(jìng)爭(zhēng)也愈發(fā)激烈，但用戶的在線教育投入雖然是呈上升趨勢(shì)，不過發(fā)展速度卻是越來(lái)越慢，投入有限，趨于飽和?，F(xiàn)有的移動(dòng)互聯(lián)網(wǎng)終端教育平臺(tái)，大部分是基于網(wǎng)頁(yè)以及原生App應(yīng)用終端的在線教育軟件[3]。前者擁有大量的客戶群體，但是查詢使用并不方便。如下圖1-1所示。圖1-1某網(wǎng)頁(yè)版教育系統(tǒng)而后者在使用時(shí)則需要下載、安裝、注冊(cè)、登錄、卸載等各項(xiàng)繁雜工作，同時(shí)也會(huì)有信息泄露的風(fēng)險(xiǎn)如下圖1-2所示。圖1-2某網(wǎng)頁(yè)版教育系統(tǒng)隨著智能手機(jī)的普及，微信逐漸成為人手一款的互聯(lián)網(wǎng)軟件，擁有了很大的互聯(lián)網(wǎng)推銷市場(chǎng)?；谖⑿湃哼M(jìn)行的在線課堂，擁有大量潛在客戶，用戶一傳十十傳百，可以在朋友圈、公眾號(hào)的推廣下快速組成使用群體，有顯著的優(yōu)勢(shì)。但是由于微信群應(yīng)用的開發(fā)初衷是方便用戶直接進(jìn)行日常聊天、交流，利用微信群開展在線課堂仍舊存在很多問題，例如發(fā)布的信息內(nèi)容不連貫性、檢索困難、逐條翻閱、課程信息夾雜很多人的聊天記錄等。而在App平臺(tái)上推行的教育應(yīng)用在使用時(shí)，需要用戶進(jìn)行下載安裝注冊(cè)登錄；不使用時(shí)，則需要把它卸載；而在不經(jīng)常使用的情況下會(huì)占據(jù)手機(jī)內(nèi)存，這就使用戶會(huì)出現(xiàn)不方便、干擾等，甚至?xí)p害用戶利用其進(jìn)行學(xué)習(xí)的目的將其刪除卸載。相比之下，微信小程序占用內(nèi)存少、簡(jiǎn)潔，滿足用戶需求，提升用戶體驗(yàn)感受等優(yōu)點(diǎn)[3]。上述兩種開發(fā)平臺(tái)在針對(duì)教育開展上都具有先天的缺陷，而微信小程序必定是在線教育的一個(gè)更好的發(fā)展思路，求學(xué)者使用小程序?qū)W習(xí)既可以享受到在線教育的方便、迅捷性，也可以自行選擇課程，參加各種線上活動(dòng)，得到自身更想要的知識(shí)與教學(xué)活動(dòng)。同時(shí)，教育機(jī)構(gòu)在線上發(fā)布同體系的課程，實(shí)現(xiàn)了成員的發(fā)展需求統(tǒng)一管理，實(shí)際實(shí)施則由求學(xué)者自行決定，當(dāng)用戶時(shí)間有限，需要偶爾學(xué)習(xí)，無(wú)需下載安裝app的應(yīng)用在使用上更勝一籌，順利實(shí)現(xiàn)了求學(xué)者與教育機(jī)構(gòu)共贏的局面。同時(shí)，由于用戶使用小程序時(shí)，僅需使用微信登陸授權(quán)，微信內(nèi)部平臺(tái)的信息授權(quán)基本不用擔(dān)心信息泄露風(fēng)險(xiǎn)也是微信小程序的另一大主要優(yōu)點(diǎn)。微信小程序平臺(tái)上的在線教育類似系統(tǒng)如下圖1-3所示。圖1-3某小程序版教育系統(tǒng)綜上所述,微信小程序在在線教育中主要對(duì)需求直接、使用頻率少、隨時(shí)隨地都可以學(xué)習(xí)的求學(xué)者發(fā)揮重要作用[4]。將微信小程序與在線教育相結(jié)合,能夠改善以前傳統(tǒng)的線下教學(xué)方式，通過網(wǎng)絡(luò)，用戶獲取學(xué)習(xí)資源，增長(zhǎng)知識(shí)，提高學(xué)習(xí)效率，有效利用閑余碎片時(shí)間，也讓用戶少花錢和時(shí)間，無(wú)需集中授課、抽調(diào)時(shí)間，它不像線下教學(xué)那樣擁擠或無(wú)聊，使在線教育有了一個(gè)廣闊的發(fā)展未來(lái)。1.3本課題主要內(nèi)容以及實(shí)現(xiàn)功能該系統(tǒng)力求完成在線教育系統(tǒng)的微信小程序版本開發(fā)，只要編寫前端代碼，目標(biāo)使用者為求學(xué)者，使用目標(biāo)為在線進(jìn)行觀看課程、添加收藏課程，完成對(duì)想學(xué)習(xí)的課程的托管與獲取。本小程序的制作秉持實(shí)用性的原則，目的是以學(xué)生課程學(xué)習(xí)的需要為前提，做出主要用戶為學(xué)生的提供各種簡(jiǎn)便服務(wù)的在線教育程序。此小程序的需求包括：視頻讀取：視頻是網(wǎng)絡(luò)教育系統(tǒng)的主要教學(xué)方式。視頻鏈接信息存儲(chǔ)在云后臺(tái)數(shù)據(jù)中，輸入后可以直接播放。課程信息：作為一個(gè)教育類小程序，課程的信息非常重要，用戶看到的課程信息需與其想要學(xué)習(xí)的課程內(nèi)容一致。個(gè)人登錄：用戶在此頁(yè)面點(diǎn)擊授權(quán)登錄，系統(tǒng)后臺(tái)獲取到用戶的信息，此信息利用uni.getUserInfo獲取，由于小程序依托微信，所以個(gè)人信息只可在微信中修改。個(gè)人收藏：用戶觀看課程后想要更方便的找到課程，可點(diǎn)擊課程并進(jìn)行收藏，隨即在“我的收藏”中找到已收藏的課程。個(gè)人訂購(gòu)：購(gòu)買的課程信息在此處依次顯示，點(diǎn)擊課程可以跳轉(zhuǎn)到發(fā)布評(píng)價(jià)頁(yè)面。發(fā)布評(píng)價(jià)：作為一個(gè)教育系統(tǒng)，課程的好壞應(yīng)由學(xué)生評(píng)價(jià)，學(xué)生可在“發(fā)表評(píng)價(jià)”點(diǎn)擊相應(yīng)的課程進(jìn)行評(píng)價(jià)，發(fā)表評(píng)價(jià)后即可在我的評(píng)價(jià)中找到。咨詢留言：用戶觀看課程時(shí)，在課程下方有咨詢按鈕，可點(diǎn)擊進(jìn)去進(jìn)行咨詢與留言。數(shù)據(jù)庫(kù)的設(shè)計(jì)：保存課程信息的簡(jiǎn)單數(shù)據(jù)庫(kù)的制作。主要開發(fā)思路為：1. 使用HbuilderX應(yīng)用程序編寫頁(yè)面基礎(chǔ)代碼，用到CSS樣式、uni-app框架等。2. 利用vue前端框架編寫頁(yè)面基本視圖層，利用css樣式編寫詳細(xì)代碼，實(shí)現(xiàn)頁(yè)面邏輯，添加組件，在組件上綁定數(shù)據(jù)和事件處理函數(shù)。3. 編寫邏輯層，調(diào)用各API接口，調(diào)用函數(shù)，實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)、播放視頻、訂購(gòu)收藏、評(píng)價(jià)留言等功能。4. 創(chuàng)建Bmob賬號(hào)，在bmob云后臺(tái)放置前端需使用的課程視頻。5. 實(shí)現(xiàn)后臺(tái)和前端的交互，獲取課程視頻，得到初步demo6. 利用微信web開發(fā)者工具調(diào)試程序，完善基礎(chǔ)功能，優(yōu)化各項(xiàng)功能之間的邏輯小程序開發(fā)過程中很可能碰到的問題有小程序的在線支付功能只可通過認(rèn)證的商戶使用，在實(shí)際開發(fā)中，在線支付沒有開通，使用的是按鍵點(diǎn)擊進(jìn)行功能實(shí)現(xiàn)。小程序的發(fā)布、上線存在一定的限制，例如注冊(cè)的小程序Appid與文件內(nèi)接口信息不匹配等，不過這些后續(xù)問題可在實(shí)際開發(fā)中找到方法解決。圖1-4我的小程序配置好后的詳情信息1.4本章小結(jié)本章主要闡述了微信小程序以及在線教育系統(tǒng)如今在國(guó)內(nèi)外的研究發(fā)展?fàn)顩r，并且簡(jiǎn)述了本選題（即基于微信小程序的在線教育分銷系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)）的選題意義和選題意圖。并且以實(shí)際例子簡(jiǎn)要分析了在線教育的主要幾種開展模式。以及將研究過程中可能需要解決的技術(shù)難點(diǎn)和碰到的問題進(jìn)行歸納總結(jié)，然后將整個(gè)教育系統(tǒng)的制作流程基本的所有需求都統(tǒng)合起來(lái)，以求讓開發(fā)具有方向性和簡(jiǎn)單概括開發(fā)之后的成果和實(shí)現(xiàn)的功能。

相關(guān)運(yùn)用知識(shí)介紹HbuilderX介紹圖2-1HuilderXHbuilderX是一款支持HTML5的Web開發(fā)IDE，是支持uni-app、小程序開發(fā)、快應(yīng)用開發(fā)的網(wǎng)頁(yè)開發(fā)工具（以下簡(jiǎn)稱HX），其對(duì)于錯(cuò)誤語(yǔ)法的提示很明顯，利用修改字體的顏色進(jìn)行提醒，大大降低了錯(cuò)誤代碼的修改率。HX的特點(diǎn)：1.HX文件打開速度，性能強(qiáng)，代碼提示快速、流暢。2.HX的代碼輸入時(shí)，具有聯(lián)想選擇功能，VUE、ES6語(yǔ)法提示支持更強(qiáng)大，是一個(gè)更強(qiáng)的VUE提示工具。3.HX的內(nèi)置終端提供了強(qiáng)有力的支持給現(xiàn)代編譯語(yǔ)言的發(fā)展。4.HX支持uni-app、小程序開發(fā)5.HX具有智能的雙擊，更完整的多光標(biāo)處理，可以為極客提供更有效的操作[5]。2.2uni-app框架介紹圖2-2uni-app官方組件能力微信小程序的平臺(tái)功能及組件技術(shù)不斷更新發(fā)展，支付寶、百度等大公司軟件陣營(yíng)也逐步推出基于自己平臺(tái)的小程序的不同的開發(fā)文檔規(guī)范，前端開發(fā)者可能還要學(xué)習(xí)編寫基于其他各應(yīng)用平臺(tái)的不同類別小程序的適配開發(fā)代碼，若無(wú)固定的框架模板例如uni-app來(lái)解決跨端兼容，開發(fā)者們工作量會(huì)不斷增加，學(xué)習(xí)成本也會(huì)逐漸提高。uni-app使用Vue.js腳本進(jìn)行開發(fā)，是跨多個(gè)平臺(tái)的前端框架開發(fā)語(yǔ)言[6]。利用這套語(yǔ)言，開發(fā)者只需要編寫一份代碼，稍微改編應(yīng)用配置后，即可編譯到其他多個(gè)平臺(tái)。在跨平臺(tái)擴(kuò)展能力、成本節(jié)省等關(guān)鍵指標(biāo)上有很強(qiáng)的優(yōu)勢(shì)。Uni-app中無(wú)特殊情況下，API接口都接受一個(gè)OBJECT作為參數(shù)[7]。但由于其借鑒了MPVUE的實(shí)現(xiàn)，與標(biāo)準(zhǔn)vue語(yǔ)法相比存在一些限制。2.3其他相關(guān)開發(fā)工具介紹微信開發(fā)者工具為了可以適配小程序，微信官方推出了在微信原有的公眾號(hào)調(diào)試工具的基礎(chǔ)上內(nèi)置了編程、調(diào)試、開發(fā)環(huán)境、發(fā)布于一身的開發(fā)工具--微信開發(fā)者工具。微信開發(fā)者工擁有三大模塊：模擬器、編輯器、調(diào)試器，每個(gè)模塊作用都不相同。調(diào)試器的功能類似瀏覽器里頁(yè)面的審查元素，我們?cè)谠卣{(diào)式框里修改屬性，可以查看到頁(yè)面相關(guān)屬性的變化，找到相關(guān)的頁(yè)面樣式文件。使用開發(fā)者工具實(shí)現(xiàn)程序配置、測(cè)試，開發(fā)者可以完成小程序的API調(diào)用、頁(yè)面開發(fā)、代碼編輯、修改發(fā)布、小程序預(yù)覽和上線等功能[6]。bmob數(shù)據(jù)庫(kù)bmob數(shù)據(jù)庫(kù)是一個(gè)云后臺(tái)數(shù)據(jù)庫(kù)，本次開發(fā)主要重點(diǎn)在前端，故后臺(tái)使用的是當(dāng)下最簡(jiǎn)便迅速的后臺(tái)—云后臺(tái)，減少出現(xiàn)諸如下載、安裝、配置、適用性等諸多麻煩的問題。由于微信小程序接口的限制，其調(diào)用數(shù)據(jù)庫(kù)時(shí)強(qiáng)制要求https鏈接，并且所有需要聯(lián)網(wǎng)的服務(wù)器域名都要配置到微信的白名單中，通過后臺(tái)云函數(shù)進(jìn)行app數(shù)據(jù)交互是一個(gè)對(duì)于移動(dòng)端開發(fā)者獲取、更新數(shù)據(jù)的相對(duì)更便利的方式。2.4本章小結(jié)本章重要介紹了本畢業(yè)設(shè)計(jì)涉及的相關(guān)開發(fā)工具以及運(yùn)行平臺(tái)的基本信息。包括該項(xiàng)目基于的HuilderX開發(fā)環(huán)境，微信API工具包，前端搭建uni-app框架，bmob數(shù)據(jù)庫(kù)，。解釋并說明了在HbuiderX中uni-app的使用方法與優(yōu)缺點(diǎn)，并且介紹了vue框架的一些相關(guān)知識(shí)。本章所提到的平臺(tái)、工具以及相關(guān)知識(shí)的解釋說明，對(duì)于接下來(lái)使用HbuilderX工具進(jìn)行程序界面開發(fā)具有非常重要的作用。

系統(tǒng)分析及設(shè)計(jì)可行性分析3.1.1技術(shù)可行性網(wǎng)絡(luò)教育的主要模式是視頻學(xué)習(xí)，即通過視頻和音頻向?qū)W者提供在線開放課程。通過在微信上開通微信小工具程序，學(xué)員可以直接訂閱、收集、觀看和學(xué)習(xí)視頻開放課程。對(duì)于不同版本的移動(dòng)終端型號(hào)，微信小部件程序無(wú)需下載即可廣泛應(yīng)用。所以它具有很強(qiáng)的兼容性。企業(yè)向前端用戶發(fā)布視頻，但用戶不能發(fā)布視頻。微信小程序可在微信公共后臺(tái)應(yīng)用后自主開發(fā)研究，微信后臺(tái)審核后上傳互聯(lián)網(wǎng)。微信小程序的技術(shù)開發(fā)解決文檔在騰訊云后端被提供，為開發(fā)人員提供了全新的前端頁(yè)面組件和各適配功能接口API技術(shù)，只需開發(fā)人員申請(qǐng)、購(gòu)買即可獲取在小程序開發(fā)中使用[8]。在線模式的食品和音頻等只需要使用其多媒體組件—Audio、Video等與數(shù)據(jù)庫(kù)之間的交互即可實(shí)現(xiàn)。綜上，從微信小程序開發(fā)及教育模式角度出發(fā)，并沒有什么沖突的部分。HbuilderX是具有輕量編輯器與強(qiáng)大IDE結(jié)合物的一款極客工具，。具有豐富的語(yǔ)法提示，能夠最大程度地提高開發(fā)效率，適配原生APP和小程序，可以進(jìn)行組件化開發(fā)和數(shù)據(jù)綁定，官方UI組件用的微信UI組件[9]。3.1.2經(jīng)濟(jì)可行性PC端的開發(fā)調(diào)試與運(yùn)行并不需要諸如高配IOS硬件（價(jià)格高昂的iphone,ipad）或者像VR開發(fā)一般需要其配套的昂貴的設(shè)備，而只需要一臺(tái)個(gè)人電腦及普通帶有微信程序的智能手機(jī)就可以了。微信小程序的后端騰訊云與bmob服務(wù)器的使用可能需要部分花費(fèi)，到程序制作完成總花費(fèi)不超過100元，所以經(jīng)濟(jì)上是可行的。3.1.3操作可行性本系統(tǒng)需要有聯(lián)網(wǎng)功能，由于測(cè)試需要，我將在本地搭建服務(wù)器來(lái)完成包括數(shù)據(jù)的轉(zhuǎn)存，交互等等功能，并不需要用到外部服務(wù)器的介入。本系統(tǒng)的實(shí)際操作部分UI均基于HbuilerX中的界面UI實(shí)現(xiàn)，而其基于微信開發(fā)UI，簡(jiǎn)潔明了。使用不會(huì)產(chǎn)生障礙。所以本系統(tǒng)應(yīng)該在實(shí)際操作過程中并不會(huì)出現(xiàn)操作困難。3.2系統(tǒng)結(jié)構(gòu)設(shè)計(jì)本系統(tǒng)采用了軟件開發(fā)中常見的集應(yīng)用層，邏輯層，數(shù)據(jù)交互層為一體的三層架構(gòu)。使用此明確的分層結(jié)構(gòu)，可使開發(fā)過程變得更加有條理，避免將系統(tǒng)各部分功能混淆，也便于系統(tǒng)的宏觀設(shè)計(jì)、開發(fā)過程中的需求改變以及后期的維護(hù)工作。在應(yīng)用層與邏輯層中間有一個(gè)隱層稱為系統(tǒng)層，方便開發(fā)者快速搭建起一個(gè)應(yīng)用[7]。圖3-1三層架構(gòu)應(yīng)用層：包含用戶可以直接進(jìn)行操作的UI小程序界面和一系列可以直接觀看課程，購(gòu)買收藏等操作，直觀體驗(yàn)到的程序前端界面。邏輯層：主要是界面之間的邏輯編寫，在所有頁(yè)面之間，不僅是頁(yè)面跳轉(zhuǎn)邏輯，還有頁(yè)面操作邏輯，數(shù)據(jù)存儲(chǔ)邏輯等，數(shù)據(jù)通過邏輯層顯示到應(yīng)用層，邏輯層進(jìn)行處理系統(tǒng)的主要功能和邏輯，并且這一層的代碼往往要做出符合數(shù)據(jù)交互規(guī)范的接口，與應(yīng)用層和數(shù)據(jù)層進(jìn)行交互[10]。數(shù)據(jù)層：標(biāo)準(zhǔn)的數(shù)據(jù)訪問層包含數(shù)據(jù)庫(kù)系統(tǒng)、本地文件夾中圖片的動(dòng)態(tài)訪問。小程序中體現(xiàn)在程序獲取本地?cái)?shù)據(jù)包中的圖片信息，數(shù)據(jù)庫(kù)表中課程視頻url信息。下圖3-2為本系統(tǒng)分析用例圖。圖3-2系統(tǒng)用例圖3.3系統(tǒng)分層結(jié)構(gòu)與類圖本系統(tǒng)主要分為以下幾個(gè)部分主頁(yè)面課程選擇模塊圖3-2主頁(yè)面類方法圖在此頁(yè)面中，主頁(yè)面的view_header類中，包含了頁(yè)面排列的三個(gè)主要類，包括圖片滑塊、手動(dòng)滑塊、課程垂直排列l(wèi)ist類，其中view_grop類中包含了text_item_top課程名字段，view_group_item課程跳轉(zhuǎn)字段、text_item_center課程介紹字段。圖3-3用戶登錄首頁(yè)順序圖課程內(nèi)容介紹模塊圖3-4課程內(nèi)容介紹類圖課程content類內(nèi)容介紹包括課程名name，老師名teacher_name，課程圖標(biāo)（編號(hào)）icon，課程連接后臺(tái)的bmob的視頻url，課程介紹信息playlist。課程視頻內(nèi)容模塊圖3-5課程播放頁(yè)面類圖課程播放核心功能頁(yè)面的主頁(yè)面page_body類主要分為五大類，播放視頻section類；課程信息介紹titel1、2、3、4類，分別對(duì)應(yīng)課程名、老師名、老師信息、課程信息；添加收藏add_click類，預(yù)約訂購(gòu)bindplay類；咨詢call_phone類。其中section中，包含了課程獲取視頻url信息的方法，add_click類包含了傳遞課程已收藏信息的方法，詳細(xì)在收藏模塊展開，預(yù)約訂購(gòu)?fù)詹胤椒愃?，咨詢類包含了?duì)話content與用戶id傳遞方法。圖3-6用戶課程播放模塊順序圖用戶收藏模塊圖3-7收藏模塊類圖收藏模塊主要類為car_group類，通過shoucangs.length>0判斷課程是否已被收藏，將已被收藏的課程傳遞到view_line_group類中，進(jìn)行課程排列顯示。同時(shí)點(diǎn)擊已收藏的課程可以傳遞到view_line_group類中的itemDefaultChange方法中，進(jìn)行課程跳轉(zhuǎn)播放，實(shí)現(xiàn)了播放記錄回看的功能。用戶訂購(gòu)模塊圖3-8預(yù)約模塊類圖在用戶訂購(gòu)模塊中，主要實(shí)現(xiàn)方法與上述收藏模塊類似，不同的是，點(diǎn)擊預(yù)約按鍵會(huì)跳轉(zhuǎn)到選擇日期title類中，確認(rèn)預(yù)約后，isfor字段會(huì)變成2，此時(shí)通過判斷語(yǔ)句可以獲取視頻的全部時(shí)長(zhǎng)信息，實(shí)現(xiàn)了課程試看與預(yù)約購(gòu)買的功能。圖3-9訂購(gòu)與收藏功能順序圖評(píng)價(jià)模塊圖3-10評(píng)價(jià)模塊類圖在發(fā)表評(píng)價(jià)頁(yè)面實(shí)現(xiàn)過程中，有四個(gè)主類，分別為feedback-body發(fā)布內(nèi)容類，feedback-uploader上傳圖片類，feedback-star-view評(píng)星類和feedback-submit評(píng)價(jià)提交類，在上傳圖片類中，有兩個(gè)主要方法是選擇圖片和圖片預(yù)覽，選擇圖片分為album和camera兩種方法。在評(píng)定星級(jí)方法中，選擇星級(jí)實(shí)現(xiàn)方法主要是使用點(diǎn)擊某顆星后將前面以及此星均上色為黃色的方法。圖3-11評(píng)價(jià)模塊類順序圖整體系統(tǒng)功能流程圖圖3-12用戶系統(tǒng)操作流程圖用戶在登錄授權(quán)后，可以看到兩個(gè)頁(yè)面，“首頁(yè)”與“我的”，分別是課程選擇頁(yè)面與個(gè)人中心，首頁(yè)中，選擇一個(gè)課程進(jìn)入后，可以看到五部分，課程視頻、課程介紹、收藏button，咨詢button，訂購(gòu)button。課程視頻初始值可以觀看5s，若點(diǎn)擊訂購(gòu)按鈕選擇確認(rèn)訂購(gòu)，則可以獲取完整視頻，點(diǎn)擊收藏按鈕，該課程信息可傳入個(gè)人收藏頁(yè)面中顯示，點(diǎn)擊咨詢頁(yè)面，可看到一個(gè)對(duì)話框，用戶可以在上面留言咨詢，在我的頁(yè)面中，除此之外還有一個(gè)發(fā)表評(píng)價(jià)的頁(yè)面，在此處可以對(duì)自己以觀看的課程進(jìn)行評(píng)價(jià)，評(píng)價(jià)后的課程信息傳遞到我的評(píng)價(jià)中。3.4系統(tǒng)功能劃分視頻讀?。阂曨l是在線教育系統(tǒng)授課的主要方式，視頻鏈接信息存儲(chǔ)于bmob云后臺(tái)中，進(jìn)入后可直接進(jìn)行播放。課程信息：作為一個(gè)教育類小程序，課程的信息非常重要，用戶看到的課程信息需與其想要學(xué)習(xí)的課程內(nèi)容一致，內(nèi)容包括教師信息、課程信息介紹、視頻url等。個(gè)人登錄：用戶登陸時(shí)點(diǎn)擊授權(quán)，小程序后臺(tái)即可獲取到用戶的微信號(hào)對(duì)應(yīng)的信息，此信息利用uni.getUserInfo獲取，只可在微信中修改個(gè)人信息。個(gè)人收藏：用戶觀看課程后想要更方便的找到課程，可點(diǎn)擊課程并進(jìn)行收藏，隨即在“我的收藏”中找到已收藏的課程。個(gè)人訂購(gòu)：預(yù)約訂購(gòu)的課程信息在此顯示，點(diǎn)擊訂購(gòu)的課程可以進(jìn)行發(fā)表評(píng)價(jià)發(fā)布評(píng)價(jià)+查看評(píng)價(jià)：作為一個(gè)教育系統(tǒng)，課程的好壞應(yīng)由學(xué)生評(píng)價(jià)，學(xué)生可在“發(fā)表評(píng)價(jià)”點(diǎn)擊相應(yīng)的課程進(jìn)行評(píng)價(jià)，發(fā)表評(píng)價(jià)后即可在我的評(píng)價(jià)中找到。咨詢留言：用戶觀看課程時(shí)，在課程下方有咨詢按鈕，可點(diǎn)擊進(jìn)去進(jìn)行咨詢與留言，本設(shè)計(jì)未包含前后端信息溝通模塊，故學(xué)生留言僅可以在本地查看。云后臺(tái)的設(shè)計(jì)：保存課程視頻的云后臺(tái)的制作。在開發(fā)過程中，微信小程序的接口不可以直接開放給后臺(tái)進(jìn)行數(shù)據(jù)操作，使用云后臺(tái)編寫一個(gè)web應(yīng)用程序，提供https接口調(diào)用，然后小程序發(fā)送接口請(qǐng)求后，服務(wù)器返回?cái)?shù)據(jù)，隨后小程序?qū)?shù)據(jù)轉(zhuǎn)換成json樣式才可以被讀取，這樣才算完成交互[11]。3.5文件結(jié)構(gòu)圖圖3-13項(xiàng)目主要文件結(jié)構(gòu)圖本開發(fā)程序大類總共5個(gè)文件夾，分別儲(chǔ)存頁(yè)面文件、uni樣式組件文件、本地資源文件、打包后的文件夾等；除此之外有幾個(gè)js與json文件用來(lái)進(jìn)行小程序配置信息的編寫。頁(yè)面信息結(jié)構(gòu)圖：圖3-14頁(yè)面文件結(jié)構(gòu)圖其中Admin：包括用戶授權(quán)后的賬號(hào)信息、頁(yè)面跳轉(zhuǎn)等信息Login-index：作為初始頁(yè)面，授權(quán)登錄按鈕，點(diǎn)擊授權(quán)后可跳轉(zhuǎn)到首頁(yè)頁(yè)面Index：主界面，課程廣告信息等Detail-car：課程播放頁(yè)面，實(shí)現(xiàn)分銷的主要板塊Wanzhang：課程播放頁(yè)面的底部模板頁(yè)面，包括預(yù)約、咨詢、收藏等buttonUser-teacher：教師信息模塊Feedback：給自己訂購(gòu)或以觀看的課程教師發(fā)表評(píng)價(jià)Im-chat：咨詢留言板塊，包含components里的兩個(gè)vue文件My_pingjia：查看評(píng)價(jià)頁(yè)面，在feedback中發(fā)表的評(píng)價(jià)在此處顯示My_shoucang：個(gè)人收藏頁(yè)面，在detail-car頁(yè)面中點(diǎn)擊收藏后的課程信息在此處顯示My_yuyue：已購(gòu)買課程顯示界面，點(diǎn)擊后可發(fā)表評(píng)價(jià)Yuyue：課程預(yù)約時(shí)間選擇界面，點(diǎn)擊預(yù)約后信息傳遞給已購(gòu)，課程視頻即可完整播放用戶操作登陸（login-index）后，進(jìn)入選擇課程（index）界面，本程序提供了四個(gè)基本課程，點(diǎn)擊課程進(jìn)入課程觀看（detail-car），當(dāng)課程播放五秒鐘后，若檢測(cè)到使用用戶未進(jìn)行點(diǎn)擊預(yù)約購(gòu)買，則終止播放，用戶點(diǎn)擊預(yù)約后進(jìn)入時(shí)間預(yù)約界面（yuyue），預(yù)約后可正常觀看課程，并可在我的課程（my_yuyue）中找到，課程播放頁(yè)面有收藏按鍵，點(diǎn)擊后數(shù)據(jù)傳遞到（my_shoucang）界面，可在里面找到，右下角有咨詢留言功能，點(diǎn)擊后進(jìn)入咨詢界面（Im-chat），此頁(yè)面邏輯結(jié)構(gòu)中也包含components文件夾中的兩個(gè)vue文件（chatinput）(messageshow)，用戶在個(gè)人中心（admin）中可以點(diǎn)擊我的預(yù)約進(jìn)行課程評(píng)價(jià)，評(píng)價(jià)后的課程顯示在我的評(píng)價(jià)中。后臺(tái)bmob數(shù)據(jù)庫(kù)設(shè)置：本項(xiàng)目的后臺(tái)云數(shù)據(jù)庫(kù)只放置了視頻信息，在頁(yè)面中調(diào)用時(shí)，使用http開頭的網(wǎng)頁(yè)鏈接進(jìn)行調(diào)用。圖3-10bmob視頻數(shù)據(jù)表圖圖3-11功能實(shí)現(xiàn)圖因?yàn)轫?yè)面文件比較多，之間的跳轉(zhuǎn)、連接等也比較復(fù)雜，具體的頁(yè)面功能實(shí)現(xiàn)將會(huì)在第四章，功能實(shí)現(xiàn)部分詳述3.6本章小結(jié)本章主要介紹了本系統(tǒng)的層次結(jié)構(gòu)以及每層次每部分的功能。包含框架圖、流程圖、邏輯關(guān)系圖，以及各部分的簡(jiǎn)單介紹。從宏觀上展示整個(gè)系統(tǒng)的基本結(jié)構(gòu)和各部分關(guān)系，為開發(fā)過程提供了清晰的開發(fā)思路與開發(fā)流程，通過本章的關(guān)系圖也可以清楚的了解本系統(tǒng)的開發(fā)方向、運(yùn)行流程和使用方法。

系統(tǒng)實(shí)現(xiàn)上一章節(jié)中介紹了本系統(tǒng)的開發(fā)流程和邏輯關(guān)系，并作出了相關(guān)的說明解釋。本章主要就系統(tǒng)的實(shí)際內(nèi)容進(jìn)行了展示，并詳細(xì)地說明了整個(gè)系統(tǒng)各部分的開發(fā)過程、開發(fā)方法以及用到相關(guān)開發(fā)工具的使用方法，包括uni框架前端頁(yè)面編寫、HbuilderX使用與文件結(jié)構(gòu)、數(shù)據(jù)庫(kù)創(chuàng)建、微信開發(fā)者工具等。并對(duì)于系統(tǒng)功能做了詳細(xì)論述。4.1系統(tǒng)功能實(shí)現(xiàn)4.1.1界面基本框架Vue是一個(gè)運(yùn)行在瀏覽器里的前端頁(yè)面的框架，主要語(yǔ)言是javascript，對(duì)服務(wù)器本地沒有任何要求，只要一個(gè)靜態(tài)文件[11]。小程序是一個(gè)邏輯視圖層框架，邏輯層由js開發(fā)，視圖層由微信標(biāo)記語(yǔ)言wxml和微信樣式表wxss語(yǔ)言開發(fā)。本程序開發(fā)過程中的Uni-app生命周期執(zhí)行順序?yàn)槠淠J(rèn)執(zhí)行周期：[App]

onLaunch

->

[Page]

onLoad

->

[App]

onLaunch

sucess

callbackOnlaunch的核心代碼編寫包括了鎖定屏幕方向lockOrintation、環(huán)境更新升級(jí)等： onLaunch:function(){ console.log('AppLaunch'); //#ifdefAPP-PLUS /*5+環(huán)境鎖定屏幕方向*/ plus.screen.lockOrientation('portrait-primary');//鎖定 /*5+環(huán)境升級(jí)提示*/ varserver="https://uniapp.dcloud.io/update";//檢查更新地址 varreq={//升級(jí)檢測(cè)數(shù)據(jù) "appid":plus.runtime.appid, "version":plus.runtime.version, "imei":plus.device.imei };4.1.2開始界面本測(cè)試在HbuilderX中運(yùn)行在小程序模擬器-微信web開發(fā)者工具中以窗口模式iphone5的分辨率及大小在WINDOWS10系統(tǒng)下運(yùn)行為例圖4-1HbuilderX運(yùn)行小程序示意圖首先打開本軟件會(huì)出現(xiàn)登陸首頁(yè)，開發(fā)中調(diào)用wx.getUserInfo接口獲取用戶授權(quán)數(shù)據(jù)信息，其中點(diǎn)擊“微信登陸”button進(jìn)行微信賬號(hào)授權(quán)，授權(quán)方法主要是將userInfo信息回傳給指定變量名，從而實(shí)現(xiàn)獲取信息并顯示到前端頁(yè)面中的效果： uni.getUserInfo({ provider:'weixin', success:function(infoRes){ that.username=infoRes.userInfo.nickName; that.usericon=infoRes.userInfo.avatarUrl; varobj=JSON.stringify(infoRes); console.log('success：'+obj); }, fail:function(err){ varobj=JSON.stringify(err); console.log('err：'+obj); } });因?yàn)檫@個(gè)程序授權(quán)微信登錄，所以個(gè)人信息只能在微信客戶端修改。每個(gè)微信用戶只有一個(gè)授權(quán)登錄信息。該小部件使用按鈕組件并指定getuserinfo類型以獲取用戶數(shù)據(jù)。圖4-2登錄頁(yè)面邏輯方法圖4.1.3發(fā)現(xiàn)與課程選擇界面在用戶點(diǎn)擊進(jìn)入后，首頁(yè)是課程的介紹與廣告信息，本小程序只添加了四個(gè)課程，主要完成界面ui排列、框架的使用：該頁(yè)面頂部的滑塊組件，使用的是的swiper方法，設(shè)定持續(xù)一段時(shí)間后自動(dòng)切換的時(shí)間，對(duì)應(yīng)代碼如下： <!--滑塊組件--> <swiper:indicator-dots="true":autoplay="true":interval="2000":duration="500"> <blockv-for="iteminitems":key="item"> <swiper-item> <image:src="item"class="swiper-item"v-on:click="itemCarChange2(index)"></image> </swiper-item> </block> </swiper>中部進(jìn)行排版頁(yè)面，設(shè)置scroll-view橫向滾動(dòng)條，作為視圖的容器[15]。<scroll-viewv-if="index==0"class="scroll-view_H"scroll-x="true"> </scroll-view>在主頁(yè)中點(diǎn)擊課程信息，可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面<imagev-on:click="itemCarChange(,content.teach_name,content.icon)":src="content.url"></image>其中，content是每個(gè)課程變量的實(shí)例化后的具體對(duì)象，其中每個(gè)對(duì)象都同時(shí)包含了課程名、老師名、課程對(duì)應(yīng)的宣傳圖標(biāo)、課程視頻鏈接等信息。圖4-3首頁(yè)排版邏輯方法圖4.1.4課程播放界面我們可以看到，該頁(yè)面的頂部是放置主視頻的模塊，在此模塊中，我設(shè)定了播放5秒鐘后若檢測(cè)到用戶對(duì)該課程未取得擁有的權(quán)限，則停止播放并提示“請(qǐng)預(yù)約購(gòu)買！”，主要使用了賦值方法，if條件語(yǔ)句與pause方法等實(shí)現(xiàn)，核心實(shí)現(xiàn)代碼如下： this.video=wx.createVideoContext('myVideo'); varvid=this.video; if(have==1){ setTimeout(function(){ vid.seek(0); vid.pause(); uni.showToast({ title:"請(qǐng)預(yù)約購(gòu)買！"}) },5000)//設(shè)定試看時(shí)間為5s}點(diǎn)擊預(yù)約購(gòu)買后，頁(yè)面跳轉(zhuǎn)到y(tǒng)uyue.vue中，在此頁(yè)面中，當(dāng)用戶選定時(shí)間進(jìn)行課程預(yù)約購(gòu)買后，其課程信息返回到我的購(gòu)買信息中，算法檢測(cè)用戶對(duì)該課程名是否已購(gòu)買使用“if(yuyue[i].name==name)”，若已購(gòu)買，則設(shè)定have值為2，即可完整播放課程視頻。 varyuyue=JSON.parse(json); for(vari=0;i<yuyue.length;i++){ if(yuyue[i].name==name){ have=2; }}預(yù)約頁(yè)面的實(shí)現(xiàn)過程出現(xiàn)了比較復(fù)雜的picker-view中動(dòng)態(tài)設(shè)置indicator-style不生效的問題，為了解決這個(gè)問題，我查閱了書籍以及網(wǎng)絡(luò)，最終了解到，解決此問題可以添加indicatorStyle方法如下，可以解決動(dòng)態(tài)生效問題[15]：visible:true,indicatorStyle:`height:${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`在此頁(yè)面中還有其余兩個(gè)button：“收藏”、“咨詢”收藏為點(diǎn)擊按鍵后將此課程對(duì)象的isfor變量設(shè)置為1，該課程信息傳入到我的頁(yè)面中“我的收藏”模塊下， if(isfor==1){ varshoucang={index:this.icon,titel:this.titel,type:this.tc}; this.shoucangs.push(shoucang); varscjson=JSON.stringify(this.shoucangs); uni.setStorageSync('shoucangs',scjson);}圖4-4課程播放頁(yè)面邏輯方法圖咨詢頁(yè)面僅作為留言頁(yè)面，由于本設(shè)計(jì)未涉及到后臺(tái)服務(wù)器的開發(fā)，故此頁(yè)面暫時(shí)無(wú)接口可以獲取與發(fā)送信息，頁(yè)面主要由頂層、底層、中間層形成。點(diǎn)擊發(fā)送留言信息后，文本框里的信息作為一個(gè)content，通過傳遞與計(jì)算高度的形式顯示在中間層[16]，主要代碼如下： res[0].forEach(function(rect){ that.style.mitemHeight=that.style.mitemHeight+rect.height+20;}); if(that.style.mitemHeight>that.style.contentViewHeight){ that.scrollTop=that.style.mitemHeight-that.style.contentViewHeight;}對(duì)話框點(diǎn)擊發(fā)送后，傳送message和id信息給頁(yè)面，即可顯示在聊天對(duì)話框中。圖4-5留言咨詢頁(yè)面邏輯方法圖4.1.5我的界面在如上主要功能完成后，現(xiàn)在來(lái)看第二個(gè)中心頁(yè)面：“個(gè)人中心”，在這個(gè)板塊中，共分為五部分，個(gè)人信息、發(fā)表評(píng)價(jià)、我的評(píng)價(jià)、我的收藏、我的購(gòu)買。由于本程序使用微信第三方授權(quán)登陸，故個(gè)人信息顯示為個(gè)人的微信信息。發(fā)表評(píng)價(jià)：本頁(yè)面中，包括了五星好評(píng)、文字輸入、調(diào)用本地圖片庫(kù)等功能，使用uni-uploader主要實(shí)現(xiàn)方式是將本地資源上傳到開發(fā)者服務(wù)器。頁(yè)面通過chooseImg方法上傳圖片，獲取圖片url信息到本地資源的一個(gè)臨時(shí)路徑，將本地資源上傳服務(wù)器。<blockv-for="(image,index)inimageList":key="index"><viewclass="uni-uploader__file"><imageclass="uni-uploader__img":src="image"@tap="previewImage"></image></view></block></view><viewclass="uni-uploader__input-box"><viewclass="uni-uploader__input"@tap="chooseImg"></view></view>chooseImg獲取本地相冊(cè)、拍照的方法的實(shí)現(xiàn)過程是設(shè)置獲取圖片資源的sourseType、sizeType：chooseImg(){//選擇圖片uni.chooseImage({sourceType:["camera","album"],sizeType:"compressed",count:9,success:(res)=>{this.imageList=res.tempFilePaths;}})},點(diǎn)擊評(píng)五星方法的功能及chooseStar方法的實(shí)現(xiàn)：<textclass="feedback-star"v-for="(value,key)instars":key="key":class="key<sendDate.score?'active':''"@tap="chooseStar(value)"></text>chooseStar(e){//點(diǎn)擊評(píng)星this.sendDate.score=e;},我的評(píng)價(jià)在此處，課程信息由發(fā)表評(píng)價(jià)頁(yè)面提交傳過來(lái)，可以查看已評(píng)價(jià)的x星好評(píng)。通過發(fā)表評(píng)價(jià)后的list對(duì)象中所有屬性信息來(lái)顯示到此頁(yè)面，此處數(shù)據(jù)在客戶端的模式，同PC端一致，用戶點(diǎn)擊課程后，進(jìn)入移動(dòng)端播放視頻內(nèi)容頁(yè)面。 <viewclass="car_item2"v-on:click="itemCarChange(index,i)"> <viewclass="name2">{{list.start}}星好評(píng)</view> <viewclass="price2">{{list.content}}</view> </view> 我的收藏在課程觀看的頁(yè)面中，有一個(gè)收藏課程的button，點(diǎn)擊此按鍵，信息傳入我的收藏頁(yè)面，傳遞方法類似于上述購(gòu)買視頻，若收藏后，isfor==2，此時(shí)保存收藏的課程信息對(duì)象，push方法將此視頻加入到已收藏的課程隊(duì)列中： if( isfor==1){ varshoucang={index:this.icon,titel:this.titel,type:this.tc}; this.shoucangs.push(shoucang); varscjson=JSON.stringify(this.shoucangs); uni.setStorageSync('shoucangs',scjson); }在我的收藏頁(yè)面中，可獲取課程信息，點(diǎn)擊后依然是可以直接跳轉(zhuǎn)到課程播放界面。我的購(gòu)買在此頁(yè)面中，可以看到已購(gòu)買的課程信息及歷史記錄，當(dāng)時(shí)間過了預(yù)約購(gòu)買的時(shí)間后，自動(dòng)取消續(xù)費(fèi)，故在此頁(yè)面中，可能會(huì)有多個(gè)重復(fù)顯示的課程，但購(gòu)買的時(shí)間不同，主要實(shí)現(xiàn)代碼如下：。 <blockv-for="listinyuyues":key="list"> <viewclass="view_group_item"v-on:click="itemCarChange()"> <image:src="list.url"></image> <viewclass="text_item"> <view>{{}}</view> <viewclass="two">購(gòu)買時(shí)間{{list.time}}</view> </view> </view> </block>圖4-6我的頁(yè)面邏輯方法圖4.1.6視頻、圖片獲取與項(xiàng)目配置舉例說明：圖片獲取方法：<imagesrc="../../static/img/lvshi2.png"></image>圖標(biāo)獲取方法："selectedIconPath":"static/img/icon_select_play.png",視頻獲取方法：this.url="/2019/04/15/044e00834051994a80b73be2205486b0.mp4"項(xiàng)目配置包括小程序的Appid、projectName等信息配置，同時(shí)由于本程序調(diào)用了部分網(wǎng)頁(yè)地址，在微信開發(fā)者工具上進(jìn)行調(diào)試時(shí)也應(yīng)添加所用到的域名如下：圖4-7配置域名的界面在域名配置過程中，我遇到非法域名、耗時(shí)的應(yīng)用程序和審計(jì)等問題。小程序的域名配置修改的最大次數(shù)是5次。因此，在域名配置過程中也遇到了許多問題，如域名配置后不匹配、無(wú)法使用需要使用的瀏覽器域名等，逐一去請(qǐng)教、搜索、解決。4.2系統(tǒng)展示4.2.1微信第三方工具授權(quán)登陸界面：此頁(yè)面為小程序初始登陸頁(yè)面，可見圖中有個(gè)“微信登錄”的button按鈕點(diǎn)擊此按鈕，圖片存于本地的static.img文件夾中調(diào)用，可以跳轉(zhuǎn)到圖4-3中左側(cè)圖片頁(yè)面。圖4-8程序開始運(yùn)行界面首頁(yè)課程發(fā)現(xiàn)部分圖4-9程序首頁(yè)發(fā)現(xiàn)界面圖中左側(cè)的課程列表中，用戶自行選擇一個(gè)感興趣的課程點(diǎn)擊進(jìn)入，可進(jìn)入課程播放界面，但未預(yù)約訂購(gòu)的課程進(jìn)入后只可播放前五秒鐘，隨后會(huì)提示請(qǐng)購(gòu)買，在購(gòu)買頁(yè)面中，選擇購(gòu)買時(shí)間，設(shè)置此頁(yè)面主要是為了以后有些課程是需要預(yù)約購(gòu)買，可提前預(yù)定等，購(gòu)買后可完整觀看。4.2.3課程播放頁(yè)面部分 圖4-10課程播放頁(yè)面此頁(yè)面的信息均為由模板導(dǎo)入，設(shè)計(jì)編寫好模板后，后臺(tái)將信息傳進(jìn)去，我們可以看到此頁(yè)面共有四個(gè)主要模塊，課程信息與視頻模塊、添加收藏、預(yù)約購(gòu)買、咨詢模塊，除了課程信息與視頻模塊與添加收藏按鈕主要使用傳值方式，其他的各按鈕點(diǎn)擊后均可跳入相應(yīng)頁(yè)面。4.2.4預(yù)約購(gòu)買模塊此預(yù)約購(gòu)買模塊的時(shí)間可隨意選擇，目的是方便有時(shí)間限制的課程銷售模塊。圖4-11課程預(yù)約購(gòu)買頁(yè)面4.2.5收藏模塊在課程播放模塊中，有添加收藏按鍵，點(diǎn)擊可以加入自己已收藏的課程，方便之后的課程觀看與查找等。圖4-12收藏步驟的兩個(gè)頁(yè)面4.2.6發(fā)表評(píng)價(jià)模塊在這個(gè)頁(yè)面可以看到自己看過課程的講師，并進(jìn)行評(píng)價(jià)，在評(píng)價(jià)內(nèi)容里可選擇發(fā)布評(píng)論內(nèi)容、上傳照片、留下個(gè)人聯(lián)系方式、評(píng)星等內(nèi)容。點(diǎn)擊評(píng)價(jià)后，發(fā)表的評(píng)價(jià)會(huì)傳送到已評(píng)價(jià)頁(yè)面，按時(shí)間順序依次展開自己已評(píng)定星級(jí)的課程信息。圖4-13發(fā)表評(píng)價(jià)過程的兩個(gè)頁(yè)面4.2.7查看評(píng)價(jià)模塊在發(fā)表評(píng)價(jià)后，評(píng)論內(nèi)容、評(píng)星等級(jí)都會(huì)傳到此模塊進(jìn)行對(duì)應(yīng)的顯示。顯示內(nèi)容分別為x星好評(píng)、評(píng)價(jià)內(nèi)容，此頁(yè)面主要是用來(lái)查看自己已評(píng)定星級(jí)的內(nèi)容，暫時(shí)無(wú)法獲取對(duì)應(yīng)課程信息。圖4-14發(fā)表評(píng)價(jià)后的信息顯示頁(yè)面4.3本章小結(jié)本章主要介紹了本系統(tǒng)的主要功能，并做了相關(guān)的頁(yè)面和結(jié)構(gòu)功能的展示。我在這章里，以一個(gè)小程序運(yùn)行的頁(yè)面展開的順序，一步步分析每個(gè)頁(yè)面及其功能，剖析每一個(gè)階段所關(guān)系到的邏輯部分，分析它是屬于哪個(gè)模塊，再加以代碼來(lái)說明具體的功能是怎么實(shí)現(xiàn)的。并且結(jié)合vue框架的部分特點(diǎn)，讓條理更加清晰。

總結(jié)及展望5.1總結(jié)本次畢業(yè)設(shè)計(jì)基本完成了任務(wù)書中的各項(xiàng)需求，程序比較穩(wěn)定，不會(huì)出現(xiàn)程序崩潰的情況，雖然效率上還有可以優(yōu)化的地方，但是總體實(shí)現(xiàn)的效果還是比較合格的，此次畢業(yè)設(shè)計(jì)所涉