基于節(jié)氣文化的服飾商城微信小程序的設(shè)計與實現(xiàn)

李梓璇 馬慧珍

鄭州電力職業(yè)技術(shù)學(xué)院 河南 鄭州 450000

1 緒論

1.1 國內(nèi)研究現(xiàn)狀及分析

各種紛繁復(fù)雜的App﹑軟件，雖然可以實現(xiàn)完整的功能，但需要下載安裝，安裝于手機內(nèi)存，一直占用著內(nèi)存空間，太多的App可能會導(dǎo)致內(nèi)存不足，造成功能不能實現(xiàn)，影響用戶使用。當前的App市場基本飽和，幾乎所有的領(lǐng)域均已覆蓋。微信小程序的出現(xiàn)，是智能手機端的一次革新。微信小程序無須下載安裝，幾乎不占用的內(nèi)存空間和占用微信公共使用的內(nèi)存空間。除此之外，微信小程序一次開發(fā)，可以適配多終端。開發(fā)周期短，容易推廣成本低等特點，讓微信小程序可以迅速占領(lǐng)空白領(lǐng)域客戶渠道。

通過社會調(diào)查，幾乎人人使用智能手機端來隨時查看天氣預(yù)報，單純的預(yù)報溫度范圍﹑下雨或者下雪量已不能很好滿足客戶需求。目前天氣預(yù)報App已有詳細規(guī)劃穿搭的建議的趨勢。但是沒有根據(jù)實時溫度和節(jié)氣準確推薦穿衣的App，比如今天你是穿襯衫還是毛衣，穿羽絨服還是風(fēng)衣。所以，將天氣預(yù)報與服飾推薦相結(jié)合是十分必要的。讓人們在查看天氣之后，瀏覽建議穿衣搭配，用形象直觀的圖片來詳細建議和規(guī)劃出適合次日天氣狀況的穿搭指南，有需要的可以直接購買。

1.2 系統(tǒng)開發(fā)技術(shù)

1.2.1 使用的開發(fā)平臺。“微天氣時尚記”微信小程序，主要由兩個部分組成。分別是響應(yīng)數(shù)據(jù)綁定和頁面管理。響應(yīng)的數(shù)據(jù)綁定系統(tǒng)又是響應(yīng)數(shù)據(jù)綁定的核心，基于微信的MINA框架，將數(shù)據(jù)邏輯和頁面這兩部分合起來組成了響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。在該系統(tǒng)上進行小程序開發(fā)時，該框架會將邏輯層和視圖層進行綁定，當在視圖層點擊按鈕的時候，視圖層會直接發(fā)送相應(yīng)的事件給邏輯層，邏輯層找到并執(zhí)行對應(yīng)的事件處理函數(shù)；然后觸發(fā)回調(diào)函數(shù)，邏輯層執(zhí)行相應(yīng)的操作，快捷迅速。頁面管理框架 ，管理了整個小程序的頁面路由。該微信小程序頁面的數(shù)據(jù)﹑方法﹑生命周期函數(shù)都注冊到了頁面管理中。該框架可以處理很多復(fù)雜的操作以提高開發(fā)者開發(fā)效率[1]。“微天氣時尚記”微信小程序的框架系統(tǒng)分為用戶端（前端）和管理員段（后端）。用WXML和WXSS作為該程序的視圖層描述語言。WXML結(jié)合地圖﹑表單﹑視圖容器等組件，在響應(yīng)的數(shù)據(jù)綁定系統(tǒng)上，構(gòu)建頁面[2]。同時運用 JavaScript的邏輯層框架，為視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，這樣在開發(fā)過程中可以更多地專注于數(shù)據(jù)與邏輯，省略一些復(fù)雜的過程。使用WXSS選擇合適的CSS選擇器，來進行全局樣式和局部樣式來作用小程序所有頁面，并且采用底層支持的新的尺寸單位rpx，省略了換算的麻煩。除了全局頁面展示，還用JS進行交互，相應(yīng)用戶的點擊，獲取用戶的位置（用于天氣預(yù)報定位）等[3]。 基于該程序特點和各類數(shù)據(jù)庫特點﹑操作難度，采用了云數(shù)據(jù)庫這種開放源碼的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。使用微信公眾平臺提供的云開發(fā)和API實現(xiàn)快速上線和迭代。運用面向JAVA語言的編程接口，進行增添﹑修改﹑查詢﹑刪除等操作。搭建云數(shù)據(jù)庫。

后端運用restful接口來接收前端發(fā)過來的request請求。再用Spring Boot框架封裝的方法來調(diào)用數(shù)據(jù)庫，最后將經(jīng)過一系列操作過的數(shù)據(jù)傳送給前端。

2 系統(tǒng)分析

對開發(fā)項目的系統(tǒng)化的分析，決定了開發(fā)項目的性質(zhì)﹑開發(fā)項目的功能和開發(fā)項目的必要性。經(jīng)濟﹑操作﹑技術(shù)可行性以及需求分析對是否開發(fā)該項目的問題起決定性作用。

2.1 可行性分析

2.2.1 經(jīng)濟可行性。“微天氣時尚記”微信小程序，采用微信公眾平臺提供的云開發(fā)平臺，擁有完整的云端支持，從而弱化了后端和運維的概念。再運用云開發(fā)開發(fā)微信小程序時，不需要費時費力甚至花費錢財?shù)拇罱ǚ?wù)器。開發(fā)者可以借助云服務(wù)相互兼容﹑并不互斥的特點，同時使用微信公眾平臺提供的接口進行核心業(yè)務(wù)開發(fā)。除此之外，微信公眾平臺提供的組件﹑框架﹑服務(wù)端接口和開發(fā)小程序所需要的工具都是免費的，可以在微信公眾平臺自主下載。

微信通訊軟件，為小程序開發(fā)者提供了便利和資源，大大提高了小程序開發(fā)效率，縮短開發(fā)時間，降低生產(chǎn)成本。

2.2.2 技術(shù)可行性。本微信小程序用WXML和WXSS作為該程序的視圖層描述語言。采用邏輯層和 視圖層交互的礦及系統(tǒng)。WXML結(jié)合地圖﹑表單﹑視圖容器等組件，在響應(yīng)的數(shù)據(jù)綁定系統(tǒng)上，構(gòu)建頁面。同時運用JavaScript的邏輯層框架來視圖層與邏輯層間的數(shù)據(jù)傳輸和事件系統(tǒng)，專注于數(shù)據(jù)與邏輯，省略一些復(fù)雜的過程。使用WXSS選擇合適的CSS選擇器，來進行全局樣式和局部樣式來作用小程序所有頁面，并且采用底層支持的新的尺寸單位rpx，省略了換算的麻煩。除了全局頁面展示，還用JS裸機交互，相應(yīng)用戶的點擊，獲取用戶的位置（用于天氣預(yù)報定位）等。對于大多數(shù)開發(fā)者，上述技術(shù)都可以實現(xiàn)[4]。

2.2.3 操作可行性。微信通訊軟件，為小程序開發(fā)者提供了開發(fā)指南。開發(fā)者可以根據(jù)開發(fā)指南，并在該平臺自主下載所需要的組件﹑服務(wù)端接口﹑開發(fā)工具。開發(fā)者還可以使用云端能力進行云開發(fā)。云開發(fā)控制臺提供：云開發(fā)概覽（查看云開發(fā)基礎(chǔ)使用數(shù)據(jù)）﹑用戶管理（查看小程序用戶信息）﹑數(shù)據(jù)庫（管理數(shù)據(jù)庫，可查看﹑增加﹑更新﹑查找﹑刪除數(shù)據(jù)﹑管理索引﹑管理數(shù)據(jù)庫訪問權(quán)限等）﹑存儲管理（查看和管理存儲空間）﹑云函數(shù)（查看云函數(shù)列表﹑配置﹑日志和監(jiān)控）﹑統(tǒng)計分析（查看云開發(fā)資源具體使用統(tǒng)計信息）的功能[5]。為開發(fā)者提供了很好的開發(fā)平臺，大大降低開發(fā)者操作難度。

綜上所述，“微天氣時尚記”微信小程序的開發(fā)是完全可行的。

2.3 需求分析

根據(jù)前面國內(nèi)的研究現(xiàn)狀及分析，為符合用戶需求，小程序需要實現(xiàn)的功能有：

自動識別用戶登錄﹑天氣查看功能﹑商品瀏覽功能（季節(jié)專區(qū)為特色，會提示節(jié)氣）﹑訂單功能﹑購物車功能﹑收貨地址管理功能﹑支付功能。

2.4 系統(tǒng)結(jié)構(gòu)分析

2.4.1 系統(tǒng)模塊功能。根據(jù)需求分析，該微信小程序一共詳細分了7個模塊：用戶登錄模塊﹑天氣預(yù)報模塊﹑商品瀏覽模塊﹑訂單模塊﹑購物車模塊﹑收貨地址管理模塊﹑微信支付模塊。

2.4.2 系統(tǒng)功能結(jié)構(gòu)圖。“微天氣時尚記”微信小程序系統(tǒng)整體分為兩大部分，一部分是前臺用戶模塊，另一部分是后臺用戶模塊。

前臺用戶模塊又細分為會員登錄注冊模塊﹑查看天氣模塊﹑查詢商品模塊﹑瀏覽商品模塊﹑購物車模塊﹑購買模塊。

后臺管理層模塊，又詳細分為登錄模塊﹑天氣模塊﹑店鋪管理模塊﹑商品管理模塊﹑訂單模塊﹑退出模塊。其中商品管理模塊中的商品的狀態(tài)以及商品的詳情信息，由管理員寫在數(shù)據(jù)庫的數(shù)據(jù)決定。在實際開發(fā)過程中，該校小程序使用了微信公眾平臺提供的組件﹑服務(wù)端接口﹑開發(fā)工具﹑接口等開發(fā)者所需元素，在該平臺上下載開發(fā)“微天氣時尚記”小程序所需組件和接口等。在邏輯層和 視圖層組成的框架之上，用WXML和WXSS作為該程序的視圖層描述語言。WXML結(jié)合地圖﹑表單﹑視圖容器等組件，在響應(yīng)的數(shù)據(jù)綁定系統(tǒng)上，構(gòu)建頁面。用云端構(gòu)建數(shù)據(jù)庫，實現(xiàn)了用戶查看天氣﹑瀏覽商品﹑訂單﹑購物和﹑收貨地址管理的功能。

該程序的開發(fā)過程避免的很多復(fù)雜的操作。簡化了開發(fā)過程后期小程序上線時，可直接在騰訊云中申請域名與服務(wù)器，不需要考慮后臺的布置等。

3 系統(tǒng)實現(xiàn)

根據(jù)需求，本系統(tǒng)分為前臺用戶﹑后臺管理員兩個大模塊。兩大模塊又細分為6個功能模塊，用戶登錄﹑天氣預(yù)報﹑訂單管理﹑商品瀏覽﹑收貨地址模塊和訂單模塊。除此之外，界面設(shè)計的簡潔明了，操作交互按照用戶習(xí)慣進行設(shè)計，節(jié)約了用戶對應(yīng)用的學(xué)習(xí)時間。

根據(jù)前面描述的系統(tǒng)設(shè)計，本章主要對個功能模塊的設(shè)計界面和該界面是如何實現(xiàn)功能的進行了詳細的介紹。

3.1 用戶登錄模塊

打開“微天氣時尚記”微信小程序，該程序會自動直接獲取微信用戶的微信頭像﹑微信名稱等信息。這個是微信內(nèi)部自帶的認證方法。用戶可以通過首頁的“歡迎進入”按鍵進入該校程序主頁。如果用戶是首次登陸，會返回false，彈出允許授權(quán)的對話框，選擇允許授權(quán)，會返回true，然后小程序就會獲得用戶微信信息。小程序是在微信中打開的，不支持js的跳轉(zhuǎn)因此減少了用戶進入惡意網(wǎng)站的可能性，保障了用戶的安全性。同時，通過掃碼的方式就能打開小程序，對手機性能和內(nèi)存的要求也大大降低。

3.2 天氣預(yù)報模塊

天氣預(yù)報頁面位于主頁的天氣頁面，是用戶點擊首頁的“歡迎進入”按鍵才顯示的頁面。當用戶進入首頁后，小程序通過接口自動定位用戶當前位置，獲取該地區(qū)氣溫變化，該頁面將會顯示當天及未來三天的天氣情況。

3.3 購物車模塊

購物車模塊主要用于登錄用戶進行商品的選擇和管理。

3.4 商品瀏覽模塊

在商品瀏覽模塊在衣柜頁面。進入衣柜界面首先是商品分類界面。3個主要分類，分別是：女裝專區(qū)﹑男裝專區(qū)﹑季節(jié)專區(qū)。用戶可以通過點擊分類找到指定類別的商品。男裝專區(qū)和女裝專區(qū)包含了一年四季的衣服。

季節(jié)專區(qū)是本小程序的特色專區(qū)，這些商品是根據(jù)氣溫變化而提供的。提供商品的依據(jù)是根據(jù)適合中國人的“穿衣公式”——溫度+衣服=26°。這是最適合中國人體表的溫度。商品的信息由管理員直接寫在數(shù)據(jù)庫中，形成了一個電子微商城。如果用戶注冊登錄了會員，支持在商品詳情頁面直接加入購物車和立即購買功能，商品詳情頁面會顯示購物車已有商品數(shù)量。

季節(jié)專區(qū)功能實現(xiàn)是通過前端向后端輸入一天變化的最高溫度和最低溫度，取平均值，根據(jù)“穿衣公式”和中國節(jié)氣，推薦適合天氣穿搭。比如春雨驚春清谷天，夏滿芒夏暑相連，秋處露秋寒霜降，冬雪雪冬小大寒。不同材質(zhì)﹑不同厚度的衣服能給人體表增加不同的溫度。衣服種類和所代表的不同溫度直接寫在數(shù)據(jù)庫中。

3.5 收貨地址模塊

收貨地址模塊主要用于用戶管理收貨地址，在“我的地址”中進入收貨地址管理界面。

3.6 訂單模塊

訂單管理模塊需要用戶登錄會員后才能進行的操作，用戶直接購買商品或購物車結(jié)算時有一個訂單生成界面，在訂單生成界面可以選擇已有地址，訂單生成后在“我的訂單”中會有訂單列表，可以查看每個訂單的情況，并且可以刪除指定訂單。生成訂單后可用微信零錢包直接支付。

4 結(jié)束語

本論文詳細介紹了基于天氣預(yù)報及電子商城系統(tǒng)的微信小程序的系統(tǒng)分析﹑設(shè)計與開發(fā)。

該系統(tǒng)實現(xiàn)的功能具備以下優(yōu)點：

“微天氣時尚記”小程序的生成和推廣，可以豐富用戶生活，幫助人們在了解天氣情況和溫度變化后，更好的選擇出行穿搭，將會有效減少“亂穿衣”﹑“穿錯衣”的現(xiàn)象。同時，該小程序也不帶來占用內(nèi)存的困擾，使用戶“觸手可及”﹑“用完就走”。

該程序還有可以繼續(xù)開拓點贊互動版面和健康季節(jié)飲食版面。