1.1 選題背景

坐擁12億的用戶基數(shù)[1]的微信可以說(shuō)是行業(yè)龍頭，這些年來(lái)，傳統(tǒng)電商形式的網(wǎng)上購(gòu)物飛速發(fā)展，電商形式的購(gòu)物以及該融入人們生活當(dāng)中。而社區(qū)團(tuán)購(gòu)，則是基于傳統(tǒng)電商的基礎(chǔ)，新發(fā)展出的網(wǎng)購(gòu)模式，并且十分有前景，適合當(dāng)下這個(gè)時(shí)期，發(fā)展迅速。社區(qū)團(tuán)購(gòu)對(duì)于傳統(tǒng)的電商模式來(lái)說(shuō)，并不是在新的APP上或者PC端網(wǎng)站上進(jìn)行購(gòu)物，而是在微信里發(fā)展客戶，通過(guò)每一個(gè)微信群里發(fā)展一個(gè)團(tuán)長(zhǎng)，以家庭為單位，每一戶可以在小程序里把想要購(gòu)買的商品加入購(gòu)物車，第二天由團(tuán)長(zhǎng)統(tǒng)一配送。為了順應(yīng)線上購(gòu)物的形式以及當(dāng)下的這樣的一個(gè)疫情時(shí)期，還有每家每戶對(duì)日常用品的需要和對(duì)生鮮產(chǎn)品的剛需，實(shí)現(xiàn)便民快捷實(shí)惠的社區(qū)團(tuán)購(gòu)微信小程序是非常有必要的。小程序?qū)τ谟脩糇畲蟮膬?yōu)勢(shì)在于無(wú)須安裝，用完即走，節(jié)省內(nèi)存，且從微信入口直接下單無(wú)需跳轉(zhuǎn)方便快捷，甚至登錄信息獲取和喚起微信支付都很順暢，小程序的體驗(yàn)已經(jīng)幾乎接近APP了，很大程度上解放了用戶的手機(jī)內(nèi)存，手機(jī)內(nèi)存是有限的，就算有1T的內(nèi)存，總有用完的時(shí)候，所以很多用戶都愿意下滑微信使用小程序而不是再下載一個(gè)APP，通過(guò)小程序來(lái)實(shí)現(xiàn)自身的需求。至今，很多商家不僅上線了APP，同時(shí)APP也與小程序同步，商家逐漸開始擁抱微信小程序。
第二，由于疫情原因，對(duì)于各地區(qū)的影響也是十分巨大，防疫期間，盡量避免人與人的接觸是很也必要的，同時(shí)也為用戶帶來(lái)了極大的便利，既實(shí)惠又方便，也有助于全民防疫。

三，團(tuán)購(gòu)享受方便實(shí)惠的同時(shí)，更有折上折的優(yōu)惠，使得商家的商品方便別銷售，也讓用戶享受到更大的優(yōu)惠。[3]

1.2 研究前身、現(xiàn)狀及發(fā)展趨勢(shì)

在整合、微商、移動(dòng)支付成熟的基礎(chǔ)上，2016年湖南長(zhǎng)沙地區(qū)誕生了第一個(gè)社區(qū)團(tuán)購(gòu)集團(tuán)。初期階段，社區(qū)團(tuán)購(gòu)的運(yùn)營(yíng)模式是團(tuán)長(zhǎng)和微信團(tuán)購(gòu)等運(yùn)營(yíng)商一起推廣和展示產(chǎn)品。最常見(jiàn)的是接龍拼團(tuán)，通過(guò)手動(dòng)會(huì)計(jì)的方式記賬，預(yù)倉(cāng)庫(kù)模型出現(xiàn)。貨款也由團(tuán)長(zhǎng)統(tǒng)一收齊交給供應(yīng)商。在這個(gè)初期階段，社區(qū)集體采購(gòu)庫(kù)存量有限，經(jīng)營(yíng)收入難以增加。2017年，微信小程序問(wèn)世。與傳統(tǒng)的電子商務(wù)網(wǎng)站和APP相比，具有更強(qiáng)的社會(huì)屬性，具有方便客戶接觸、傳遞共享、內(nèi)容營(yíng)銷等特點(diǎn)，迅速成為電子商務(wù)的寵兒。小程序的發(fā)布有利于提高交易效率的社區(qū)團(tuán)購(gòu)，對(duì)于增加企業(yè)采購(gòu)庫(kù)存和減輕社會(huì)負(fù)擔(dān)，一些企業(yè)采購(gòu)負(fù)責(zé)人的社會(huì)中心逐漸轉(zhuǎn)向小程序。2018年，微信小程序快速發(fā)展，社區(qū)團(tuán)購(gòu)?fù)ǔＪ褂眯〕绦蜃鳛橹饕牟僮鞴ぞ?。與此同時(shí)，微信群、微信支付等的成熟，商業(yè)集團(tuán)內(nèi)部的以微信小程序?yàn)橹鞯纳鐓^(qū)團(tuán)購(gòu)在2018年夏天登場(chǎng)，與無(wú)人貨架相比更受資本追捧。2019年，由于供應(yīng)鏈的脆弱性、秋季潮流、資金鏈斷裂等因素，產(chǎn)業(yè)開始交叉整合，許多平臺(tái)倒閉破產(chǎn)、一體化融合的社區(qū)團(tuán)購(gòu)?fù)顺鼋?020年下半年開始，幾乎消失的社區(qū)團(tuán)購(gòu)將重新登場(chǎng)并活躍起來(lái)。城市先發(fā)制人的產(chǎn)品種類繁多，經(jīng)濟(jì)發(fā)展迅速，已經(jīng)達(dá)到上限，收入差距難以找到。此后，主要電子商務(wù)平臺(tái)開始關(guān)注市場(chǎng)崩潰，尋找利潤(rùn)。傳統(tǒng)的電子商務(wù)平臺(tái)在服裝、食品、醫(yī)藥、電器、護(hù)理等領(lǐng)域已經(jīng)具有很高的滲透率。但在食品生鮮市場(chǎng)領(lǐng)域，滲透率很低，發(fā)展空間巨大。一旦搶先占領(lǐng)了市場(chǎng)，將優(yōu)先獲得一大比的利潤(rùn)。生鮮的市場(chǎng)領(lǐng)域成為各大型電子商務(wù)平臺(tái)的競(jìng)爭(zhēng)平臺(tái)。如今，從百團(tuán)大戰(zhàn)到”拼美淘”三分天下，均預(yù)示著社區(qū)團(tuán)購(gòu)在未來(lái)會(huì)成為人們?nèi)粘Ｉ畹囊徊糠郑辽僭谝咔槠陂g的當(dāng)下，是一個(gè)比較安全且方便的購(gòu)物方式。

1.3 系統(tǒng)開發(fā)意義和目標(biāo)

本課題主要研究目的有三：其一，在互聯(lián)網(wǎng)與電商盛行的時(shí)代里，對(duì)當(dāng)下社區(qū)團(tuán)購(gòu)發(fā)展的新情況進(jìn)行了解是具有一定必要性的。其二，不斷優(yōu)化商家，提高流量、曝光率、增加用戶的依賴性。其三，從實(shí)際出發(fā)，為了讓用戶方便、更實(shí)惠地體驗(yàn)享受在家躺著的同時(shí)又能進(jìn)行社區(qū)購(gòu)物，提出針對(duì)性建議以及優(yōu)化的方案也是此次設(shè)計(jì)的目標(biāo)。

社區(qū)團(tuán)購(gòu)與傳統(tǒng)電商相比：社區(qū)團(tuán)購(gòu)是在團(tuán)長(zhǎng)所在區(qū)域范圍一公里內(nèi)，用戶以家庭為單位，向團(tuán)長(zhǎng)訂購(gòu)所需的生活必需品，以團(tuán)購(gòu)的方式，用更加實(shí)惠的方式購(gòu)買所需物品。團(tuán)長(zhǎng)會(huì)在訂購(gòu)的第二天將物品送到每家門口。長(zhǎng)是社區(qū)團(tuán)購(gòu)中極其重要的角色，因?yàn)閳F(tuán)長(zhǎng)要負(fù)責(zé)組隊(duì)，接受訂單，收取貨款，移動(dòng)平臺(tái)上統(tǒng)一下單，等到所有貨品到了小區(qū)，團(tuán)長(zhǎng)應(yīng)通知參與團(tuán)購(gòu)的人員到指定地點(diǎn)提貨，或者送貨上門。另外，團(tuán)長(zhǎng)還負(fù)責(zé)商品咨詢和售后服務(wù)。由于團(tuán)長(zhǎng)的存在，解決了傳統(tǒng)的電子商務(wù)平臺(tái)的客戶服務(wù)、配送和售后服務(wù)人員的角色，為企業(yè)減少了不必要的人力支出，是社區(qū)團(tuán)購(gòu)平臺(tái)上每個(gè)社區(qū)的“靈魂人物”。和其他網(wǎng)購(gòu)平臺(tái)莫時(shí)相比，社區(qū)團(tuán)購(gòu)是預(yù)售模式，省去了中間囤貨的環(huán)節(jié)，是商家避免了不必要的產(chǎn)品上的損失，并且價(jià)格與效率上，相比于傳統(tǒng)電商來(lái)說(shuō)，更具有優(yōu)勢(shì)。

社區(qū)團(tuán)購(gòu)最重要的一點(diǎn)是回頭客，給顧用戶便利，快捷，高效的使用體驗(yàn)。社區(qū)團(tuán)購(gòu)與傳統(tǒng)電商相比，是一種進(jìn)步。首先，社區(qū)團(tuán)購(gòu)起源于長(zhǎng)沙，其發(fā)展時(shí)間并不長(zhǎng)，不過(guò)四年多。社區(qū)團(tuán)購(gòu)是傳統(tǒng)電商不斷探索和反復(fù)實(shí)踐的產(chǎn)物。近年來(lái)，中國(guó)大部分學(xué)者開始關(guān)注社區(qū)團(tuán)購(gòu)，并在相關(guān)理論研究中取得一定成果，分析了它的運(yùn)營(yíng)模式和成功原因。但是大部分人分析了社區(qū)團(tuán)購(gòu)的運(yùn)營(yíng)模式和消費(fèi)者的需求。本文章將在前人的基礎(chǔ)上，對(duì)社區(qū)團(tuán)購(gòu)微信小程序主要對(duì)用戶體驗(yàn)的影響研究，對(duì)小程序的功能和使用環(huán)境的優(yōu)化及通過(guò)小程序之間的交互作用增強(qiáng)用于對(duì)社區(qū)團(tuán)購(gòu)微信小程序的依賴，為社區(qū)團(tuán)購(gòu)的國(guó)內(nèi)快速發(fā)展的理論打下了基礎(chǔ)。

1.4 系統(tǒng)可行性分析

系統(tǒng)可行性的研究目的為的就是為了在系統(tǒng)研發(fā)前期，通過(guò)對(duì)市場(chǎng)、用戶、技術(shù)手段等方面的調(diào)研，制定出一套可行的研發(fā)方案。發(fā)現(xiàn)問(wèn)題，并以最低成本確定解決問(wèn)題的方案。
客源成本：坐擁12億的用戶基數(shù)的微信是一個(gè)超級(jí)客源流量入口。而小程序是一個(gè)橋梁，直接連接的企業(yè)與用戶，利用熟人關(guān)系，快速傳播，擴(kuò)大群規(guī)模，然后團(tuán)長(zhǎng)在微信群里推廣商品，分享鏈接，回答客戶的問(wèn)題以及與客戶互動(dòng)和討論，客戶最終通過(guò)小程序鏈接下單。
人力成本低：社區(qū)團(tuán)購(gòu)的團(tuán)長(zhǎng)一般又在家的寶媽擔(dān)任，其職責(zé)包括客服，推廣，配送和售后.
資金周轉(zhuǎn)速度快，物流成本低：社區(qū)團(tuán)購(gòu)實(shí)行預(yù)售的方式，客戶下單付款，商家拿到貨款訂購(gòu)后，統(tǒng)一時(shí)間發(fā)貨。這樣就降低了庫(kù)存成本，也減少物流倉(cāng)庫(kù)消耗的成本。
技術(shù)可行性：本小程序使用微信開發(fā)者工具開發(fā)，通過(guò)小程序開發(fā)框架所提供的自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，小程序自身提供的組件、接口和API，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件，為用戶提供良好的操作體驗(yàn)。
商品性價(jià)比高：直接向源頭的生產(chǎn)基地或工廠采購(gòu)，既保證了產(chǎn)品質(zhì)量，又降低了產(chǎn)品最終銷售價(jià)格。1.5 創(chuàng)新之處

1.用戶可以通過(guò)拼團(tuán)享團(tuán)購(gòu)價(jià)。
2.對(duì)于傳統(tǒng)電商APP，本系統(tǒng)是在微信小程序中使用，讓用戶的使用更加方便快捷，實(shí)惠，高效。
3.運(yùn)用到新的wxml(WeiXin Markup Language)、wxss(WeiXin Style Sheets)的小程序?qū)匍_發(fā)語(yǔ)言。[2]

1.6 工作基礎(chǔ)及條件

需求基礎(chǔ)：了解微信小程序社區(qū)團(tuán)購(gòu)的流程；老師指導(dǎo)；圖書館或者網(wǎng)上查閱資料
知識(shí)條件：熟悉社區(qū)團(tuán)購(gòu)購(gòu)物流程，微信小程序操作；熟悉微信小程序系統(tǒng)的開發(fā)流程
應(yīng)用平臺(tái)：IOS、安卓
開發(fā)工具：微信開發(fā)者工具
開發(fā)語(yǔ)言： WXML(WeiXin Markup Language)、WXSS(WeiXin Style Sheets)、 基于 JavaScript 的邏輯層框架 

系統(tǒng)開發(fā)相關(guān)技術(shù)簡(jiǎn)介本文闡述的系統(tǒng)重點(diǎn)在于小程序前端的設(shè)計(jì)與交互，主要是在微信開發(fā)者工具上進(jìn)行開發(fā)。運(yùn)用了小程序自身的開發(fā)框架，框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層之間，邏輯層將數(shù)據(jù)進(jìn)行處理，然后傳輸給視圖層，視圖層再將事件反饋給邏輯層?？梢愿奖愕木劢褂跀?shù)據(jù)與邏輯上。[7]

2.1 邏輯層（App Service）簡(jiǎn)介

小程序開發(fā)框架的邏輯層由 JavaScript 編寫。邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。
 App()和 Page() 方法，進(jìn)行程序和頁(yè)面的注冊(cè)。App必須在app.js中注冊(cè)，并且不允許注冊(cè)多個(gè)。
Page用來(lái)注冊(cè)頁(yè)面，接受 object 參數(shù)，其指定頁(yè)面的生命周期函數(shù)、事件處理函數(shù)、初始數(shù)據(jù)等。
開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。

2.2 視圖層簡(jiǎn)介

框架的視圖層由 WXML 與 WXSS 編寫，由組件來(lái)進(jìn)行展示。將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。WXML(WeiXin Markup language) 用于描述頁(yè)面的結(jié)構(gòu)。WXSS(WeiXin Style Sheet) 用于描述頁(yè)面的樣式。組件(Component)是視圖的基本組成單元。[8]

2.3 WXML簡(jiǎn)介

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。WXML 充當(dāng)?shù)木褪穷愃?nbsp;HTML 的角色，具有數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用等的功能。

2.4 WXSS簡(jiǎn)介

WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示。為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時(shí)為了更適合開發(fā)微信小程序，WXSS 對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。

2.5 微信小程序API庫(kù)

API（Application Programming Interface，應(yīng)用程序編程接口）。通俗來(lái)講就是一種接口函數(shù)，封裝好了各種常用函數(shù)給每個(gè)開發(fā)者，然后開發(fā)者只需要調(diào)用函數(shù)即可。微信小程序利用API基本上可以實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)、微信支付、用戶信息獲取等功能。

 
圖2-1  渲染層與邏輯層關(guān)系結(jié)構(gòu)圖
 
 
系統(tǒng)需求分析與概要設(shè)計(jì)

3.1 系統(tǒng)功能需求分析 

需求分析的過(guò)程是系統(tǒng)開發(fā)與設(shè)計(jì)的關(guān)鍵，整個(gè)系統(tǒng)要以需求分析為基礎(chǔ)，是極其重要的第一步。在這個(gè)階段，多方調(diào)查研究用戶的需求，從而確定系統(tǒng)的功能，并對(duì)系統(tǒng)的業(yè)務(wù)邏輯層進(jìn)行建模。所以，需求分析是項(xiàng)目開發(fā)中必不可少的一環(huán)。社區(qū)團(tuán)購(gòu)微信小程序需要滿足兩類人的使用需求，一種是面向前端用戶使用的客戶端，用戶可以通過(guò)小程序進(jìn)行瀏覽商品，能夠清晰的查看到商品的詳情，選擇客戶需求的商品進(jìn)購(gòu)物車下單。還可以通過(guò)拼團(tuán)換取優(yōu)惠券，方便實(shí)惠地完成商品購(gòu)買，清晰的查看到商家的物流以及團(tuán)長(zhǎng)取貨地址，一切透明化，讓客戶更放心。另一種是商家可以在后臺(tái)注冊(cè)商品，增刪分類、增刪改查商品、查看管理訂單等，高效率的完成商品的管理。該系統(tǒng)所需功能如下：[9]
首頁(yè)banner輪播圖，為商家投放廣告，提高商品曝光。
商家商品按種類分類。
大圖展示全部商品列表，月銷量，讓用戶更清晰一目了然。
用戶能夠自助瀏覽商品下單，加入購(gòu)物車。
用戶可添加姓名、電話、收貨地址信息，并選擇默認(rèn)地址。
用戶可以查看購(gòu)物車，增加或刪除商品。
用戶可以查看訂單。
用戶可以分享自己喜歡的商品給微信好友。
商家可以通過(guò)后臺(tái)注冊(cè)商店，增刪分類，增刪商品信息，下架商品，查看訂單。 
 
 
3.2 系統(tǒng)流程圖模型

 社區(qū)團(tuán)購(gòu)微信小程序前端流程圖如圖3-3所示：

 
 
圖3-3  社區(qū)團(tuán)購(gòu)微信小程序前端流程圖
 

 社區(qū)團(tuán)購(gòu)后臺(tái)管理系統(tǒng)流程圖如圖3-4所示：


 
圖3-4  社區(qū)團(tuán)購(gòu)后臺(tái)管理系統(tǒng)流程圖