【基于微信小程序的團(tuán)購平臺設(shè)計(jì)5900字（論文）】

基于微信小程序的團(tuán)購平臺設(shè)計(jì)目錄TOC\o"1-2"\h\u21583基于微信小程序的團(tuán)購平臺設(shè)計(jì) 115166引言 1277991緒論 1125541.1開發(fā)背景 2310801.2可行性分析 2167982需求分析 276152.1系統(tǒng)功能分析 3248302.2用例建模 3283003系統(tǒng)設(shè)計(jì) 5259693.1主要技術(shù)簡介 5291223.2系統(tǒng)功能設(shè)計(jì) 6191373.3數(shù)據(jù)庫設(shè)計(jì) 1048954主要模塊的詳細(xì)設(shè)計(jì)及實(shí)現(xiàn) 1162424.1商品展示設(shè)計(jì) 1192634.2商品分類設(shè)計(jì) 12189344.3購物車管理設(shè)計(jì) 12269554.4個(gè)人信息設(shè)計(jì) 13217005系統(tǒng)測試 139295.1測試方案 14312635.2測試結(jié)果 14185805.3測試總結(jié) 1521971結(jié)論 16引言隨著手機(jī)慢慢走進(jìn)人們的日常生活，購物也可以在手機(jī)上實(shí)現(xiàn)。淘寶、京東等老牌電商APP占據(jù)著絕大數(shù)市場，其中充斥著各種商品，魚龍混雜，對于我們學(xué)生來講，購物體驗(yàn)并不算很好。網(wǎng)上商城更偏向于成人家庭化的商品分類，運(yùn)輸物流跨度較大，所以本文設(shè)計(jì)的大學(xué)團(tuán)購平臺將很好的解決這些問題。大學(xué)團(tuán)購平臺的出現(xiàn)將網(wǎng)上購物的范圍縮小，著眼于大學(xué)生的購物體驗(yàn)，專為學(xué)生提供商品，用最合適的價(jià)格做出最令人滿意的服務(wù)。1緒論1.1開發(fā)背景隨著手機(jī)在人們的生活里越來越重要，快捷的無線網(wǎng)絡(luò)，便攜的小巧機(jī)身，逐漸滲入了人們的日常生活中。微信小程序作為微信的開發(fā)應(yīng)用，其便捷之處十分出色，即搜即用，尤其是它在各個(gè)平臺的都能很好的兼容。微信小程序相比于APP同樣具有多樣性，如家政服務(wù)、打車、外賣餐飲等領(lǐng)域。在疫情環(huán)境下，大學(xué)生外出非常的不方便，學(xué)校的小超市往往不能夠滿足學(xué)生消費(fèi)的需求，而網(wǎng)購價(jià)格又不夠便宜，所以開發(fā)出了一款方便快捷又優(yōu)惠的大學(xué)團(tuán)購平臺就顯得尤為重要。1.2可行性分析微信小程序[1]具有快速開發(fā)動(dòng)態(tài)Web界面的功能，其設(shè)計(jì)模式為B/S基本結(jié)構(gòu),采用Java-Script、WxSS和WXML、JavaScript來請求后臺接口獲取數(shù)據(jù)。系統(tǒng)渲染層和邏輯層分別由兩個(gè)線程進(jìn)行管理:(1)渲染層:WebView線程里進(jìn)行界面渲染。(2)邏輯層:JS腳本由JsCore線程運(yùn)行。渲染層和邏輯層通過WeixinJsBridage在系統(tǒng)中進(jìn)行通信。雙線程模型是小程序框架與其它大多數(shù)前端Web框架的不同之處?；陔p線程模型，可以更好地管控環(huán)境，提高安全性。模型框架例圖如圖1-1所示。圖1-1模型框架例圖2需求分析2.1系統(tǒng)功能分析2.1.1功能性需求本選題研究的主要內(nèi)容是大學(xué)團(tuán)購平臺系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)。本文設(shè)計(jì)的大學(xué)團(tuán)購小程序系統(tǒng)的功能分別為商品推薦、商品分類、購物車、訂單結(jié)算、用戶信息管理。2.1.2系統(tǒng)核心業(yè)務(wù)學(xué)生進(jìn)入小程序后進(jìn)行微信驗(yàn)證登錄即可成功進(jìn)入本系統(tǒng)，用戶信息將與微信上的信息保持一致，無需額外修改。進(jìn)入主界面后，會有四個(gè)分頁：“首頁”、“分類”、“購物車”、“我的”。首頁主要展示一些推薦的商品，分類則是以商品的不同類別為商品分類存放以供查找方便。商品可以放入購物車內(nèi)進(jìn)行統(tǒng)一管理，也可以直接下單支付，下單支付可以選擇是否進(jìn)行拼單團(tuán)購，團(tuán)購需要達(dá)到一定數(shù)量才能完成團(tuán)購要求并發(fā)貨，而團(tuán)購也會享受到比單獨(dú)支付更好的優(yōu)惠。當(dāng)學(xué)生選擇所需商品時(shí)，可以調(diào)整商品的個(gè)數(shù)，然后將其添加到購物車中。系統(tǒng)的購物車功能模仿了實(shí)際超市的購物車功能。消費(fèi)者可以在購物車中添加、刪除、增加或減少商品，購物車可以列出商品的單價(jià)、數(shù)量、小計(jì)、優(yōu)惠和合計(jì)總額。用戶在個(gè)人信息里可以管理收貨地址，修改、新增或者刪除。在確認(rèn)收到貨物后，可以對貨物進(jìn)行評價(jià)，如貨物質(zhì)量、貨物色差、服務(wù)態(tài)度和物流速度等。評價(jià)的情況分為記分、書面評價(jià)和圖片評價(jià)。本選題完成時(shí)將會把設(shè)計(jì)的大學(xué)團(tuán)購平臺小程序各個(gè)功能模塊的實(shí)現(xiàn)，設(shè)計(jì)好小程序的主體UI界面和搭建通信接口。2.2用例建模2.2.1用例模型本文設(shè)計(jì)的系統(tǒng)用例是針對用戶學(xué)生，系統(tǒng)用例是描述了系統(tǒng)的功能。本系統(tǒng)用例圖如圖2-1所示。圖2-1系統(tǒng)用例圖2.2.2用例描述本文設(shè)計(jì)的平臺用例主要為三個(gè)部分。商品瀏覽用例，如表2.2所示表2.2商品瀏覽用例描述用例名稱商品瀏覽執(zhí)行者用戶前置條件無事件流1)掃描小程序二維碼，進(jìn)入大學(xué)團(tuán)購平臺小程序2)使用微信登錄3)點(diǎn)擊底部導(dǎo)航欄第一個(gè)“首頁”，瀏覽商品信息4)點(diǎn)擊商品圖片，進(jìn)入商品詳細(xì)信息頁面，瀏覽商品詳細(xì)信息拓展拒絕微信授權(quán)請求，系統(tǒng)進(jìn)入游客模式商品分類用例，如表2.3所示表2.3商品分類用例描述用例名稱商品分類執(zhí)行者用戶前置條件無事件流1)掃描小程序二維碼，進(jìn)入大學(xué)團(tuán)購平臺小程序2)使用微信登錄3)點(diǎn)擊底部導(dǎo)航欄第二個(gè)“分類”，瀏覽分類欄信息4)點(diǎn)擊想要查看的分類，進(jìn)入該分類下的商品頁面，瀏覽商品信息拓展拒絕微信授權(quán)請求，系統(tǒng)進(jìn)入游客模式購物車管理用例，如表2.4所示表2.4購物車管理用例描述用例名稱購物車管理執(zhí)行者用戶前置條件同意微信授權(quán)獲取公開信息登錄成功事件流1)點(diǎn)擊底部導(dǎo)航欄第三個(gè)“購物車”，瀏覽購物車信息2)勾選想要?jiǎng)h除的商品，點(diǎn)擊刪除可進(jìn)行批量刪除操作3)勾選想要下單的商品，調(diào)整數(shù)量，點(diǎn)擊下單可一起下單支付拓展未登錄的情況下無法使用購物車3系統(tǒng)設(shè)計(jì)3.1主要技術(shù)簡介3.1.1微信小程序微信小程序是一種在微信中運(yùn)行的應(yīng)用服務(wù)。微信小程序不需要用戶單獨(dú)安裝，只需要在微信中搜索關(guān)鍵詞或者掃描小程序二維碼打開使用。微信小程序開發(fā)者工具[2]里自帶小程序開發(fā)框架，小程序開發(fā)框架讓開發(fā)者的工作變得簡單、高效，讓開發(fā)者可以開發(fā)出具有原生APP體驗(yàn)的服務(wù)。框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。開發(fā)框架提供了一些基礎(chǔ)組件，開發(fā)者可以通過這些基礎(chǔ)組件提高開發(fā)效率?；A(chǔ)組件分為八大類：視圖容器、基礎(chǔ)內(nèi)容、表單、操作反饋、導(dǎo)航、多媒體、地圖、畫布。微信小程序開放上傳下載，可以將本地資源上傳到開發(fā)者服務(wù)器[2]。還能從本地相冊選擇圖片或使用相機(jī)拍照、預(yù)覽圖片和獲取圖片信息。微信小程序開放了幾個(gè)特殊接口：一為登錄接口，可以直接選擇使用微信賬號登錄，讀取微信用戶信息；二為支付接口，可以使用微信支付；三為模板消息，需要在小程序模板消息頁面申請并通過審核，點(diǎn)擊查看詳情僅能跳轉(zhuǎn)下發(fā)模板的該帳號的各個(gè)頁面，下發(fā)條件說明：一是支付，二是提交表單。微信小程序界面[4]功能十分全面：1）顯示消息提示框、隱藏消息提示框、顯示模態(tài)彈窗和顯示操作菜單。2）動(dòng)態(tài)設(shè)置當(dāng)前頁面的標(biāo)題、在當(dāng)前頁面顯示導(dǎo)航條加載動(dòng)畫和隱藏導(dǎo)航條加載動(dòng)畫3）創(chuàng)建一個(gè)動(dòng)畫實(shí)例，對動(dòng)畫的控制有旋轉(zhuǎn)、縮放、偏移、傾斜和矩形變形等。每個(gè)微信小程序都可以有自己的本地緩存，可以通過接口對本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。3.1.2MySQL數(shù)據(jù)庫數(shù)據(jù)庫是按照數(shù)據(jù)結(jié)構(gòu)來組織、存儲、管理數(shù)據(jù)的倉庫。MySQL數(shù)據(jù)庫是常用的關(guān)系型數(shù)據(jù)庫。網(wǎng)絡(luò)數(shù)據(jù)庫和層次數(shù)據(jù)庫很好地解決了數(shù)據(jù)的集中和共享問題，但是在數(shù)據(jù)獨(dú)立性和抽象級別上仍有很大欠缺。用戶對這兩種數(shù)據(jù)庫進(jìn)行存取時(shí)，依然需要明確數(shù)據(jù)的存儲結(jié)構(gòu)，支出存儲路徑。而關(guān)系數(shù)據(jù)庫就可以較好地解決這些問題，關(guān)系型數(shù)據(jù)庫模型是把復(fù)雜的數(shù)據(jù)結(jié)構(gòu)歸結(jié)為簡單的二元關(guān)系（即二維表格形式）。MySQL性能卓越、服務(wù)穩(wěn)定，開放源代碼且無版權(quán)制約，自主性及使用成本低。而且MySQL軟件體積小，需求低，安裝及維護(hù)成本低，現(xiàn)在市面上大小企業(yè)都會采用MySQL，普及層面很廣。MySQL支持多用操作系統(tǒng)，提供多種API接口，支持多用開發(fā)語言。3.2系統(tǒng)功能設(shè)計(jì)3.2.1商品信息展示當(dāng)學(xué)生進(jìn)入微信小程序時(shí)，會進(jìn)入到大學(xué)團(tuán)購平臺的主界面[8]。小程序會提醒是否使用微信登錄，申請讀取微信用戶信息，但不管是否使用微信登錄，都有權(quán)限查看系統(tǒng)主界面推薦的商品。學(xué)生可以在登錄后點(diǎn)擊所要查看的商品，進(jìn)入商品界面查看詳情。大學(xué)團(tuán)購系統(tǒng)的瀏覽商品用例圖如圖3.1。圖3.1瀏覽商品用例圖推薦商品展示功能分析如下:(1)進(jìn)入小程序無需登錄即可瀏覽商品。(2)當(dāng)頁面處于最上方時(shí)，下滑頁面可以刷新界面內(nèi)容。(3)點(diǎn)擊商品查看詳情信息，詳情信息包括商品名稱、商品圖片、商品介紹、商品價(jià)格、產(chǎn)品參數(shù)等。(4)在商品詳情頁面可以下單，選擇直接下單或者拼單團(tuán)購。也可以將商品放入購物車。3.2.2商品分類學(xué)生如果需要根據(jù)物品分類來查找商品，可以進(jìn)“分類”頁面查找所需分類。商品分類是將商品以常見的種類進(jìn)行分類存放，學(xué)生購物時(shí)只需找到想要的分類，就能找到想要的商品，極大地提升了學(xué)生的購物體驗(yàn)。大學(xué)生團(tuán)購系統(tǒng)的商品分類用例圖如圖3.2。圖3.2小程序商品分類用例圖商品分類[10]功能分析如下：(1)選擇左側(cè)的分類，右頁刷新出歸于此分類的商品信息(2)分類商品展示時(shí)，學(xué)生可以點(diǎn)擊想要查看的商品，跳轉(zhuǎn)帶商品詳情頁[11]，查看商品詳細(xì)信息。(3)在商品詳情頁面可以下單，選擇直接下單或者拼單團(tuán)購。也可以將商品放入購物車。3.2.3購物車管理學(xué)生登錄后可以將想要購買的物品加入購物車，選擇商品數(shù)量后將購物車[12]里的物品一起結(jié)算下單。購物車[13]功能分析如下：(1)學(xué)生可以將想要購買的商品添加到到購物車。(2)學(xué)生可以刪除掉購物車中的商品。(3)學(xué)生可以修改選中商品的訂購數(shù)量。(4)學(xué)生可以查看購物車中商品的總數(shù)量[14]。(5)學(xué)生選擇商品進(jìn)行下單結(jié)算。(6)學(xué)生可以在購物車中點(diǎn)擊想要查看的商品圖標(biāo)，跳轉(zhuǎn)到此商品的詳情頁。(7)當(dāng)學(xué)生已經(jīng)提交了訂單后，所提交訂單中的商品將不顯示在購物車中。大學(xué)團(tuán)購系統(tǒng)的購物車用例圖如圖3.3。圖3.3購物車用例圖3.2.4下單支付學(xué)生可以在購物車頁面勾選心儀的商品，一起進(jìn)行支付下單，通過微信支付[15]對訂單進(jìn)行付款。也可以在商品信息頁面選擇立即下單，使用拼單團(tuán)購或者單獨(dú)付款。大學(xué)團(tuán)購系統(tǒng)的下單支付用例圖如圖3.4。圖3.4用戶下單支付用例圖下單支付[16]功能分析如下:學(xué)生可以在購物車中下單，或者進(jìn)入商品詳情頁面下單。學(xué)生完善收貨人信息后，就能對訂單進(jìn)行付款，收貨人信息包括收貨地址、電話等信息。學(xué)生點(diǎn)擊下單，可以選擇單獨(dú)支付或者進(jìn)行拼單團(tuán)購支付，拼單團(tuán)購會對最近的拼單信息進(jìn)行顯示，顯示拼單所需人數(shù)以及現(xiàn)有人數(shù)。單獨(dú)支付商家會立即收到并發(fā)貨，拼單團(tuán)購則會達(dá)到數(shù)量要求后商家才會發(fā)貨。對生成的訂單點(diǎn)擊付款，使用微信支付即可。3.2.5個(gè)人信息管理個(gè)人信息管理[18]的頁面主要功能為查看和管理收貨地址信息、訂單信息。大學(xué)團(tuán)購系統(tǒng)的個(gè)人信息管理用例圖如圖3.5。圖3.5用戶個(gè)人信息管理用例圖個(gè)人信息管理功能需求分析如下:(1)微信授權(quán)登錄后可以顯示微信頭像和微信昵稱。(2)學(xué)生可以管理收貨地址信息，包括收貨人姓名，收貨人電話，收貨人地址等。(3)學(xué)生可以查看所有訂單以及待付款、待收貨和退款\退貨的訂單。(4)點(diǎn)擊要查看的訂單，跳轉(zhuǎn)到訂單詳情頁面，會顯示訂單信息。3.3數(shù)據(jù)庫設(shè)計(jì)3.3.1概念結(jié)構(gòu)設(shè)計(jì)本文設(shè)計(jì)的數(shù)據(jù)庫概念結(jié)構(gòu)圖如圖3.6所示。圖3.6系統(tǒng)概念結(jié)構(gòu)設(shè)計(jì)圖3.3.2邏輯結(jié)構(gòu)設(shè)計(jì)本文設(shè)計(jì)的系統(tǒng)數(shù)據(jù)庫的邏輯結(jié)構(gòu)設(shè)計(jì)如下：用戶（用戶名，用戶編號，用戶電話，…）購物車（商品編號，商品名稱，數(shù)量，…）訂單（訂單編號，總金額，收貨人，收貨地址，收貨電話，狀態(tài)，…）商品（商品編號，商品名稱，價(jià)格，類型，描述，圖片，庫存，…）3.3.3物理結(jié)構(gòu)設(shè)計(jì)大學(xué)團(tuán)購平臺系統(tǒng)數(shù)據(jù)庫的物理結(jié)構(gòu)設(shè)計(jì)采用微信公眾平臺[19]的云開發(fā)技術(shù)。云開發(fā)提供了的JSON數(shù)據(jù)庫，云開發(fā)也能夠?qū)崿F(xiàn)上傳文件到云端和云端下載的能力。4主要模塊的詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)4.1商品展示設(shè)計(jì)系統(tǒng)導(dǎo)航欄的第一個(gè)，即為商品展示，系統(tǒng)會推薦一些學(xué)生常買的商品，并依次展示各個(gè)商品的主要信息，如圖片、名稱、簡單介紹。頁面上方為搜索欄，以商品名稱為索引，精確查找到用戶所需要的商品。商品信息展示界面圖為圖4.1。圖4.1商品信息展示界面圖4.2商品分類設(shè)計(jì)商品分類設(shè)計(jì)是將各種商品進(jìn)行分類，以幾種常見大類為主，其中再細(xì)分出小類，方便用戶通過類別查找，精準(zhǔn)定位到想要的商品，提高商品查找的效率[20]，同時(shí)，更方便用戶找到更感興趣的商品。商品分類界面圖為圖4.2。圖4.2商品分類界面圖4.3購物車管理設(shè)計(jì)購物車首先展示已加入購物車的商品的信息，包含配圖、品名、價(jià)格、數(shù)量。購物車?yán)锬軐ι唐愤M(jìn)行一些操作，包含商品多選、修改數(shù)量、刪除商品、購物車商品結(jié)算。下面的金額展示選中的商品優(yōu)惠后的總價(jià)，方便用戶進(jìn)行購買決策。購物車管理界面圖為圖4.3。圖4.3購物車管理界面圖4.4個(gè)人信息設(shè)計(jì)個(gè)人信息最上方為登錄信息，顯示微信頭像和昵稱。昵稱下方為收藏和瀏覽的店鋪與商品，再下方為“我的訂單”，顯示所有訂單，以及處理中的訂單信息，可以管理用戶自己的訂單。再下方為收貨地址管理，可以管理自己的收貨地址，底部為客服聯(lián)系方式和意見反饋以及產(chǎn)品信息。個(gè)人信息界面圖為圖4.4。圖4.4個(gè)人信息界面圖5系統(tǒng)測試5.1測試方案對本系統(tǒng)的測試按照以下步驟進(jìn)行:1）測試學(xué)生登錄小程序時(shí)微信微信授權(quán)登錄信息進(jìn)行登錄的功能。2）測試商品分類的功能，查看商品是否按照種類進(jìn)行分類。3)測試購物車的管理功能是否完善。4)測試下單支付能否跳轉(zhuǎn)到微信付款。5)測試用戶的地址管理能否微信授權(quán)獲取微信定位。5.2測試結(jié)果5.2.1微信授權(quán)測試表5.1微信授權(quán)測試用例名稱微信授權(quán)測試目的測試微信小程序的微信授權(quán)登錄信息的功能。測試前提第一次微信上打開本文設(shè)計(jì)的微信小程序。測試流程1)掃描小程序二維碼進(jìn)入主頁面。2)微信請求授權(quán)獲取公開信息，選擇允許。預(yù)期結(jié)果微信登錄成功，讀取微信個(gè)人信息。最終結(jié)果最終結(jié)果與預(yù)期結(jié)果一致。5.2.2查找分類測試表5.2查找分類測試用例名稱查找分類測試目的根據(jù)商品種類查找想要的商品。測試流程進(jìn)入商品分類頁面，選擇想要查看的分類。預(yù)期結(jié)果對應(yīng)的商品會出現(xiàn)在分類里最終結(jié)果最終結(jié)果與預(yù)期結(jié)果一致。5.2.3購物車管理測試表5.3購物車管理測試用例名稱購物車管理測試測試流程1)將商品加入到購物車，返回購物車頁面刷新2)查看購物車商品，勾選部分點(diǎn)擊刪除預(yù)期結(jié)果加入的商品出現(xiàn)在購物車，將商品刪除后刷新，商品不顯示