HaiTer吉他社小程序的設(shè)計與實現(xiàn)-畢業(yè)設(shè)計

本科畢業(yè)論文（設(shè)計）中文題目HaiTer吉他社小程序的設(shè)計與實現(xiàn)英文題目TheDesignandImplementationofHaiTerGuitarSocietyMiniProgram選題編號系（部）專業(yè)學(xué)生姓名學(xué)號指導(dǎo)教師完成時間本科畢業(yè)論文（設(shè)計）-26-1緒論1.1研究背景據(jù)中國通信研究院統(tǒng)計，微信小程序已經(jīng)覆蓋了超過200多個細(xì)分的行業(yè)，服務(wù)的用戶也高達(dá)1000億人次，城市覆蓋了362個地級城市，年交易整張浮度也超過了600%，直到2021年底微信小程序的用戶突破7.5億，平均日活躍在2.3億，這明顯體現(xiàn)微信小程序的普遍性。微信小程序現(xiàn)已有超過百萬計的開發(fā)者加入到了微信小程序的開發(fā)，應(yīng)用數(shù)量覆蓋到各行各業(yè)，微信小程序還在許多城市實現(xiàn)了支持地鐵、公交服務(wù)。微信小程序發(fā)展帶來更多的就業(yè)機(jī)會，社會效應(yīng)不斷提升。通過微信小程序的應(yīng)用，可以將微信的互動交互價值發(fā)揮出來REF_Ref24100\r\h錯誤!未找到引用源?！，F(xiàn)在的市面上有多款音樂學(xué)習(xí)App，恩雅音樂、板凳音樂、音樂屋。這些全是為音樂學(xué)習(xí)而誕生的App，主要功能為學(xué)習(xí)樂器視頻、線上約課、查看曲譜、購買樂器等。雖然現(xiàn)在音樂學(xué)習(xí)軟件眾多，但是現(xiàn)在還沒有一款真正的結(jié)合以上功能學(xué)習(xí)音樂的微信小程序。因此，本文擬設(shè)計一款音樂微信小程序，實現(xiàn)上述功能。1.2國內(nèi)外研究現(xiàn)狀1.2.1國內(nèi)現(xiàn)狀騰訊的微信小程序的推出已經(jīng)有很長一段時間了，小程序最開始是在騰訊QQ里面展開的小程序游戲，后面小程序轉(zhuǎn)戰(zhàn)到微信，由跳一跳引爆了朋友圈。后來由各種小游戲再到國內(nèi)各行各業(yè)也都推出了自己的微信小程序應(yīng)用，小到飯店點單、線上購買區(qū)域生活用品，大到中國各大龍頭企業(yè)都有自己的微信小程序，例如美團(tuán)、京東購物、貓眼電影、團(tuán)購等。相對于傳統(tǒng)的手機(jī)App或者瀏覽器，小程序大大的的降低了開發(fā)成本和和開發(fā)難度。1.2.2國外現(xiàn)狀其實不光微信有小程序，國外的很多APP有小程序，比如海外版的抖音Tiktok，早在2021年就推出了jumps和抖音小程序是一樣的，可以掛在視頻的左下方，另外用戶用戶超過6億的社交軟件Snapchat也推出了小程序平臺Snapmini，任何開發(fā)者都可以在上面發(fā)布小程序，另外海外的微信和海外版的支付寶也是支持小程序。1.3本文研究內(nèi)容1.3.1論文結(jié)構(gòu)本文主要分為以下幾個部分。第一部分是緒論，研究小程序開發(fā)背景，以及國內(nèi)外開發(fā)狀況，分析HaiTer吉他社的出發(fā)點和HaiTer吉他的特點。第二部分是系統(tǒng)分析介紹與展示了HaiTer吉他社使用了HBuilder與微信小程序開發(fā)這兩個工具來進(jìn)行開發(fā)，該系統(tǒng)使用了vue與js等語言進(jìn)行開發(fā)，用view進(jìn)行頁面布局用style來對頁面進(jìn)行渲染，HaiTer吉他社需要用到電腦與手機(jī)來共同完成。代碼理論分析了HaiTer小程序的系統(tǒng)需求，劃分出了登錄模塊、購物模塊、學(xué)習(xí)模塊、購物車模塊、收貨地址模塊。第三部分進(jìn)行了HaiTer吉他社的技術(shù)可行性分析，第四部分對HaiTer吉他社的總體框架進(jìn)行了設(shè)計，以及導(dǎo)航欄的設(shè)計logo的設(shè)計以及其他圖片的設(shè)計進(jìn)行了實現(xiàn)，都采用了ps進(jìn)行處理。第四部分是對HaiTer吉他社的各個模塊進(jìn)行詳細(xì)的介紹，與設(shè)計實現(xiàn)和設(shè)計思路和實現(xiàn)部分。第五部是對HaiTer吉他社的系統(tǒng)進(jìn)行測試，運用到了黑盒測試。第六部分是總結(jié)了HaiTer吉他社的開發(fā)完成結(jié)果與展望，總結(jié)系統(tǒng)設(shè)計以及開發(fā)遇到的問題。1.3.2研究方法及手段1、觀察研究法通過觀察了國內(nèi)頂尖的微信小程序發(fā)現(xiàn)現(xiàn)在大多數(shù)小程序的功能為買菜、快遞、外賣都是貼近于生活的方面，還沒有一款真正適合吉他玩家的一款微信小程序，有大多數(shù)樂器小程序都不能買吉他或者買樂器，只能在一些淘寶找到，沒有一款專門賣吉他的和學(xué)習(xí)吉他的小程序。比較分析法在觀察眾多吉他小程序，分析得出“吉他普Pro”是只能購買譜子沒有購買吉他的功能，“趣彈”小程序是多了一個視頻的功能，HaiTer吉他社的優(yōu)勢在可以學(xué)習(xí)吉他，購買吉他，做到了學(xué)習(xí)以及購買兩不誤。3、經(jīng)驗總結(jié)法通過了觀察研究發(fā)一比較分析法，總結(jié)出來，HaiTer吉他社需要做到能夠線上購買吉他普、吉他以及吉他配件。通過實踐以及對微信小程序的學(xué)習(xí)，來對HaiTer吉他社進(jìn)行完善。

2系統(tǒng)分析2.1可行性分析2.1.1經(jīng)濟(jì)可行性分析本系統(tǒng)的開發(fā)使用的軟件為HBuilder、微信開發(fā)者工具、手機(jī)微信，AdobePhotoshopCS6這些軟件均為免費軟件，語言運用了VUE框架、js、wxml、JavaScript語言進(jìn)行開發(fā)，采用的系統(tǒng)為win10筆記本電腦以及安卓系統(tǒng)7以上手機(jī)一部。以上開發(fā)經(jīng)濟(jì)能夠支持這次開發(fā)的正常運行。綜上所述，系統(tǒng)從經(jīng)濟(jì)上是可行的。2.1.2技術(shù)可行性分析本次開發(fā)宿主軟件采用了Hbuilder以及微信開發(fā)者工具，首頁模塊、分類模塊、購物模塊、登錄模塊都可以使用VUE框架、js、wxml、JavaScript這些語言進(jìn)行完成，綜上所述，系統(tǒng)從技術(shù)上是可行的。2.1.3操作可行性分析本次的開發(fā)難點在于獲取用戶登錄，以及用戶線上支付功能，雖然這些功能比較麻煩，但是對于信小程序的開發(fā)都有對應(yīng)的解決。綜上所述，系統(tǒng)從操作上是可行的。2.2需求分析2.2.1關(guān)鍵技術(shù)HaiTer吉他社采用VUE框架來進(jìn)行框架設(shè)計，采用了JavaScript對頁面進(jìn)行了渲染，自定義組件運用了my-search組件來進(jìn)行渲染，購物車頁面用props來進(jìn)行的封裝，收貨地址運用了vuex的address持久化儲存到本地，登錄界面于支付功能運用到了uni.login技術(shù)。1、wxml簡介wxml是微信小程序出的一門針對于微信小程序開發(fā)的一種開發(fā)語言，類似于HTML標(biāo)簽語言，的作用是可以寫微信小程序里面的標(biāo)簽，框架，用于調(diào)用wxsst里面的事件。2、wxss簡介wxss是一套樣式語言描述wxml的組件是基于CSS語言修改擴(kuò)充而來了，具備了css的大部分特性，在調(diào)試一些字體、顏色、位置、大小等等都可以用到wxss語言、當(dāng)然也能夠添加一些動畫效果。2.2.2系統(tǒng)功能需求分析HaiTer吉他社微信小程序開發(fā)系統(tǒng)基于微信平臺的一款程序開發(fā)工具進(jìn)行開發(fā)，其功能主要包括戶注冊與登錄功能、查看學(xué)習(xí)視頻、小程序商城功能、個人中心功能、收獲地址功能、支付功能、其中，用戶登錄與支付能是系統(tǒng)的核心基礎(chǔ)功能。1、用戶登錄功能用戶登錄功能是是否能夠體驗到HaiTer吉他社小程序完整的功能，因為用戶只有登錄后才能進(jìn)行購買商品、加入購物車、填寫收貨地址，用戶登錄與未登錄接觸功能流程圖如圖2.1所示。圖2.1用戶登錄與未登錄接觸功能流程圖2、結(jié)算系統(tǒng)管理在用戶選擇加入購物車或者直接進(jìn)行購買，用戶必須在登錄后才能進(jìn)行加入購物車，如果用戶未登錄系統(tǒng)會進(jìn)行登錄提示，在用戶進(jìn)行了登錄后直接購買商品或者在購物車結(jié)算，系統(tǒng)會判定用戶是否填寫收貨地址，如果有填寫將會直接支付成功，如果未進(jìn)行填寫系統(tǒng)會提示請?zhí)顚懯肇浀刂?，用戶在選擇完地址后才可以支付成功。用戶結(jié)賬支付流程例圖如圖2.2所示。圖2.2用戶結(jié)賬支付流程例圖2.2.4性能需求分析HaiTer吉他社微信小程序在安全方面非常高的，微信小程序官方應(yīng)用安全方面采取了多項措施有嚴(yán)格的開發(fā)審查制度、手機(jī)設(shè)備和硬件的安全檢查、數(shù)據(jù)庫和網(wǎng)絡(luò)安全性審查、強(qiáng)大的加密機(jī)制、更安全的支付機(jī)制。這些都是官方保證的安全方面，在用戶體驗方面小程序的性能做到精簡，內(nèi)容簡單明了讓用戶一眼都能夠看清楚小程序的功能，小程序的流暢去掉了繁瑣的鏈接，與無用的開發(fā)讓小程序使用起來更加絲滑。2.2.5數(shù)據(jù)需求分析在HaiTer吉他社里面需要獲取用胡的微信頭像信息，在用戶信息里面需要用戶填寫到自己的居住地址以及電話號碼用戶的基本信息是由用戶來進(jìn)行填寫的，所以不會涉及到隱私方面。在用戶購買商品后會記錄購買信息，需要用戶在我的商品里面進(jìn)行查看。2.2.6接口需求分析1、視頻接口微信小程序的特別之處在于發(fā)布的時候不能超過2m，所以在處理一些圖片以及視頻的時候開發(fā)人員只能在網(wǎng)上用一些現(xiàn)成的圖片以及視頻，一小段視頻遠(yuǎn)遠(yuǎn)的超過了2m，需要用到src屬性來回去視頻的資源地址。再用video標(biāo)簽導(dǎo)入src的地址完成視頻的上傳。2、圖片接口在寫輪播圖片以及商品圖片的時候這些圖片的大小也遠(yuǎn)遠(yuǎn)超過了所需的2m大小。所以在寫輪播的時候需要用到swiper標(biāo)簽，再用到image標(biāo)簽導(dǎo)入src接口完成圖片的導(dǎo)入。3、登錄接口在寫登錄接口的時候需要用到一個button來觸發(fā)登錄事件，需要調(diào)用到wx.login接口拿到code，調(diào)用微信用戶信息接口使用wx.getUserProfile來拿到用戶的個人信。2.2.7將來可能提出的需求分析1、頁面的美化。2、添加更多的商品。3、添加視頻彈幕。4、添加在線聯(lián)系。5、實現(xiàn)用戶購買后以微信公眾號將信息發(fā)送給后臺。

3系統(tǒng)設(shè)計3.1架構(gòu)設(shè)計原型設(shè)計是通過簡易的模型來確定小程序的布局，首頁由搜索框、輪播圖片、三個跳轉(zhuǎn)按鈕，以及框。首頁原型設(shè)計如圖3.1所示。圖3.1首頁原型設(shè)計圖分類原型設(shè)計圖，由右欄與左欄組成，左欄是商品的大致分類，左邊是詳細(xì)分類，詳細(xì)分類可以單獨點開并且查看詳細(xì)商品進(jìn)行購買或者加入購物車。分類原型設(shè)計如圖3.2所示。圖3.2分類原型設(shè)計圖購物車是用戶在分類里面選購了樂器商品都會放在購物車?yán)锩?，進(jìn)行同意結(jié)賬，購物車?yán)锩嬉埠袆h除用戶不想要的商品，然后后進(jìn)行統(tǒng)一結(jié)算購物車原型設(shè)計如圖3.3所示。圖3.3購物車原型設(shè)計圖個人中心我的屬于用戶的個人界面，用戶用于登錄，查看購買物品以及退出登錄的頁面我的個人中心原型設(shè)計如圖3.4所示。圖3.4個人中心我的原型設(shè)計圖3.2功能模塊設(shè)計HaiTer系統(tǒng)模塊分為四個模塊，在用戶進(jìn)入小程序后，首先出現(xiàn)的是首頁模塊，其次是分類模塊、購物車模塊、我的模塊。本系統(tǒng)的功能模塊圖如圖3.5所示。1、首頁模塊在首頁模塊里面有搜索框可以為用戶提供快速搜索到想要的產(chǎn)品，輪播圖是輪播熱賣的商品、快速導(dǎo)航欄是快速跳轉(zhuǎn)三個指定熱門商品，下面還有熱門的吉他學(xué)習(xí)視頻可以提供給用戶進(jìn)行吉他學(xué)習(xí)。2、分類模塊在分類模塊里面用戶可以查看自己想買的商品分類，目前HaiTer吉他社一共分類了三個分別是電吉他、吉他譜和吉他，三個同時有這對應(yīng)的商品，用戶可以點擊商品進(jìn)入商品詳細(xì)，進(jìn)行加入購物車或者直接購買。3、購物車模塊用戶在分類模塊選擇了商品如果加入購物車，所選中的商品將會直接傳到購物車?yán)锩?，購物車?yán)锩嬗脩艨梢赃M(jìn)行刪除不想要的商品或者添加商品數(shù)量，然后再進(jìn)行結(jié)賬。4、我的模塊我的模塊也稱之為用戶個人中心，在這里面分為了用戶登錄，填寫收貨地址，瀏覽已經(jīng)購買的商品以及退出登錄。系統(tǒng)功能模塊圖如圖3.5所示。圖3.5系統(tǒng)功能模塊圖3.3數(shù)據(jù)庫功能模塊設(shè)HaiTer吉他社小程序的數(shù)據(jù)模塊使用了阿里云數(shù)據(jù)庫，小程序的數(shù)據(jù)庫采用了阿里云數(shù)據(jù)庫，建了一個名為private的云服務(wù)空間在這個空間里面建立了商品分類classify、goods、poster、uni-id-address、users、video等數(shù)據(jù)庫。因為微信小程序的大小有限定，在一般小程序不能超過2mb，所以大量的圖片以及視頻就不能存儲在image文件里面，只能存放到外數(shù)據(jù)庫。分類數(shù)據(jù)庫classify數(shù)據(jù)庫是分類商品里面左欄分類里面的分類名稱，id是隨機(jī)的、title是分類欄的名稱、sort是分類欄的排序、status為是否生效。classify數(shù)據(jù)庫表如表3.1所示。表3.1分類數(shù)據(jù)庫表序號列名數(shù)據(jù)類型長度主鍵外鍵允許空默認(rèn)值注釋1_idvarchar255√True分類ID2titlevarchar255True分類名稱3cate_idvarchar255True備注位置4sotrvarchar255True順序5statusvarchar255True狀態(tài)商品詳細(xì)數(shù)據(jù)庫goods是商品右邊詳細(xì)分類欄里面的商品。id為自動生成的，slider_img是商品圖片的src超鏈接，cover_img是商品介紹圖scr超鏈接、goods_name是商品的名稱、price是商品的價格。商品詳細(xì)數(shù)據(jù)表如表3.2所示表3.2商品詳細(xì)數(shù)據(jù)庫表序號列名數(shù)據(jù)類型長度主鍵外鍵允許空默認(rèn)值注釋1_idvarchar255√True商品ID2slider_imgvarchar255True商品圖片3cover_imgvarchar255True商品詳細(xì)圖4goods_namevarchar255True商品名稱5goods_pricevarchar255True商品價格6cate_idvarchar255True商品順序視頻數(shù)據(jù)庫video是商品數(shù)據(jù)庫的存放地址，視頻id是自動生成的用于后期搜索框的搜索、video是視頻的src超鏈接，title為視頻的介紹。視頻數(shù)據(jù)庫表如表3.3所示。表3.3視頻數(shù)據(jù)庫表序號列名數(shù)據(jù)類型長度主鍵外鍵允許空默認(rèn)值注釋1_idvarchar255√True用戶ID2video_urlvarchar255True視頻鏈接3open_urlvarchar255True用戶賬號4titlevarchar255True詳細(xì)介紹5descriptionvarchar255True不可保存

4系統(tǒng)實現(xiàn)4.1開發(fā)環(huán)境本次小程序運用了vue框架進(jìn)行開發(fā)，運用到了wxml、wxms、JavaScript來進(jìn)行小程序的布局，需要用到的軟件硬件如表4.1所示。表4.1系統(tǒng)所需軟、硬件環(huán)境硬件環(huán)境軟件環(huán)境PC端CPU：3.0G以上操作系統(tǒng)：Windows7以上版本PC端內(nèi)存：2GB以上微信小程序開發(fā)工具PC端硬盤：50GB以上HBuilderX開發(fā)工具移動端CPU：蛟龍700以上微信軟件8.0.0版本以上移動端內(nèi)存：2GB以上瀏覽器3.0以上移動端存儲空間：4GB以上AdobePhotoshopCS64.2功能模塊實現(xiàn)4.2.1登錄模塊登錄模塊是小程序里面最重要的功能之一，登錄模塊是決定用戶是否能夠體驗到完整的小程序微信。登錄模塊分別分為提醒登錄、一鍵登錄、退出登錄。提醒登錄如果用戶在沒有點擊登錄直接進(jìn)入小程序，瀏覽商品添加購物車、瀏覽購買商品、填寫收貨地址都無法完成，都會提示請先登錄。登錄提醒如圖4.1所示。圖4.1登錄提醒效果圖提醒登錄利用JavaScript語言里面的script標(biāo)簽?zāi)_本語言來寫判斷用戶是否登錄，如果用戶登錄直接return返回，如果沒有登錄就會提示請先登錄。登錄提醒功能代碼如圖4.2所示。圖4.2登錄提醒部份代碼圖用戶一鍵登錄用戶一鍵登錄是授是授權(quán)用戶的微信進(jìn)行登錄，無法單獨進(jìn)行注冊，所以要登錄微信小程序必須要有微信賬號進(jìn)行登錄，在用戶登錄成功后會獲取用戶的頭像以及生成退出登錄按鈕。用戶登錄效果圖如圖4.3所示。圖4.3登錄效果圖用戶登錄口是vue框架進(jìn)行編寫，利用template標(biāo)簽來進(jìn)行循環(huán)出發(fā)點擊效果，利用view標(biāo)簽創(chuàng)建content、mine等。在用戶登錄后出發(fā)templatev-if標(biāo)簽作為后面檢測用戶是否登錄的判斷標(biāo)簽。如果用戶進(jìn)行了登錄，在script語句循環(huán)里面就會直接返回就不會提示請登錄。用戶登錄判斷代碼如圖4.4所示。圖4.4用戶登錄部分代碼圖用戶登錄窗口以及提醒效果是利用style標(biāo)簽css語言來進(jìn)行編寫，導(dǎo)入之前template標(biāo)簽所綁定的viewclass名稱，利用widht、height等屬性來定義效果。用戶登錄窗口效果代碼4.5所示。圖4.5用戶登錄效果部分代碼圖4.2.2首頁模塊首頁模塊分別為搜索框、輪播圖、快速跳轉(zhuǎn)按鈕以及視頻學(xué)習(xí)。搜索框是用戶在首頁面接觸的第一個功能，他可以通過用戶搜索關(guān)鍵字進(jìn)行搜索商品內(nèi)的信息，當(dāng)然如果HaiTer吉他社沒有上架該商品將會搜索不到。搜索框效果圖如圖4.6所示。圖4.6搜索框效果圖搜索框的關(guān)鍵字搜索是利用view標(biāo)簽創(chuàng)建一個文本框，利用v-model組件來進(jìn)行關(guān)鍵字搜索。搜索框代碼圖如圖4.7所示。圖4.7搜索框代碼圖輪播圖輪播圖是將三張圖片放在首頁進(jìn)行輪播演示，輪播圖的作用是讓用戶了解目前HaiTer吉他社的活動。輪播圖效果圖如圖4.8所示。圖4.8輪播圖效果圖輪播圖效果是利用wisper進(jìn)行輪播，圖片采用了網(wǎng)上的現(xiàn)成圖片利用srv超鏈接導(dǎo)入圖片，輪播的框架使用了vue框架的u-swiper進(jìn)行輪播。輪播圖代碼如圖4.9所示。圖4.9輪播圖代碼圖視頻播放視頻是屬于首頁的一個新穎功能，里面一共授權(quán)了十二課《吉他入門零基礎(chǔ)教學(xué)》吉他入門學(xué)習(xí)視頻，還有一個認(rèn)識吉他教學(xué)視頻。視頻播放效果圖如圖4.10所示。圖4.10視頻播放效果圖視頻播放功能是利用view標(biāo)簽創(chuàng)建一個videos類，然后在綁定視頻路徑通過好看視頻網(wǎng)綁定視頻鏈接導(dǎo)入item.video_url里面在通過video標(biāo)簽利用src屬性導(dǎo)入視頻就可以導(dǎo)入到微信小程序里面。視頻代碼如圖4.11示。圖4.11視頻播放代碼圖4.2.3分類模塊分類模塊是用戶在選擇商品時可以更具不同的商品分類找到對應(yīng)的商品，分類模塊采用了常見的左右式布局，左邊為商品的大致分類，右邊是商品的分類詳細(xì)。分類頁面如圖4.12示。圖4.12分類頁面效果圖分類是通過template標(biāo)簽來創(chuàng)建的，利用view創(chuàng)建左邊的classifyLeft分類欄，和右邊的商品詳細(xì)為classifyRight。分類部分代碼圖如圖4.13所示。圖4.13分類部分代碼圖在右邊的商品里面通過JavaScript語言李的script標(biāo)簽創(chuàng)建標(biāo)簽，利用currentIndex函數(shù)創(chuàng)建點擊左邊商品跳轉(zhuǎn)右邊對應(yīng)的分類商品。分類部分代碼圖如圖4.14示。圖4.14分類部分代碼圖4.2.4數(shù)據(jù)庫在數(shù)據(jù)庫里面我們可以點擊添加數(shù)據(jù)庫，在classify商品分類欄里面的數(shù)據(jù)庫分為title左邊分類名稱為電吉他，cate_id為序號2，sort為排列順序，status是否執(zhí)行。商品分類數(shù)據(jù)庫代碼如圖4.15所示。圖4.15商品分類數(shù)據(jù)庫部分代碼圖商品詳細(xì)數(shù)據(jù)庫分為了slider、cover、goods_name、goods_price、datail_img、cate_id數(shù)據(jù)表。商品詳細(xì)數(shù)據(jù)表如圖4.16所示。圖4.16商品詳細(xì)數(shù)據(jù)庫圖商品詳細(xì)數(shù)據(jù)的slider數(shù)據(jù)為存儲商品詳細(xì)輪播圖的圖片，因為圖片的大小以及超過規(guī)定的大小所以只能在數(shù)據(jù)庫里面引用所需要的圖片鏈接。goods_name為商品的詳細(xì)介紹名字，price為商品的價格。detail為商品的詳細(xì)信息。商品詳細(xì)數(shù)據(jù)庫代碼圖如圖4.17所示。圖4.17商品詳細(xì)數(shù)據(jù)庫代碼圖4.2.5全局配置小程序的全部外觀面對用戶的可見部分，也是決定小程序的主題外觀顏色，刷新功能和用戶點擊反饋功能。在這次全局配置中HaiTer小程序選擇了backgroundTextStyle，

navigationBarBackgroundColor，navigationBarTitleText，navigationBarTextStyle，等配置文件配置文件介紹如表4.2所示。表4.2全局配置文件插件表配置文件名字作用backgroundTextStyle下拉刷新‘dark/light’navigationBarBackgroundColor導(dǎo)航欄背景顏色如：#000000navigationBarTitleText導(dǎo)航欄標(biāo)題內(nèi)容全局navigationBarTextStyle導(dǎo)航欄標(biāo)題顏色‘black/white’enablePullDownRefresh開啟下拉刷新全局配置文件代碼實現(xiàn)圖如圖4.18所示。圖4.18全局配置文件部分代碼圖在頁面配置上一共有首頁、分類、購物車、我的頁面組成，分別都有出發(fā)效果為未點中導(dǎo)航欄標(biāo)是白色的，當(dāng)選擇了相應(yīng)頁面時對應(yīng)的導(dǎo)航欄則會顯示為灰色。導(dǎo)航欄效果圖如圖4.19所示。圖4.19全局配置文件部分代碼圖全局配置首先是創(chuàng)建相對于的頁面，index為首頁頁面，classify為分類頁面，shoppingCart為購物車頁面，mine為我的頁面。pagePath為頁面的先后順序，iconpath為未出發(fā)效果，selectedIconpath為出發(fā)效果。全局配置導(dǎo)航欄代碼圖如圖4.20所示。圖4.20全局配置導(dǎo)航欄代碼圖隱藏頁面是小程序里面特殊的頁面，是需要用戶進(jìn)行點擊出發(fā)后跳轉(zhuǎn)的頁面，隱藏的頁面有很多，列入結(jié)算、收貨地址、商品詳請等。都放在了pages文件里面path是導(dǎo)入這些頁面時候需要用到的地址名稱，style就是頁面的頭部名稱。隱藏頁面部分代碼圖如圖4.21所示。圖4.21隱藏頁面部分代碼圖

5系統(tǒng)測試5.1測試計劃本次測試計劃由手機(jī)掃碼進(jìn)行、電腦客戶端微信小程序工具完成，測試人員一人進(jìn)行操作測試。5.1.1測試范圍與主要內(nèi)容本次測試主要測試功能為用戶掃碼是否能夠進(jìn)入小程序測試、用戶點擊登錄是否能夠獲取用戶微信頭像以及微信名稱，用戶是否在視頻里面發(fā)送彈幕，用戶瀏覽商品是否能夠加入購物車刪除購物車?yán)锏纳唐?，購物車是否能夠支付成功?.1.2測試方法在對HaiTer吉他社微信小程序進(jìn)行功能測試時使用的是黑盒測試。黑盒測試是通過檢測小程序的每個功能是否完整是否能夠正常使用，在測試中程序員需要把項目看成一個不能打開的盒子，在不考慮邏輯結(jié)構(gòu)方面作為一個沒有接觸小程序的人用戶來進(jìn)行小程序的使用。本次測試使用到了邊界值分析法、錯誤推測法。5.1.3測試環(huán)境測試環(huán)境分別使用了2種客戶端，分別是蘋果IOS移動端系統(tǒng)和安卓移動端系統(tǒng)。本次測試為相同軟件本版都為微信8.0區(qū)別在與不同系統(tǒng)、不同配置所對小程序的的環(huán)境是否能夠正常運行。測試環(huán)境表如表5.1所示。表5.1測試環(huán)境客戶端軟、硬件配置備注硬件軟件IOS移動端CPU：i12IOS14內(nèi)存：4G微信小程序存儲：128G微信8.0安卓移動端CPU：驍龍888MIUI13內(nèi)存：12G微信8.0存儲：1T微信小程序5.2功能測試掃碼測試，使用不同手機(jī)測試微信掃碼是否能夠打開HaiTer吉他社微信小程序，在使用個人中心頁面是否能否順利登錄用戶，登錄后用戶頭像以及名稱是否與微信名稱微信頭像一樣，用戶瀏覽商品是否能夠加入購物車，在使用購物車是否能刪除購物車?yán)锊幌胍纳唐?，以及進(jìn)行支付功能。功能測試用例表如表5.2所示。表5.2功能測試用例表編號測試項描述/輸入/操作期望結(jié)果實際結(jié)果1IOS端掃碼使用蘋果登錄微信掃碼小程序成功進(jìn)入小程序成功2IOS端用戶登錄在個人中心頁面進(jìn)行登錄，頭像以及名稱是否與微信頭像微信名稱一致登錄成功，微信頭像以及名稱與小程序內(nèi)一致頭像未能顯示出來，名字一致3IOS端用戶購物車測試在分類里面添加商品，在購物車?yán)锩鎰h除用戶不需要的商品，并且進(jìn)行支付跳轉(zhuǎn)功能能夠顯示所加入購物車商品，能夠刪除購物車?yán)飽|西，能夠跳轉(zhuǎn)出支付界面成功4IOS端用戶支付功能測試用戶支付成功和是否能支付失敗當(dāng)商品價格>用戶余額支付失敗，商品價格<用戶余額支付成功成功5IOS導(dǎo)航欄跳轉(zhuǎn)測試用戶點擊導(dǎo)航欄是否能夠準(zhǔn)確跳轉(zhuǎn)相應(yīng)頁面成功跳轉(zhuǎn)頁面成功6安卓端掃碼使用安卓登錄微信掃碼小程序成功進(jìn)入小程序成功7安卓端用戶登錄在個人中心頁面進(jìn)行登錄，頭像以及名稱是否與微信頭像微信名稱一致登錄成功，微信頭像以及名稱與小程序內(nèi)一致成功8安卓端用戶購物車測試在分類里面添加商品，在購物車?yán)锩鎰h除用戶不需要的商品，并且進(jìn)行支付跳轉(zhuǎn)功能能夠顯示所加入購物車商品，能夠刪除購物車?yán)飽|西，能夠跳轉(zhuǎn)出支付界面成功9安卓端用戶支付功能測試用戶支付成功和是否能支付失敗當(dāng)商品價格>用戶余額支付失敗，商品價格<用戶余額支付成功成功10安卓導(dǎo)航欄跳轉(zhuǎn)測試用戶點擊導(dǎo)航欄是否能夠準(zhǔn)確跳轉(zhuǎn)相應(yīng)頁面成功跳轉(zhuǎn)頁面成功5.3兼容性測試本次兼容性測試主要針對于不同手機(jī)型號是否能夠兼容HaiTer吉他社小程序，這次測試使用三個品牌手機(jī)小米手機(jī)、蘋果手機(jī)、華為手機(jī)。不同的手機(jī)都用的是不同的系統(tǒng)不同的分辨率。在測試中都成功完成HaiTer吉他社小程序的運行。兼容性測試用例表如表5.3所示。表5.3兼容性測試用例表配置說明操作系統(tǒng)應(yīng)用軟件分辨率結(jié)果華為p7鴻蒙7微信8.0375/667成功小米10sMiui13微信8.0375/812成功蘋果12Ios14微信8.0375/812成功5.4測試結(jié)論本系統(tǒng)經(jīng)過功能測試和兼容性測試后，各個模塊的功能正常運行，達(dá)到了系統(tǒng)設(shè)計時的預(yù)期結(jié)果，測試過程中發(fā)現(xiàn)了一些問題并對問題及時做出修改，軟件運行更加可靠、穩(wěn)定。最終得到了符合要求的高效率的吉他小程序。

6總結(jié)與展望6.1總結(jié)本次的畢業(yè)設(shè)計中，HaiTer吉他社小程序經(jīng)歷了幾個月時間也順利開發(fā)完成。在開發(fā)一個在微信小程序上面從未有一個吉他學(xué)習(xí)與吉他商品購買綜合的一個微信小程序。本次開發(fā)了大部分使用了vue框架、JavaScript腳本語言、wxml語言、css語言、使用了uni-app小程序文件、uni_modules和阿里云開發(fā)，實現(xiàn)了用戶可以在微信小程序上面體驗一款學(xué)習(xí)以及購物綜合的吉他學(xué)習(xí)購物小程序。實現(xiàn)了小程序上面看視頻，將自己喜歡的東西添加到自己的購物車?yán)锩妫顚懽约旱氖肇浀刂?，實現(xiàn)了用戶登錄退出。這次的畢業(yè)設(shè)計主要學(xué)會了自主學(xué)習(xí)。以前很多沒有想到過的事情，最后發(fā)現(xiàn)都能夠通過自己不斷的學(xué)習(xí)，虛心問教。都可以能夠得到解決。也讓自己收獲了自信心。再去面對一些棘手的問題，千萬不要選擇抱怨，而是要選擇去如何解決。6.2展望這次的微信小程序開發(fā)有很多地方不完善。由于從來沒有學(xué)過美化以及微信小程序開發(fā)。所以在一些美觀設(shè)計上面并沒有做到特別的漂亮。只是實現(xiàn)了一些基本的功能。由于微信小程序的商戶特定性，想要公開小程序需要商家的營業(yè)執(zhí)照以及工商執(zhí)照所以在這次開發(fā)中沒有辦法發(fā)行HaiTer小程序和線上支付功能，這個是開發(fā)的一大遺憾。原本計劃是在HaiTer吉他社微信小程序?qū)崿F(xiàn)用戶互交功能?？上б驗殚_發(fā)途中的經(jīng)驗不足在現(xiàn)在沒有辦法去實現(xiàn)。在這次的開發(fā)中，太過于依賴微信小程序里面現(xiàn)有的功能，沒有過多于自己去開發(fā)獨特的功能出來。也是本次開發(fā)的遺憾。在未來的開發(fā)中將會把HaiTer吉他社進(jìn)行更進(jìn)一步的完善，實現(xiàn)小程序的發(fā)行，調(diào)動微信小程序的線上支付功能，實現(xiàn)用戶評價。在對小程序進(jìn)一步的去美化。

參考文獻(xiàn)譚賢.微信搜索優(yōu)化與引流實戰(zhàn)[M].人民郵電出版社:,201712.253.毛慧,李金城,劉浩,黃佳.基于“微信小程序”的海外移動健康管理平臺設(shè)計及安全生產(chǎn)應(yīng)用[J].石油石化綠色低碳,2021,6(04):71-76.

禹堯

.

微信公眾號互動功能開發(fā)及設(shè)計

[J].電子技術(shù)與軟件工程

,2020,11:42-43支付寶上線境外打車小程序,首批覆蓋10個國家33座城市[J].人民交通,2019(07):8.顧煜新,蔣鴻溧,李妍.樂校吧微信小程序的設(shè)計開發(fā)與實現(xiàn)[J].絲網(wǎng)印刷,2023(05):67-70.DOI:10.20084/ki.1002-4867.2023.05.016.郭艷華.基于Vue框架的海量數(shù)據(jù)處理系統(tǒng)設(shè)計[J].信息與電腦(理論版),2022,34(23):16-18.劉明洋,汪鴻俊,任小蕾.微信小程序?qū)崙?zhàn)入門[M].人民郵電出版社:,201710.429.陳偉.微信小程序開發(fā)實戰(zhàn)[M].人民郵電出版社:,201709.218.劉剛.微信小程序開發(fā)圖解案例教程[M].人民郵電出版社:,201705.357.李寧.微信小程序開發(fā)入門精要[M].人民郵電出版社:,201705.241.姚麗娟,羅宏偉,丑晨,楊成興.基于微信小程序的智慧校園導(dǎo)航系統(tǒng)研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用,2023(03):48-50.單月忠,嚴(yán)峰.基于移動端醫(yī)療設(shè)備固定資產(chǎn)小程序的開發(fā)及應(yīng)用[J].醫(yī)療裝備,2023,36(03