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

韋玉輝, 蘇兆偉,2， 潘夢(mèng)詩

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

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

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

1.1 功能需求分析

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

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

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

1.1.1微信授權(quán)登錄模塊 微信授權(quán)登錄模塊存在于微信公眾平臺(tái)。用戶的基本信息會(huì)通過OAuth 2.0授權(quán)傳遞給程序后臺(tái)，不再需要用戶提供賬號(hào)和密碼給第三方應(yīng)用軟件。該模塊通過授權(quán)驗(yàn)證的方法，由微信將用戶和第三方連接起來，且不必?fù)?dān)心用戶賬號(hào)和密碼泄露的問題。

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

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

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

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

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

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

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

1.2 系統(tǒng)架構(gòu)設(shè)計(jì)

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

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

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

圖2 中式婚禮服定制微信小程序的物理設(shè)計(jì)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)技術(shù)架構(gòu) 微信小程序是利用微信平臺(tái)實(shí)現(xiàn)的。微信官方會(huì)提供一整套的開發(fā)框架，開發(fā)者能夠參考微信開發(fā)文檔進(jìn)行操作程序的開發(fā)與調(diào)試。官方公布的微信開發(fā)工具名為微信Web開發(fā)者工具，具體技術(shù)架構(gòu)如圖4所示。

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

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

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

2)在pages文件中最關(guān)鍵的是index文件，里面分別放置index.js,index.wxss及index.wxml文件。其中index.js文件定義頁面，index.wxml文件用來進(jìn)行頁面的整體結(jié)構(gòu)設(shè)計(jì)，index.wxss文件用來定義組件的顯示方式。

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

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

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

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

2.1 微信小程序的申請(qǐng)注冊(cè)與賬號(hào)設(shè)置

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

2.2 獲取微信小程序的AppID

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

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

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

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

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

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

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

2.4 編寫微信小程序代碼

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

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

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

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

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

3 系統(tǒng)運(yùn)行與功能測(cè)試

3.1 場(chǎng)景設(shè)計(jì)

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

3.2 功能測(cè)試

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

表1 用戶場(chǎng)景設(shè)置

圖10 測(cè)試結(jié)果Fig.10 Test result

4 結(jié)語

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