本科畢業論文（設計）-40-緒論1.1研究背景隨著信息時代的發展，傳統的網上購物方式必將迎來瓶頸，人們要想網絡購物需得下載專門的購物APP；這些APP不僅占據手機的內存，也使得手機界面不夠干凈簡潔；給追求快節奏、簡約理念的社會群體帶來不少煩惱。而這時我們選擇微信小程序購物，靠著基本人手一個微信APP，依托大量的微信用戶。無需下載節省空間且操作便捷，下拉即用，用完即收。完全不會影響微信的正常使用且十分快捷，完全符合當代社會群體的生活節奏。而且伴隨電子商務的興起，我們將電商與農業相結合，相較于以往農產品受困于閉塞傳統的銷售模式，從而導致農產品積壓變質。本課題通過將農產品上架微信小程序商城進行推廣和售賣；渠道廣，客流量大；大大的提高了農產品的銷量，流通范圍不在拘泥于一小塊區域，而是全國各地。且農產品的有效輸出也為當地樹立了一個好的形象，成為當地特色的明信片。農產品搭上新興互聯網的列車，定會碰撞出非凡的火花，做出卓越的成就。商品線上銷售是互聯網電子商務在銷售行業中的必然結果，而微信小程序這種新型快捷的百貨商品銷售形式越來越受人們的歡迎，且正在以不可阻擋的氣勢替代著線下的銷售模式。其與傳統銷售模式相比擁有許多優勢。例如足不出戶就能獲取最新的產品信息，實現商品的線上購買；操作便捷靈活。深受人們歡迎。1.2國內外研究現狀1.2.1國內現狀數據來源于權威第三方統計平臺阿拉丁研究所REF_Ref13533\r\h[1]。可以說微信小程序已經在全面爆發生態能力，無論是在垂直電商領域深耕，還是公眾號、視頻號、企業微信的互聯互通繼續推進企業數字化轉型和私域建設領域，都能看到小程序所具備的巨大商業潛力REF_Ref26799\r\h[2]。現在小程序已經成為企業品牌數字轉型標配，之前阿拉丁預計2022年小程序DAU將突破5億，而事實上上半年就完成日活突破5億這一期望指標。阿拉丁在預計今年小程序將創近3萬億GMV，微信電商GMV未來三年可破十萬億。小程序憑借微信，輕松坐擁12億微信用戶群體，應該是國內最大的用戶池，從商家運營角度來說，運營小程序不需要像APP那樣花費更多人力物力去搭建獲取用戶渠道，借助小程序觸達和獲取線上用戶的門檻更低，用戶路徑和交易轉化更快。同時，目前小程序在網絡購物和生活服務兩大類中占比較高，而健康、線下零售類、娛樂游戲等行業市場上還沒有達到需求飽和狀態。流量+社交的新營銷模式，讓商家更容易沉淀自己的流量池。1.2.2國外現狀從新加坡到柏林，從東南亞到歐洲，小程序成出境游必備“利器”。在實踐研究中，國外的Facebook也曾開發過一個類似于微信小程序的應用工具。但由于早期的開發平臺上各種應用水平參差不齊，加上網速、Web端技術不成熟等原因，導致了Facebook沒能成為如微信一樣的應用程序集散地。為了突破發展瓶頸，Facebook在之前的研究基礎上開發了游戲、測驗、繪圖等社交中的附加功能，并同時發布了新型聊天bot。通過bot用戶可以隨意進入其它App的入口，使得應用與操作系統的界限開始變得模糊。2016年11月Facebook推出了InstantGames,它允許用戶在無需下載App的情況下玩一系列HTML5游戲。由于這類游戲的進程較短，用戶可以在等待好友消息回復的時候開始一局游戲，而當收到消息的時候又能快速切回到消息界面。2017年4月，Facebook又為用戶開放了第三方的擴展程序，并試圖將應用與Facebook的功能相互連接起來，此時，這類擴展程序已是多種App的集合入口，最終成為了真正意義上的Facebook“小程序”REF_Ref22292\r\h[3]。1.3本文研究內容課題主要是運用JavaScript技術和uni-app框架實現醉美通江農產品超市小程序，該小程序面向的用戶是廣大的人民群眾,在設計該小程序時，要做到操作簡單，流程快捷。本系統總共分為用戶、商品、支付、購物車、搜索、收貨地址各個大模塊，各個大模塊還包含有小的模塊REF_Ref12087\r\h[4]。在本系統當中對于用戶的類型可以分為兩類：未登錄授權用戶，已登錄授權用戶。未登錄授權用戶只可以做頁面的瀏覽，而已登錄授權用戶可以進行頁面的商品詳細查看和購買操作，從而來進行系統的日常維護和確保用戶的數據安全，如果系統需要做任何的活動優惠只能由系統的管理員在服務器數據庫中來進行操作，其余的角色都不能進行。1.3.1論文結構本文主要分為以下幾個部分：第一部分是緒論部分，簡要概述此系統的項目背景和目前的發展概況。第二部分是該系統使用的技術和工具部分，主要描述實現該系統所要用到的軟件和技術。第三部分是該系統的可行性分析，從理論上分析系統的需求，模塊等，分析產品的可行性。第四部分是該系統的系統設計部分，介紹系統架構設計和數據庫設計。第五部分是系統的測試部分，測試系統的各種模塊功能。第六部分是總結與展望，總結系統設計和開發過程中的問題REF_Ref27452\r\h[5]。1.3.2研究方法及手段文獻收集法：查閱與微信開發者工具相關的文獻和技術資料，了解當前留下的開發技術。查看相關功能的設計方法和知識原理。面向對象開發方法：以對象建模為基礎，自底向上和自頂向下相結合的開發方法，徹底解決一些開發方法存在的嚴重問題。UML(UnifiedModelingLanguage)為面向對象軟件設計提供統一的、標準的、可視化的建模語言，用于項目的分析金額設計階段。系統分析2.1可行性分析2.1.1經濟可行性分析現在提及速度就會想到中國的高鐵，在另一方面也有不小的成績，比如中國的基站建設，現在中國基本普及5G基站的使用了，這些基站也是中國網絡速度的基點，當整片網絡聯通的這些點都是網絡高鐵的物質橋梁。網絡的速度離不開一個東西，那就是流量，這里的流量是上網時候的剛需；還有在網絡上網站里面的訪問量、點擊量等等。現在社會不斷進步發展，人們的物質條件都好了幾乎一個人手里就有一部手機，現在智能手機操作簡單普及率也廣。但是人們生活節奏逐漸加快，網上購物就成了一種普遍消費方式，所有從經濟方面是可行的。2.1.2技術可行性分析本系統采用基于C/S架構模式開發的微信軟件上進行開發，即客戶端/服務器模式，只需要用戶下載安裝微信APP軟件打開本小程序即可進行操作（有網即可調用數據接口）。項目開發工具采用的是HBuilderX。HBuilderX在程序員開發界被廣大程序員公認為是最好的用于小程序開發的工具，HBuilderX軟件它在智能代碼助手、代碼自動提示、重構、uni-app支持、各類版本工具、代碼分析。因此從技術方面本系統使用HBuilderX工具進行開發在技術上是可行的。系統在模擬運行環境上選擇微信開發者工具進行模擬器運行，在微信開發者工具上面可以完美的選擇不同模擬機進行項目預覽，但是在微信開發者工具上面實際發布的時候主包資源大小不能超過20M（主包+分包），單個分包大小不能超過2M。所以對于圖片等資源必須存儲在服務器上面，項目通過對服務器發送數據請求來加載數據。因此從技術方面本系統使用微信開發者工具進行模擬運行與調試，通過對服務器發送數據請求方式來加載頁面數據也是可以行的通的，所有從技術方面是可行的。2.1.3操作可行性分析在用戶進入微信后，通過微信APP的搜索功能可以直接搜索到本小程序，用戶可以在不登錄的情況下對小程序首頁進行瀏覽，用戶瀏覽到滿意的商品的時候可以點擊添加到購物車，并在購物車中實際查看到剛添加進來的商品，也可在購物車頁面下拉屏幕進行收貨地址的添加，當用戶對添加到購物車中的商品進行付款購買的時候，系統會檢測用戶有無登錄，當用戶未登錄的時候會提醒用戶進行一鍵登錄，當用戶登錄成功后即可進行結算，用戶登錄后可以在“我的”導航欄中進行點擊查看個人相關信息，也可以進行退出登錄操作，所以在操作方面上是可行的REF_Ref27514\r\h[6]。2.2需求分析2.2.1關鍵技術主要運用Vue框架做前端編頁面開發，頁面數據交互上面使用JavaScript語言進行邏輯編寫，運用uni-app框架做整個項目的搭建主體，HBuilderX為開發語言編寫工具，微信開發者工具用來做實際結果展示和項目編寫時的運行調試，通過get和post兩種不同的網絡數據請求方式對服務器發起項目資源的數據請求，通過scss/sass編譯語言進行頁面CSS樣式的編譯，通過使用GITEE管理項目工具對項目進行開發進度管控和項目版本管理，在醉美通江小程序中使用第三方包發起網絡數據請求，為規范項目的開發貼近實際企業開發模式，項目文件采用分包管理的方式進行分類，對重要功能進行自定義封裝，為貼近實際后期項目使用需求對主要組件進行自定義開發從而增強組件的通用性優化。2.2.2業務流程分析用戶通過微信APP搜索到醉美通江小程序，用戶搜索到醉美通江小程序點擊進入會直接加載到醉美通江小程序的首頁，首頁上會展示醉美通江小程序的重要內容推送展示，用戶也可以直接通過點擊首頁或分類導航頁面上面的搜索框對內容進行模糊搜索或精確搜索，并持久化的保存搜索歷史數據。可以通過點擊搜索歷史中的關鍵字進行商品列表的加載，在商品列表頁面可以進行下拉刷新或者上拉加載更多內容，當數據加載到最后一項時會進行相應彈窗提示。用戶可以通過點擊首頁的分類圖標或者分類導航欄進入商品分類頁面，在商品分類頁面用戶可以通過左側導航欄進行商品篩選或者搜索框篩選。當用戶點擊某件商品或者搜索出來的信息數據時可以進入該商品的詳情頁面，在商品的詳情頁面用戶可以看見關于商品的完整信息也可以點擊輪播圖進行商品的大圖展示，用戶如果對該商品滿意可通過點擊添加購物車圖標把商品添加進入自己的購物車，用戶購物車中的數量會在每個頁面進行實時更新顯示REF_Ref27629\r\h[7]。在購物車界面可以持久化保存用戶添加的商品，在購物車界面用戶可以看見自己曾經添加進來的商品也可以在對應商品上面進行快捷的數量變更，也可以把曾經添加進來的商品進行向右滑動點擊刪除按鈕進行刪除。當用戶選購好商品后會檢測用戶是否添加收貨地址，其次是否登錄。用戶點擊購物車界面的選擇添加收貨地址時會跳轉到添加地址界面，在收貨地址界面用戶可以進行歷史地址的快捷選擇或者添加新的地址，所有的地址信息都會進行持久化存儲，用戶選擇地址后會把地址信息加載回購物車界面的添加地址欄進行展示，用戶也可以對已經加載過來的地址信息進行重新選擇。當判斷用戶未登錄時會彈窗提示用戶先進行登錄并自動三秒鐘跳轉到一鍵登錄界面。用戶點擊一鍵登錄后會出現授權彈窗，當用戶點擊允許授權會跳轉到我的導航頁面，并把獲取到的用戶信息（頭像、微信昵稱）在我的頁面進行展示，并重新定向的跳轉回購物車界面，如果用戶點擊拒絕授權操作會依舊停留在一鍵登錄界面。用戶在我的界面可以進行退出登錄操作，并跳轉回一鍵登錄界面。2.2.3功能需求分析進行最新商品消息推送，商品分類導航欄方便用戶進行商品的選擇，不同模塊類型最新推薦展示。來提高對用戶的吸引力。搜索功能：在首頁或者分類點擊搜索導航欄后可以跳轉到該頁面。搜索功能提供模糊搜索、精確搜索兩種功能。以及關鍵字實時搜索推薦，搜索關鍵詞持久化存儲，搜索歷史點擊跳轉到商品列表頁面，歷史搜索關鍵字刪除等功能。來提高用戶的訪問效率。商品列表頁面功能：頁面會展示關鍵詞搜索相關的商品，每一頁每次網絡數據請求只加載10條相關商品數據，瀏覽完成后上拉屏幕可以再次發送新的網絡數據請求在加載10條相關商品數據，加載完最后的數據后會提示用戶數據已加載完，也可以進行下拉刷新頁面。商品詳情頁面功能：商品詳情頁面輪播圖循環展示商品圖片，點擊輪播圖片可以進行大圖展示且支持左右滑動，頁面底部添加購物車按鈕可以把商品添加到購物車并實時顯示購物車數量，當點擊購物車圖標可以跳轉到購物車界面。購物車頁面功能：添加的購物車商品會在這里進行展示，并進行持久化存儲，可進行對應商品數量快捷添加或減少，也可右滑商品列表點擊刪除按鈕進行商品購物車刪除，可以通過商品列表前面的選擇框進行商品購買選擇，并對選中商品數量和總價進行計算，可以通過點擊選擇收貨地址按鈕進行地址添加和選擇，點擊結算進行登錄狀態判定，未登錄就會彈出提示信息然后3秒后跳轉到一鍵登錄界面，已登錄就進行支付界面跳轉。收貨地址界面功能：購物車界面點擊選擇收貨地址按鈕后跳轉到本頁面。頁面會自動讀取到該手機里面存儲收貨地址，可以直接點擊使用，也可以通過右上角加號按鈕進行地址添加，地址信息會持久化存儲到本地REF_Ref27727\r\h[8]。一鍵登錄界面功能：點擊一鍵登錄后會彈出授權提示彈窗，點擊允許會跳轉到我的信息界面并對獲取的個人信息進行展示，并重定向會購物車界面進行支付，點擊拒絕會登錄失敗關閉彈窗REF_Ref18337\r\h[9]。我的頁面功能：頁面會展示授權成功獲取到的信息（微信頭像、微信昵稱）進行展示，可以進行退出登錄操作REF_Ref21550\r\h[10]。支付界面：登錄成功后點擊結算對選中商品進行結算調用微信支付接口進行支付，但由于微信官方需求工商局注冊商家運營執照限制故而暫時無法實現REF_Ref21475\r\h[11]。版本管理工具功能：項目使用GITEE版本管理工具進行項目管理，并對項目進度進行管控REF_Ref21253\r\h[12]。2.2.4性能需求分析商品列表頁面因商品數量眾多，為減少使用者的惡意操作發起大流量、多次數的網絡數據請求來增加系統運行負擔，采用節流閥和過濾器來判斷當前發起請求的時候是否還有網絡數據請求正在進行中，并限制每次網絡數據請求的請求商品數量。和通過使用組件的自定義方式來定義組件功能，并對重要組件進行封裝，保證軟件系統的安全性。從而實現性能優化REF_Ref14423\r\h[13]。2.2.5數據需求分析項目的商品數量眾多，數據資源體積很龐大，為減輕項目的運行需求以及符合小程序的發布規范，數據信息全部采取存放在服務器上進行存儲，通過向服務器發送數據請求的方式獲取服務器上的數據資源。2.2.6接口需求分析由于項目的數據資源存儲在服務器上，當每次項目需要調用資源時都會通過發送get和post方式對服務器的數據接口進行訪問，因此接口之間的數據傳遞和共享都要進行規范管理。2.2.7將來可能提出的需求分析為應對各類型季節，項目頁面的導航欄需要更換不同的樣式，這一塊需要單獨封裝和集成出來，商品詳細頁面的收藏功能后期根據實際情況需要進行集成開發，商品詳細頁面的立即購買功能需要進行補充開發實現，我的頁面商品訂單，商品購買記錄，訂單管理等都需要進行集成開發。系統設計3.1架構設計本系統采用JavaScript技術與VueX配合uni-app框架進行建設，有服務器和前端頁面分析的現象，系統商品圖片和商品信息存儲在服務器上，開發者工具上進行開發和調試。在系統的前端頁面中使用GET和POST方式對服務器中的商品數據進行數據請求，并在頁面中使用scss/sass編碼的方式編譯為css，在頁面中進行直接展示，需要修改商品信息的時候直接修改服務器上面的后端數據內容。后端運用最流行的Java語言進行管理頁面的編寫。軟件架構是該系統的一個或多個結構，由元素，外部元素屬性之間的關系組成。REF_Ref22206\h圖3.1系統架構圖圖3.SEQ圖3.\*ARABIC1系統架構圖3.2功能模塊設計根據本系統的功能需求分析可以得到如下功能。如圖3.2系統功能模塊圖所示：圖3.SEQ圖3.\*ARABIC2系統功能模塊圖3.2.1用戶登錄、退出、一鍵登錄、獲取個人信息權限用戶如果是第一次進入使用本小程序，可以瀏覽本小程序的基s本頁面內容，但要是想進一步了解就需要進行登錄，可以通過一鍵登錄按鈕，授權允許獲取個人基本信息，如微信昵稱、微信頭像等，當用戶拒絕授權，則停留在一鍵登錄界面。當成功獲取用戶信息后可以在我的頁面進行查看。如圖3.3登錄的程序流程圖所示：圖3.SEQ圖3.\*ARABIC3登錄的程序流程圖用戶如果是登錄成功后使用本小程序，可以在本小程序的頁面使用所有功能內容，但如果用戶在完成購買任務后需要進行個人授權信息的取消則需要取消登錄操作，可以通過導航欄我的進入頁面，點擊退出登錄按鈕，并點擊確定退出，則可以解除授權信息如微信昵稱、微信頭像等，并回到一鍵登錄界面，用戶下次購買需要重新進行授權登錄REF_Ref14489\r\h[14]。如REF_Ref12596\h圖3.4退出登錄的程序流程圖所示：圖3.SEQ圖3.\*ARABIC4退出登錄的程序流程圖3.2.2商品模塊醉美通江小程序的這一部分主要分為商品列表展示，商品大圖展示，商品下拉刷新，商品頁面詳細信息，商品上拉觸底提示這五個功能點，首先是商品列表展示功能，也是用戶進入到醉美通江小程序最重要的操作，用戶可以在系統里面進行查找想要的商品。第二是商品大圖展示這個功能是在進入商品詳細頁面后商品的輪播圖可以被點擊并放大圖片進行查看；第三是商品下拉刷新這一功能主要是在商品列表頁面當用戶需要對商品數據進行更新時可以下拉屏幕；第四是商品詳細信息，這一界面可以對商品的詳細信息進行展示，并對商品進行購物車的添加。如REF_Ref12841\h圖3.5商品查看程序流程圖所示：圖3.SEQ圖3.\*ARABIC5商品查看程序流程圖3.2.3購物車模塊該模塊里面用戶在頁面進行商品添加到購物車中，可以進入購物車查看是否有添加的商品，在頁面上觀察當前數量有無減少，顯示是否正確。如REF_Ref13242\h圖3.5商品添加到購物車流程圖所示：圖3.SEQ圖3.\*ARABIC6商品添加到購物車流程圖3.2.4搜索模塊用戶可以通過首頁和分類頁面進入到搜索模塊，用戶可以通過在搜索框中輸入商品的關鍵詞即可自動實時檢測出包含關鍵字的商品并推薦給用戶，當用戶點擊搜索時會跳轉到商品列表頁面進行推薦商品數據的加載顯示，并把輸入的關鍵字進行持久化數據保存下來，并顯示在搜索歷史欄中，也可以直接點擊搜索歷史的關鍵字搜索商品REF_Ref14512\r\h[15]。如REF_Ref13526\h圖3.6關鍵字搜索流程圖所示：圖3.SEQ圖3.\*ARABIC7關鍵字搜索流程圖3.2.5收貨地址模塊用戶進入購物車當點擊結算功能時會要求先填寫收貨地址，在收貨地址界面會自動獲取用戶手機中的收貨地址信息，也可以自己重新添加收貨地址信息。如REF_Ref13804\h圖3.7收貨地址流程圖所示：圖3.SEQ圖3.\*ARABIC8收貨地址流程圖3.3數據庫設計3.3.1概念模型設計E-R圖也稱實體-聯系圖，是表示概念關系模型的一種方式，提供了表示實體類型、屬性和聯系的方法，用來描述現實世界的概念模型REF_Ref7872\r\h[16]。用戶模塊，各個實體有（編號、性別、頭像、登錄時間、退出登錄時間、token）如下REF_Ref23886\h圖3.9用戶詳情E-R圖所示：圖3.SEQ圖3.\*ARABIC9用戶詳情E-R圖商品詳情模塊。全部商品提供了商品ID和商品名稱聯合查詢，并且展示商品ID、封面、名稱、價格、商品簡介、庫存以及所屬類目等信息REF_Ref26307\r\h[17]。如下REF_Ref24017\h圖3.10用戶詳情E-R圖所示：圖3.SEQ圖3.\*ARABIC10用戶詳情E-R圖訂單模塊，各個實體有（編號、價格、收件地址、收件名字、收件電話、支付狀態、下單時間、用戶ID）如REF_Ref23154圖4.13訂單E-R圖所示：圖3.SEQ圖3.\*ARABIC11訂單E-R圖3.3.2數據庫表的設計根據本小程序的實際使用和數據存儲的需求對數據庫進行設計，并把數據存儲在服務器上，通過網絡數據請求方式訪問接口來獲取數據。設定創建存儲用戶登錄時的用戶表，和存儲本小程序商品數據的商品表等，為了方便后期對產生訂單的訂單數據進行操作而建立的訂單表，各表之間存在相互管理和一對多的關系。存儲用戶登錄數據的用戶表詳情如REF_Ref23406\h表3.1用戶表所示：表3.SEQ表3.\*ARABIC1用戶表字段名稱數據類型字段大小是否主鍵字段說明user_idvarchar100是用戶IDuser_sexDouble11否用戶性別User_namevarchar255否用戶名字User_imagevarchar20否用戶頭像tokenInt11否用戶的唯一憑據存儲商品數據的商品表詳情如REF_Ref23524\h表3.2商品表所示：表3.SEQ表3.\*ARABIC2商品表字段名稱數據類型字段大小是否主鍵字段說明goods_idvarchar100是商品IDcat_idvarchar40否分類IDgoods_nameDouble10否商品名稱goods_pricevarchar40否商品價格goods_numberInt11否商品數量goods_big_logovarchar100否商品大圖標goods_small_logovarchar255否商品小圖標add_timevarchar255否商品添加時間cat_idvarchar10否所屬一級分類goods_introduceInt11否商品介紹picsvarchar255否商品圖片列表訂單表有以下實體，如下REF_Ref23566\h表3.3訂單表所示：表3.SEQ表3.\*ARABIC3訂單表字段名稱數據類型字段大小是否主鍵字段說明Idvarchar100是編號MoneyDouble11否價錢ReceiverAddressvarchar255否收件地址ReceiverNamevarchar20否收件名字ReceiverPhonevarchar20否收件電話PaystateInt11否支付狀態OrdertimeTimestamp11否下單時間User_idInt11否用戶ID系統實現4.1開發環境通過表格的形式給出系統開發所需的軟硬件環境，可以更鮮明的了解本微信小程序使用的硬軟件相關配置。本微信小程序基于uni-app框架進行開發，使用HBuilderX進行編寫代碼，微信開發者工具進行運行，選用訪問服務器數據庫的方式獲取數據，對于運行環境要求相對較低如下REF_Ref4996表4.1開發環境所示：表4.SEQ表4.\*ARABIC1開發環境軟件環境操作系統Windows10技術搭建JavaScript+VueX+uni-app+Vue2+Postman數據庫平臺服務器開發平臺HBuilderX3.7.3+微信開發者工具2.26.2硬件環境處理器驍龍8+Gen1內存8GB硬盤空間128GB4.2功能模塊實現4.2.1項目Git管理工具配置為了方便項目的管理，引入git管理工具進行項目的管理，為了在上傳代碼時uni-app中的資源包不被跟蹤故而在目錄中新建.gitignore

忽略文件，并進行本地配置。由于我們忽略了unpackage目錄中僅有的

dist目錄，因此默認情況下，unpackage目錄不會被Git追蹤。REF_Ref14326\h圖4.1忽略項目包。為了讓Git能夠正常追蹤unpackage目錄，在目錄下創建一個

gitkeep

的文件進行占位。REF_Ref14643\h圖4.2初次提交倉庫。并把項目托管到碼云。1.注冊并激活碼云賬號，2.生產并配置SSH公鑰，3.創建空白的碼云倉庫。4.把本地項目上傳到碼云對應的空白倉庫中。REF_Ref15038\h圖4.3項目提交倉庫成功。圖4.SEQ圖4.\*ARABIC1忽略項目包圖4.SEQ圖4.\*ARABIC2初次提交倉庫圖4.SEQ圖4.\*ARABIC3項目提交倉庫成功4.2.2首頁實現創建首頁、分類、購物車、我的這4個tabBar頁面，并在pages.json

配置文件，新增

tabBar

的配置節點。REF_Ref15437\h圖4.4首頁實現方法。首頁輪播圖區域的實現，在data中定義輪播圖存放數據的swiperList列表，存放分類導航欄數據navList列表，存放樓層數據floorList列表，在onLoad生命周期函數中調用獲取輪播圖數據、分類數據、樓層數據的方法，在methods屬性中定義獲取輪播圖數據的getSwiperList()方法，定義獲取分類數據的getNavList()方法并綁定navClickHandler()事件函數實現點擊分類列表跳轉到分類頁面，定義獲取樓層數據的getFloorList()方法。REF_Ref15610\h圖4.5首頁頁面圖。圖4.SEQ圖4.\*ARABIC4首頁實現方法圖4.SEQ圖4.\*ARABIC5首頁頁面圖4.2.3分類頁面實現在頁面加載時onLoad生命周期函數調用methods屬性中getCateList()方法進行分類列表數據獲取，REF_Ref15887\h圖4.6分類頁面實現方法。在data中定義二級分類列表的數據節點cateLevel2列表把getCateList方法請求到的數據為二級分類列表數據賦值，在二級分類的

view

組件中，循環渲染三級分類的列表結構，三級分類的Item項綁定點擊事件處理函數goodsGoodsList()方法，實現點擊三級分類中的商品圖片跳轉到商品列表頁面。REF_Ref16028\h圖4.7分類頁面成功圖。圖4.SEQ圖4.\*ARABIC6分類頁面實現方法圖4.SEQ圖4.\*ARABIC7分類頁面成功4.2.4收搜模塊實現在項目根目錄components上創建自定義組件my-search組件，使自定義搜索組件的

背景顏色和圓角尺寸，可以通過props屬性定義bgcolor和radius兩個屬性，并指定值類型和屬性默認值，通過屬性綁定的形式，為.my-search-box

盒子和

.my-search-container

盒子動態綁定

style

屬性，并移除對應

scss

樣式中的

背景顏色和圓角尺寸，自定義組件內部，給類名為.my-search-box

的view綁定click事件處理函數，通過SCSS的樣式實現吸頂的效果，修改uni-search-bar.vue

組件，把data數據中的show和showSync的值，REF_Ref16687\h圖4.8搜索頁面實現方法。從默認的false改為true即可實現搜索框自動獲取焦點。搜索建議和搜索歷史的按需展示功能通過判斷當前搜索列表長度使用v-if和v-else控制這兩個區域的顯示和隱藏，使用JSON方法把數據持久化存儲在本地，并使用set集合和reverse方法去重和反轉列表。REF_Ref16965\h圖4.9搜索頁面實現。圖4.SEQ圖4.\*ARABIC8搜索頁面實現方法圖4.SEQ圖4.\*ARABIC9搜索頁面實現4.2.5商品列表實現基于master分支在本地創建goodslist子分支，用來開發商品列表相關的功能，調用getGoodsList方法獲取商品列表數據：將

goods_list

頁面中，關于商品item項相關的UI結構、樣式、data數據，封裝到my-goods組件中，在goods_list組件中，循環渲染my-goods組件即可，和data節點平級聲明filters過濾器節點用來處理商品價格，REF_Ref17478\h圖4.10商品列表組件實現方法。在data中定義isloading節流閥防止發起額外的請求，在請求數據前后，分別打開和關閉節流閥，為

view

組件，并綁定

click

點擊事件處理函數，定義goodsDetail事件處理函數點擊商品item項跳轉到詳情頁面。REF_Ref17687\h圖4.11商品列表成功頁面。圖4.SEQ圖4.\*ARABIC10商品列表組件實現方法圖4.SEQ圖4.\*ARABIC11商品列表成功頁面4.2.6商品詳情實現基于master分支在本地創建goodsdetail子分支，用來開發商品詳情頁相關的功能，REF_Ref18072\h圖4.12商品詳細頁面組件引用在onLoad中獲取商品的Id，并調用請求商品詳情方法在methods聲明getGoodsDetail方法，為輪播圖中的image圖片綁定click

事件處理函數實現輪播圖的預覽效果，在頁面結構中，使用rich-text組件，將帶有HTML標簽的內容，渲染為小程序的頁面結構，使用字符串的replace()方法，為img標簽添加行內的style樣式，從而解決圖片底部空白間隙的問題，使用字符串的replace()方法，將webp的后綴名替換為jpg的后綴名，用基于uni-ui提供的

組件來實現商品導航區域的效果，點擊商品導航組件左側的按鈕，會觸發uni-goods-nav的

@click

事件處理函數，事件對象e中會包含當前點擊的按鈕相關的信息跳轉到購物車頁面。REF_Ref18686\h圖4.13商品詳情成功頁面圖。圖4.SEQ圖4.\*ARABIC12商品詳細頁面組件引用圖4.SEQ圖4.\*ARABIC13商品詳情成功頁面4.2.7購物車實現基于master分支在本地創建cart子分支，用來開發購物車相關的功能，根目錄中創建

store

文件夾，REF_Ref18885\h圖4.14購物車實現Vuex構造。專門用來存放vuex相關的模塊，在

main.js

中導入

store

實例對象并掛載到Vue的實例上，在store.js模塊中，導入并掛載購物車的vuex模塊。封裝一個將商品信息加入購物車的mutations方法，命名為addToCart。根據提交的商品的Id，查詢購物車中是否存在這件商品，如果不存在，則findResult為undefined；否則，為查找到的商品信息對象，如果購物車中沒有這件商品，則直接push，如果購物車中有這件商品，則只更新數量即可。REF_Ref19166\h圖4.15添加購物車成功圖。圖4.SEQ圖4.\*ARABIC14購物車實現Vuex構造圖4.SEQ圖4.\*ARABIC15添加購物車成功圖通過mapState輔助函數，將Store中的cart數組映射到當前頁面中使用，在UI結構中，REF_Ref19430\h圖4.16購物車頁面實現方法。通過v-for指令循環渲染自定義的my-goods組件，為商品的左側圖片區域添加radio組件，封裝名稱為showRadio的props屬性，來控制當前組件中是否顯示radio組件，當點擊radio組件，希望修改當前商品的勾選狀態，此時用戶可以為my-goods組件綁定事件，獲取當前商品的

goods_id

和

goods_state，在mutations聲明updateGoodsState

方法，用來修改對應商品的勾選狀態更新購物車中商品的勾選狀態。為my-goods組件封裝uni-ui提供的NumberBox組件，動態為

NumberBox

組件綁定商品的數量值，封裝名稱為showNum的props屬性，來控制當前組件中是否示

NumberBox

組件，用到uni-ui的uni-swipe-action組件和uni-swipe-action-item組件來實現滑動刪除的UI效果，mutations節點中聲明removeGoodsById方法，從而根據商品的Id從購物車中移除對應的商品。REF_Ref19819\h圖4.17購物車成功頁面。圖4.SEQ圖4.\*ARABIC16購物車頁面實現方法圖4.17購物車成功頁面4.2.8登錄與支付實現基于

master

分支在本地創建

settle

子分支，用來開發登錄與支付相關的功能，點擊了結算按鈕之后，需要先后判斷是否勾選了要結算的商品、是否選擇了收貨地址、是否登錄。在

my-settle

組件中，為結算按鈕綁定點擊事件處理函數，組件的methods節點中聲明settlement事件處理函數settlement方法。user.js

模塊的

state

節點中，聲明

token

字符串，組件中，使用

mapState

輔助函數，從

m_user

模塊中將

token

映射到當前組件中使用，在

components

目錄中新建登錄組件和用戶信息組件，來實現在

my.vue

頁面中，實現登錄組件和用戶信息組件的按需展示。為登錄的

button

按鈕綁定

open-type

屬性，表示點擊按鈕時，希望獲取用戶的基本信。user.js

模塊的state節點中，聲明

userinfo

的信息對象，REF_Ref20208\h圖4.18userinfos映射使用方法。通過在methods中的方法saveUserInfoToStorage來持久化存儲用戶登錄數據。在

methods

中定義

getToken

方法，調用登錄相關的API，實現登錄的功能，調用登錄接口，換取永久的token。在購物車頁面，當用戶點擊“結算”按鈕時，在

my-settle

組件的

methods

節點中，聲明一個叫做showTips

的方法，專門用來展示倒計時的提示消息，如果用戶沒有登錄，則3秒后自動跳轉到登錄頁面。REF_Ref20779\h圖4.19一鍵登錄頁面成功圖。在自動跳轉到登錄頁面成功之后，把返回頁面的信息存儲到vuex中，從而方便登錄成功之后，根據返回頁面的信息重新跳轉回去，返回頁面的信息對象，主要包含{openType,from}兩個屬性，其中openType表示以哪種方式導航回之前的頁面；from表示之前頁面的url地址。REF_Ref21008\h圖4.20個人信息成功界面。圖4.18userinfos映射使用方法圖4.19一鍵登錄頁面成功圖圖4.SEQ圖4.\*ARABIC20個人信息成功界面系統測試5.1測試計劃5.1.1測試范圍與主要內容主要測試范圍為小程序頁面加載內容，頁面布局，頁面響應速度，頁面跳轉，頁面跳轉數據傳遞，功能按鈕作用已經小程序的兼容適配。5.1.2測試方法正因為黑盒測試僅僅對軟件的功能模塊進行測試，所以黑盒測試也稱為功能測試REF_Ref29879\r\h[18]。使用邊界值法把輸入條件規定范圍，取范圍的邊界的值作為測試用例的輸入數據。使用場景法把程序的實際運行環境進行模擬盡可能考慮到用戶使用場景進行用例設計。在頁面功能完善情況下，為后面性能測試打下測試基礎。5.1.3測試環境通過表格的形式給出系統測試所需的軟硬件環境，可以更鮮明的了解本微信小程序使用的硬軟件相關配置。本微信小程序基于uni-app框架進行開發，使用HBuilderX進行編寫代碼，微信開發者工具進行運行，選用訪問服務器數據庫的方式獲取數據，對于測試運行環境要求相對較低。REF_Ref1038\h表5.1測試環境表5.SEQ表5.\*ARABIC1測試環境軟件環境操作系統Windows10技術搭建JavaScript+VueX+uni-app+Vue2+Postman數據庫平臺服務器測試平臺HBuilderX3.7.3+微信開發者工具2.26.2硬件環境處理器驍龍8+Gen1內存8GB硬盤空間128GB5.2功能測試5.2.1一鍵登錄授權測試表5.SEQ表5.\*ARABIC2一鍵登錄授權測試編號功能項測試點預期結果測試結果1一鍵登錄授權點擊一鍵允許，允許登錄成功通過2點擊一鍵授權，取消登錄失敗通過測試分析最后結果當取消授權登錄提示：圖5.SEQ圖5.\*ARABIC1消授權登錄提示5.3兼容性測試性能測試是用戶需求、系統響應時間的需求，是否超出使用者所能承受的限度，它是對交易地、速度、效率等與時間有關的性能要求進行評估，以檢驗系統的性能滿足用戶的要求，并通過試驗證明系統能滿足預定的要求。總體上，各個功能模塊都能正常工作，系統的設計基本滿足了系統的要求；界面簡潔，操作簡單，系統易用。總體上，整個系統的研制過程很順利，各部分功能均得到了良好的應用。此項設計的發展將極大地促進和完成下一步的改善，并將使我們的系統性能得到進一步提高。5.4測試結論本小程序通過在微信開發者工具中模擬環境下進行測試，通過功能測試，本小程序各功能模塊功能正常。通過接口測試，本小程序各接口請求數據返回正常。通過代碼審查，本小程序符合編碼規范。通過兼容性測試，本小程序可以兼容安卓、蘋果不同機型。需求文檔中所描述的相應功能全部實現正常，通過測試已達到可發布測試標準。總結與展望為期三個多月的畢業論文寫作已經接近尾聲。在寫作過程中一路跌跌撞撞，最終也還算是圓滿；整個寫作的過程可以說是緊張而又充實的。10月初，在系部和指導老師的督促下完成了對論文題目的確定，隨后我們進行了線上開題答辯；在答辯過程中，老師們在聆聽了我們開題答辯中提到的行文思路、技術路線、整體框架過后。就我們不成熟的構思進行梳理，幫助我們明確論文的核心要素，充實論文的工作量。論文中出現的許多問題也在導師的指導下得到了及時的解決，慢慢的論文開始成型。3月到4月，主要是論文的修訂完善過程，通過與指導老師的不斷溝通，初稿基本完成，隨后便是查重降重的過程。在這個過程中我深刻的感受到了知識的強大，在論文的修改中我發現我們應該深入的探討問題，而不僅僅局限于表面，這樣創作出來的文章才是有所價值的。本篇論文主要運用到JavaScript語言、Vuex、uni-app技術、Vant框架，微信開發者工具、HBuilderX代碼編輯工具、GIT管理項目工具、MySQL數據存儲。在通過不斷地查閱資料后，我對這些知識也有了更深的理解，深刻明白除了搞清楚書本上現有的知識外，自學自鉆也是十分重要的。后者的過程往往更能產生強大的效果。參考文獻逯連靜,陳國榮,徐琳君.新媒體環境下科技期刊微信小程序應用探究[J].傳播與版權,2022(04):78-80.DOI:10.16852/ki.45-1390/g2.2022.04.025.王艷君,高宇乾.講座管理微信小程序的設計與實現[J].自動化技術與應用，2022,41(09):153-156.DOI:10.20033/j.1003-7241.(2022)09-0153-04.胡夢佳.微信小程序的場景化研究[D].武漢理工大學,2019.DOI:10.27381/ki.gwlgu.2019.002023.張春玲.移動APP下母嬰產品知識推廣平臺的設計與實現[D].中國地質大學(北京),2017.朱玉強,馬繼業,范翠麗.數字人文視域下圖書館實體展覽數字化推廣實踐——以搭建微信小程序框架下JSPWiki等為例[J].圖書館研究與工作,2022(09):33-37.康鮮菜.大學生綜合素質測評系統的設計與研究[J].信息與電腦(理論版),2018(15):50-52.常昊.基于微服務架構的建材電商的設計與實現[D].北京交通大學,2021.DOI:10.26944/ki.gbfju.2021.003241.胡玉鳳.網絡消費者在線購物車使用及放棄行為影響因素研究[D].西南交通大學,2013.李霞.基于微信小程序的高校新生預報到系統設計與實現[J].微型電腦應用,2022,38(07):12-15.于丁一.基于混合開發的手工藝品電子商務系統的設計與實現[D].北京郵電大學,2019.吳自力,徐苗桑,潘安.基于公眾號的小程序搭建與應用分析[J].中國數字醫學,2022,17(07):35-38+61