基于微信小程序的服裝個性化定制系統(tǒng)設計與實現(xiàn)

韋玉輝, 蘇兆偉,2， 潘夢詩

(1. 安徽工程大學 紡織服裝學院，安徽 蕪湖 241000；2. 杭州職業(yè)技術學院 達利女裝學院，浙江 杭州 310018)

微信小程序自2017 年1月9日由騰訊公司正式推出后，因具有開發(fā)成本低、用戶獲取成本低、用戶體驗好、用戶保留率高、訪問方便等特點，逐漸成為各大實體經(jīng)濟進行網(wǎng)絡信息推廣的首選平臺[1-3]。同時，隨著消費者自我意識的增強，人們對于個性化定制的需求越來越強烈[4- 6]。結婚作為人生大事，是展示自我個性的重要場合，因此根據(jù)自己的喜好定制婚禮服逐漸成為準新娘首選的嫁衣置辦方式[7-8]。目前關于中式婚禮服的研究主要集中在服裝款式結構設計、圖案設計、制作工藝、服飾配件的穿搭技巧等方面[9-10]，而鮮有關于定制婚禮服設計的研究[11-12]。因此，文中以微信小程序為開發(fā)平臺，以中式婚禮服為例，詳細闡述其開發(fā)流程及涉及到的關鍵技術手段。該研究可為從事服裝個性化定制平臺研發(fā)的企業(yè)提供理論參考。

1 基于微信小程序的系統(tǒng)設計

1.1 功能需求分析

通過對線上線下25個婚慶服飾品牌以及100場中式婚禮中新娘服裝款式結構的市場調(diào)研，并對20位準新娘(大專以上學歷，對自己的服裝有清晰認知和獨特要求)的消費需求進行分析，明確目前市場上中式婚禮服的款式結構特點和消費者個性化需求，進而確定中式婚禮定制中款式造型結構的模塊組成及系統(tǒng)功能要求，具體如圖1所示。

圖1 系統(tǒng)整體功能要求Fig.1 Overall functional requirements of the system

由圖1可以看出，可以將系統(tǒng)程序分為8個模塊，分別是微信授權登錄模塊、尺寸選擇模塊、款式選擇模塊、色彩選擇模塊、面料選擇模塊、圖案選擇模塊、工藝選擇模塊和訂單輸出模塊。

1.1.1微信授權登錄模塊 微信授權登錄模塊存在于微信公眾平臺。用戶的基本信息會通過OAuth 2.0授權傳遞給程序后臺，不再需要用戶提供賬號和密碼給第三方應用軟件。該模塊通過授權驗證的方法，由微信將用戶和第三方連接起來，且不必擔心用戶賬號和密碼泄露的問題。

1.1.2尺碼選擇模塊 尺碼選擇模塊只提供給登錄用戶使用。用戶參考系統(tǒng)提示以及個人體型選擇適合自己的尺碼，并將相關信息儲存到數(shù)據(jù)庫中，以便后期定制服裝時制版使用。該模塊包含了身高、體質(zhì)量、肩寬、胸圍、腰圍、臀圍、臂根圍。

1.1.3款式選擇模塊 款式選擇模塊是系統(tǒng)的核心模塊之一，主要包含：領型選擇模塊、門襟選擇模塊、衣身選擇模塊、袖型選擇模塊、裙型選擇模塊以及檔牌選擇模塊。用戶可以根據(jù)系統(tǒng)提供的部件圖示選擇自己喜歡的領型、門襟、衣身等部件來定制符合自己個性的婚禮服。

1.1.4色彩選擇模塊 色彩選擇模塊是系統(tǒng)的核心模塊之一，模塊中包含紅色、粉色以及藍色等中式婚禮服常用色彩。用戶可以在該模塊中選擇自己心儀的色彩，并保存在數(shù)據(jù)庫中。

1.1.5面料選擇模塊 面料選擇模塊是系統(tǒng)的核心模塊之一，模塊中包含棉、麻、絲等常用于制作中式婚禮服的各種面料。用戶根據(jù)系統(tǒng)展示的面料圖樣選擇合適的面料選項。系統(tǒng)在后臺將選中的信息儲存在數(shù)據(jù)庫中。

1.1.6圖案選擇模塊 圖案選擇模塊是系統(tǒng)的核心模塊之一，其包含動物圖案、植物圖案、民族圖案等中式婚禮服常用的各種圖案。用戶根據(jù)系統(tǒng)展示的圖樣選擇喜歡的圖案選項。系統(tǒng)將用戶的選項信息進行儲存。

1.1.7工藝選擇模塊 工藝選擇模塊也是系統(tǒng)的核心模塊之一，其包含刺繡、盤扣、手工燙鉆等傳統(tǒng)工藝和現(xiàn)代工藝。用戶可根據(jù)自己的需求選擇相應的工藝。系統(tǒng)同樣會將相關信息進行保存。

1.1.8訂單輸出模塊 訂單輸出模塊是依據(jù)用戶在上述各模塊中所選擇的選項，在后臺對存儲到數(shù)據(jù)庫中的信息進行分析處理。輸出內(nèi)容主要包括款式、色彩、面料、圖案、工藝信息。

1.2 系統(tǒng)架構設計

圖2為中式婚禮服定制微信小程序的物理設計。由圖2可以看出，基于微信小程序的中式婚禮服個性化定制系統(tǒng)是一個由系統(tǒng)應用表現(xiàn)層、系統(tǒng)網(wǎng)絡層、系統(tǒng)功能層和系統(tǒng)技術層組成的多層級系統(tǒng)，且各層之間存在相互協(xié)調(diào)的關系。

1.3 系統(tǒng)技術選型

1.3.1系統(tǒng)開發(fā)模型 中式婚禮服個性化定制微信小程序以瀑布模型[7-8]作為軟件開發(fā)模型。瀑布模型是1970 年由溫斯頓·羅伊斯(ROYCE W)提出的，模型中給出了軟件生存周期活動的固定順序，在上一階段的活動完成后，必須經(jīng)過嚴格的評估審核，才可以進行下一階段的研究等活動，最終得到軟件產(chǎn)品，因此也稱為軟件生存周期模型。瀑布模型具體如圖 3所示。

圖2 中式婚禮服定制微信小程序的物理設計Fig.2 Physical design of customized WeChat applet for Chinese wedding dress

圖3 系統(tǒng)開發(fā)模型——瀑布模型示意Fig.3 System development model—waterfall model

1.3.2系統(tǒng)技術架構 微信小程序是利用微信平臺實現(xiàn)的。微信官方會提供一整套的開發(fā)框架，開發(fā)者能夠參考微信開發(fā)文檔進行操作程序的開發(fā)與調(diào)試。官方公布的微信開發(fā)工具名為微信Web開發(fā)者工具，具體技術架構如圖4所示。

圖4 系統(tǒng)技術框架Fig.4 System technical framework

由圖4可以看出，整個小程序技術框架共分為邏輯層和視圖層，其中，邏輯層為小程序提供運行環(huán)境和特有功能；視圖層用來渲染頁面結構。邏輯層和視圖層之間的關系是指將邏輯層的數(shù)據(jù)反映成視圖，同時將視圖層的事件發(fā)送給邏輯層。程序技術框架包括6個文件夾，分別是images文件、pages文件、utils文件、app.json文件、app.js文件以及app.wxss文件。

1)將images文件又分為6個小文件夾，里面分別放置的是款式圖、色彩圖、面料圖、圖案、工藝圖以及效果圖。款式文件又可分為領型、門襟、衣身、袖型、裙型及檔牌等小文件。系統(tǒng)程序通過內(nèi)部代碼將圖片放置在程序界面的固定位置。

2)在pages文件中最關鍵的是index文件，里面分別放置index.js,index.wxss及index.wxml文件。其中index.js文件定義頁面，index.wxml文件用來進行頁面的整體結構設計，index.wxss文件用來定義組件的顯示方式。

3)該技術框架中，utils文件夾下為util.js文件，其中包含了一些工具函數(shù)，方便程序調(diào)用函數(shù)。

4)除了images文件、pages文件以及utils文件外，技術框架中還包括app.js文件、app.json文件以及app.wxss文件。這3個應用文件是程序的主體部分。其中app.js文件是項目的入口文件，用來放置事件處理函數(shù)；app.json文件用來對程序進行全局配置，決定頁面的路徑、窗口等內(nèi)容；app.wxss文件用來設置全局的樣式，作用于小程序的所有頁面。

2 系統(tǒng)開發(fā)流程及關鍵技術

為完成基于微信小程序的中式婚服個性化定制系統(tǒng)設計，文中研究了其系統(tǒng)開發(fā)流程以及關鍵技術，具體包括以下5點。

2.1 微信小程序的申請注冊與賬號設置

為完成定制系統(tǒng)的設計與制作，首先需要進行微信小程序號的注冊與賬號設置。具體操作步驟為：①選擇合適的小程序號類型(該系統(tǒng)僅是實現(xiàn)中式婚禮服的定制效果展示，以個人身份進行注冊即可)；②根據(jù)注冊流程，填寫注冊資料、身份驗證、郵箱驗證激活及補充信息等，并及時勾選“同意協(xié)議”選項，點擊注冊，完成開發(fā)程序號的注冊；③通過基本設置、第三方設置、版本管理等信息的填寫，完成小程序賬號設置，并登記管理員信息成為系統(tǒng)管理員，具體注冊界面如圖5所示。

2.2 獲取微信小程序的AppID

微信小程序注冊成功后，登錄到小程序開發(fā)賬號。在開發(fā)者工具界面的左上方點擊“設置”按鈕，會在界面的右邊出現(xiàn)小窗口，再點擊小窗口上方的“基本信息”按鈕即可出現(xiàn)小程序的AppID等相關信息，具體界面如圖6所示。

圖5 小程序注冊界面Fig.5 Registration interface of WeChat applet

圖6 獲取程序AppIDFig.6 Getting the AppID of the program

2.3 創(chuàng)建微信小程序項目

在微信開發(fā)者工具界面左上方點擊“項目”中的“新建項目”按鈕，點擊后需要填寫AppID和項目名稱，并選擇一個計算機本地文件夾作為代碼存放的路徑。如果選擇的文件夾是空的，最后需要勾選“創(chuàng)建quick start項目”選項，項目就被成功創(chuàng)建，具體如圖7所示。

圖7 創(chuàng)建程序項目 Fig.7 Creating program project

此外，微信開發(fā)者工具包含編輯、調(diào)試以及項目3個部分。創(chuàng)建項目后，開發(fā)者點擊該項目即可進入到真正的開發(fā)者工具界面。在“編輯”界面內(nèi)編輯和修改代碼，在“調(diào)試”界面內(nèi)測試代碼，在“項目”界面內(nèi)查看小程序屬性、修改配置。

2.4 編寫微信小程序代碼

在開發(fā)者工具界面點擊“編輯器”選項，便可查看和編輯小程序的代碼。在該項目中包含了一些簡易的應用文件，其中app.js,app.json,app.wxss是最重要的3個文件。這3個文件是小程序的主體，文件名稱不可隨意更改，app.js文件放置的是腳本代碼，app.json文件放置的是配置代碼，app.wxss文件放置的是公共樣式表。程序代碼編寫具體如圖8所示。

圖8 編寫程序代碼Fig.8 Writing program code

2.5 創(chuàng)建微信小程序界面

在微信小程序的項目中，除了包含3個應用文件外，還包括pages目錄和utils目錄，其中pages目錄一般由index界面和logs界面組成。每一個界面都需要寫在app.json的pages中，并且都由4個文件組成，文件的后綴分別是.js,.json,.wxss,.wxml，其中.js定義的是邏輯文件，.json定義的是配置文件，.wxss定義的是頁面樣式文件，而.wxml定義的是頁面結構文件。創(chuàng)建程序界面具體如圖9所示。

圖9 創(chuàng)建程序界面Fig.9 Creating program page

3 系統(tǒng)運行與功能測試

3.1 場景設計

為驗證基于微信小程序的中式婚禮服個性化定制系統(tǒng)的可行性，文中選擇了一種場景進行方法驗證，具體場景設置見表1。

3.2 功能測試

根據(jù)表1的用戶要求進行系統(tǒng)功能測試。圖10為根據(jù)用戶需求獲得的系統(tǒng)運行結果。由圖10可知，系統(tǒng)基本實現(xiàn)了顧客個性化款式結構造型特征表達的需求。但目前的定制系統(tǒng)只能將定制服裝的款式結構特征準確表達出來，而定制服裝的色彩、面料材質(zhì)、裝飾工藝還不能準確表達，這也是研究團隊后期需要重點解決的問題。

表1 用戶場景設置

圖10 測試結果Fig.10 Test result

4 結語

為實現(xiàn)以消費者需求為中心的服裝個性化定制與移動終端的結合，文中設計開發(fā)了一套基于微信小程序的中式婚禮服個性化定制系統(tǒng)。研究表明，利用微信小程序進行中式婚禮個性化定制系統(tǒng)設計開發(fā)是完全可行的。該研究既為正在從事服裝個性化定制系統(tǒng)開發(fā)的企業(yè)提供了一種研發(fā)成本低且易于推廣的個性化定制系統(tǒng)設計方法，也可為中國服裝行業(yè)的轉型升級提供幫助，有助于推動個性化定制的發(fā)展。