吳志攀，袁裕鎮(zhèn)，趙金烽，葉洽鑫

（惠州學(xué)院計算機(jī)科學(xué)與工程學(xué)院，惠州516007）

0 引言

為了給人們帶來更好的網(wǎng)購體驗，激發(fā)人們的靈感及創(chuàng)意，進(jìn)行對微信小程序服裝自主DIY 系統(tǒng)的可行性與開發(fā)設(shè)計研究。通過對相關(guān)資料的搜索，確定人們對目前的衣服款式需求，利用微信小程序平臺進(jìn)行開發(fā)與設(shè)計，通過對該系統(tǒng)的系統(tǒng)架構(gòu)設(shè)計分析及實現(xiàn)過程分析，驗證微信小程序服裝自主DIY 系統(tǒng)的可行性。從而確定了通過微信小程序來實現(xiàn)對DIY 服裝軟件開發(fā)是可行的，并且是一種快捷方便的網(wǎng)購方式，給人們帶來更好的網(wǎng)購體驗。

文獻(xiàn)[1-2]中是關(guān)于微信小程序開發(fā)程序的一些設(shè)計理念以及結(jié)構(gòu)框架；文獻(xiàn)[3]中介紹了小程序?qū)Ρ華pp 而擁有的優(yōu)勢以及分析；文獻(xiàn)[4]是關(guān)于利用微信小程序設(shè)計婚禮服裝的小程序；文獻(xiàn)[5-6]中是關(guān)于利用App 或HTML5 來制作服裝自主設(shè)計的想法以及程序。從此可以看出，利用微信小程序來完成自主任意服裝進(jìn)行設(shè)計以及開發(fā)的程序并不是很常見，可見市場上在這一領(lǐng)域是暫時空缺的。

1 基于微信小程序的系統(tǒng)架構(gòu)設(shè)計

1.1 功能需求模塊

通過對市場上的相關(guān)服裝自主設(shè)計流程分析，以及對一部分調(diào)查用戶的網(wǎng)購流程及所需要的功能想法進(jìn)行統(tǒng)計，得出服裝自主DIY 設(shè)計系統(tǒng)的基本模塊以及基本功能需求。具體如圖1 所示。

圖1 模塊設(shè)計

如圖1 所示，服裝自主DIY 設(shè)計系統(tǒng)大致分為5個模塊，分別是微信授權(quán)用戶登錄模塊、款式選擇模塊、圖案自主設(shè)計模塊、提交訂單模塊、個人信息填寫及查詢模塊。

（1）微信授權(quán)用戶登錄模塊

在此模塊，利用微信小程序與微信賬號信息綁定的接口，可以調(diào)用用戶通過微信登錄的相關(guān)賬號與信息。通過這樣的方式，確保了用戶的身份信息安全，同時也可以實現(xiàn)用戶的圖片分享等功能。

（2）款式選擇模塊

在此模塊，用戶能夠通過自己的需求而選擇相對應(yīng)的衣服款式及特性，通過選擇衣服款式而可以將相關(guān)信息存入下一模塊以便進(jìn)行進(jìn)一步的設(shè)計。

（3）圖案自主設(shè)計模塊

這一模塊是系統(tǒng)的核心模塊，用戶可以在此模塊自主添加圖片，用戶可以選擇調(diào)用自己本機(jī)上的圖片，也可以選擇小程序本身自帶的圖庫圖片，并且也可以在此界面添加文字。通過這樣的方式，實現(xiàn)用戶對服裝的自主設(shè)計圖案。并且在設(shè)計完成后，可以將設(shè)計后的圖片保存為方案，以便在后續(xù)將所選擇的方案提交至購物車，完成選擇下單購買功能。

（4）提交訂單模塊

在這一模塊，用戶可以將已選擇的方案，轉(zhuǎn)換至提交訂單頁面，并且在此填寫尺寸等相關(guān)信息，以便用戶在填寫完相關(guān)信息后可以進(jìn)入至購物車界面并完成提交。

（5）個人信息添加及查詢模塊

在這一模塊，用戶將可以完成預(yù)先填寫個人信息功能如收貨地址、尺碼等相關(guān)信息，同時在此模塊，用戶可以聯(lián)系到生產(chǎn)商以及開發(fā)者，反饋意見以及修改相關(guān)信息。

圖2 微信小程序框架

1.2 系統(tǒng)架構(gòu)分析

本系統(tǒng)是基于微信小程序平臺所進(jìn)行設(shè)計與開發(fā)，而微信小程序的架構(gòu)是利用雙線程模型進(jìn)行對數(shù)據(jù)的處理以及對信息的分析，即視圖渲染與業(yè)務(wù)邏輯分別運行在不同的線程中。這樣的開發(fā)方式有助于避免不好的用戶體驗，但是在一定程度上增大了開發(fā)的難度，并且使得頁面之間的響應(yīng)會有一定的延遲。

微信小程序利用渲染層與邏輯層之間的數(shù)據(jù)通信以及響應(yīng)實現(xiàn)對頁面的數(shù)據(jù)與信息處理。視圖層和邏輯層通過系統(tǒng)層的WeixinJsBridge 進(jìn)行通信：邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。頁面渲染的具體流程是：在渲染層，宿主環(huán)境會把WXML 轉(zhuǎn)化成對應(yīng)的JS 對象，在邏輯層發(fā)生數(shù)據(jù)變更的時候，我們需要通過宿主環(huán)境提供的setData 方法把數(shù)據(jù)從邏輯層傳遞到渲染層，再經(jīng)過對比前后差異，把差異應(yīng)用在原來的Dom 樹上，渲染出正確的UI 界面。

微信小程序架構(gòu)分為基本的三個部分，分別是pages 文件目錄、utils 文件目錄，以及全局文件目錄，而本系統(tǒng)在原有基本的架構(gòu)的基礎(chǔ)上還運用了微信云開發(fā)的clouds 目錄以及自定義組件components 目錄。

其中components 目錄與pages 目錄下?lián)碛卸紦碛? 個文件，分別是index.wxml、index.wxss、index.js、index.json 文件。其中index.wxml 文件是用于對頁面的結(jié)構(gòu)布局開發(fā)；index.wxss 是用于對頁面的樣式編寫，使得頁面變得美觀；index.js 文件是用于對頁面的邏輯判斷進(jìn)行操作，寫出相對應(yīng)的功能的最重要部分；index.json文件是用于與微信小程序內(nèi)置的組件進(jìn)行操作的文件，如配置數(shù)據(jù)等操作。

Utils 目錄下只有一個utils.js 文件，包含了數(shù)學(xué)函數(shù)等工具，方便小程序直接調(diào)用。

全局文件目錄下?lián)碛? 個文件，其中app.js 文件用于全局的邏輯判斷數(shù)據(jù)操作，在此頁面所寫的函數(shù)以及數(shù)據(jù)，在全局變量范圍內(nèi)都可以進(jìn)行訪問與操作。App.json 文件所用于微信小程序自帶的樣式結(jié)構(gòu)設(shè)計以及簡易的框架如tabBer 導(dǎo)航欄。Project.config.json 文件則是微信小程序的項目配置文件，如需配置pages 頁面以及云開發(fā)等操作則需要在里面進(jìn)行添加相關(guān)的數(shù)據(jù)。

2 系統(tǒng)開發(fā)的具體流程

2.1 下載微信小程序工具及創(chuàng)建AppID

首先需要在微信小程序官方文檔中下載微信小程序并且注冊賬號，獲取AppID，這樣才能夠在微信小程序工具中創(chuàng)建屬于自己的微信小程序，并且開發(fā)者是唯一的，雖然可以有多個開發(fā)者可以同時使用該ID，但是對于云開發(fā)等微信小程序的應(yīng)用只能通過開發(fā)者的微信賬號登錄才能夠使用，如圖3 所示。

2.2 創(chuàng)建目錄及多級目錄

這一步可以在微信小程序中自主創(chuàng)建，但是在微信小程序中無法創(chuàng)建文件夾，所以瀏覽至該小程序創(chuàng)建的硬盤所在地創(chuàng)建新的文件夾是最佳的方式，完整且有邏輯性的目錄有利于項目的開發(fā)。在預(yù)先架構(gòu)的設(shè)計方案，使得本系統(tǒng)在pages 目錄下創(chuàng)建了clothkind 文件、cloth-diy 文件、cloth-choose 文件、carts 文件、total 文件、profiles 文件。

圖3 小程序注冊

圖4 小程序目錄

在創(chuàng)建目錄之后需要在app.json 文件里配置相關(guān)的數(shù)據(jù)，將新建的目錄文件所在路徑填寫至app.json文件中。

2.3 編寫款式選擇模塊

首先確定好頁面的布局樣式，留下預(yù)先布置好的位置以便后續(xù)操作，在cloth-kind.wxml 文件上確定好了輪播圖、導(dǎo)航欄、商品列表、篩選功能等功能的位置，此處輪播圖引用了相對應(yīng)的UI 組件，在簡單的套用的同時，在其中進(jìn)行了修改，而后導(dǎo)航欄以及商品列表都需要經(jīng)過JS 文件中的data 數(shù)據(jù)列表傳入渲染層，渲染層收到從邏輯層發(fā)出的信息后在頁面上進(jìn)行渲染。導(dǎo)航欄則是自己運用了相對應(yīng)的JS 知識進(jìn)行了編寫與實現(xiàn)，并且實現(xiàn)了瞄點功能，即用戶點擊了導(dǎo)航欄的某個數(shù)據(jù)，商品列表則會實現(xiàn)列表下滑或上浮至數(shù)據(jù)所在位置。而篩選功能則運用了JS 的動畫等相關(guān)知識，利用了微信小程序自帶的數(shù)據(jù)本地緩存，將用戶所提交的搜索結(jié)果在商品列表里進(jìn)行搜索并進(jìn)行展示。當(dāng)用戶確定好了相對應(yīng)的款式后，即可點擊款式的圖片進(jìn)行跳轉(zhuǎn)至圖案自主選擇模塊，如圖5 所示。

圖5 導(dǎo)航頁面

2.4 編寫圖案自主選擇模塊

當(dāng)圖案自主選擇模塊收到從款式選擇模塊傳來的衣服圖片、名稱等信息時，cloth-diy 頁面將會將衣服款式呈現(xiàn)至前端處，而在這一頁面，用戶可以通過自己上傳圖片的形式或者選擇系統(tǒng)提供給用戶選擇的圖案logo 進(jìn)行對服裝的自主設(shè)計。在這一頁面用戶也可以自己輸入文字，從而出現(xiàn)在canvas 畫布上。而用戶在初步完成選擇素材之后，可以通過拖動圖案或者文字的形式，自由的選擇需要將自己所設(shè)計的圖案放置自己想要的位置上，當(dāng)然是在畫布允許的范圍內(nèi)。當(dāng)用戶點擊確定按鈕之后，系統(tǒng)將會把畫布上的文件進(jìn)行轉(zhuǎn)成臨時圖片地址，通過臨時圖片地址來完成下一環(huán)節(jié)，將用戶設(shè)計好的圖片轉(zhuǎn)至已選擇方案頁面處。在進(jìn)行購買。

2.5 編寫提交訂單模塊

當(dāng)用戶從已選擇方案這一頁面上進(jìn)行了將商品添加至購物車這一操作時，將會使用戶填寫相對應(yīng)的尺碼等信息，如果用戶已經(jīng)在個人信息頁面上填寫了尺碼等相關(guān)信息，此處用戶即可自主選擇是否需要填寫新的尺碼數(shù)據(jù)或者選擇已預(yù)先填寫好的尺碼數(shù)據(jù)。當(dāng)用戶提交了尺碼信息后，將會跳轉(zhuǎn)至購物車頁面，并且將用戶所選擇的方案的名稱、圖片、尺碼以及價格等信息傳入購物車頁面中。在購物車頁面上的數(shù)據(jù)是使用微信本地緩存的功能傳值至cart.js 文件中的data 值上，即將數(shù)據(jù)池中的數(shù)據(jù)傳至邏輯層中，再通過邏輯層將信息傳至cart.wxml 渲染層上。在購物車頁面上用戶可以進(jìn)行提交訂單、刪除某條數(shù)據(jù)、對商品數(shù)目進(jìn)行更改等的操作。用戶可以進(jìn)行單選或者全選等操作進(jìn)行所選擇的數(shù)據(jù)提交至訂單，購物車將會自動計算總金額。當(dāng)用戶點擊了結(jié)算按鈕后，將會跳轉(zhuǎn)至提交訂單頁面即total 文件中，在total 文件中用戶將可以填寫地址、電話、姓名等的相關(guān)數(shù)據(jù)，并對所選擇商品的數(shù)據(jù)進(jìn)行確認(rèn)后進(jìn)行支付，即可完成整個訂單。但是由于未有公有賬戶，所以尚未實現(xiàn)對支付功能的實現(xiàn)。

圖6 服裝DIY 頁面

圖7 已選擇方案頁面圖

2.6 編寫個人信息填寫及查詢模塊

此頁面設(shè)計為用戶登錄后的個人界面，在此頁面中有查詢物流信息、查看歷史購買訂單、我的尺寸、我的地址、常見問題、求打賞、以及聯(lián)系我們等功能。在此處，我的尺寸與我的地址可以分別在該界面進(jìn)行預(yù)先填寫，也可以在此界面完成對已有的尺寸與地址所進(jìn)行修改。當(dāng)然不僅在此處可以進(jìn)行對尺寸與地址的編寫，當(dāng)用戶在進(jìn)行購買或者設(shè)計自定義衣服時，亦可手動輸入尺寸與填寫地址等操作，在此處的只為了更加方便用戶能夠使用以及對個人信息的管理。此處的查詢物流信息應(yīng)該為用戶購買了商品之后，商家分配訂單號，即時反應(yīng)出當(dāng)前快遞的物流信息，但是我們并沒有完成支付功能，這樣也就無法完成分配訂單等操作，所以在此處設(shè)計為手動輸入物流單號，從而打印出當(dāng)前物流信息。此處的查詢物流信息調(diào)用了apishop網(wǎng)站的API 接口，通過返回數(shù)據(jù)（即快遞單號及appid）至apishop 的后臺，再從apishop 返回物流信息至小程序中，從而實現(xiàn)對物流信息的查詢。查看歷史購買訂單——當(dāng)用戶完成了提交用戶訂單后，將會有購買記錄保存于歷史購買訂單列表中，并且保存著完成狀態(tài)等信息。另外的常見問題、求打賞、聯(lián)系我們等頁面則會保留著該小程序的使用中途遇到的問題等其他功能。

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

3.1 選擇款式

用于測試當(dāng)用戶選擇所需要進(jìn)行DIY 的衣服款式，是否能夠跳轉(zhuǎn)到DIY 頁面，并且保留用戶所選擇的衣服款式。

3.2 自主DIY樣式更改

當(dāng)用戶進(jìn)行選擇衣服款式之后，即可跳轉(zhuǎn)到自主DIY 頁面，在此頁面用戶可以進(jìn)行自主選擇圖片或者自行添加相冊里的圖片從而完成對衣服的樣式的更改。

3.3 選擇方案

當(dāng)用戶DIY 好了衣服樣式之后，點擊保存按鈕，即可將用戶設(shè)計好的衣服樣式保存至已選擇方案頁面。在已選擇方案頁面中可以選擇衣服樣式，并且選擇好尺寸，從而跳轉(zhuǎn)到購物車頁面進(jìn)行確認(rèn)下單。

3.4 購物車確認(rèn)

在該頁面用戶將通過確認(rèn)想要購買的定制衣服并且選中進(jìn)行結(jié)算，在該頁面也可以進(jìn)行對所需要購買衣服的數(shù)目進(jìn)行更改。

3.5 結(jié)算頁面

在該頁面，用戶將需要進(jìn)行對所購買的定制衣服進(jìn)行地址的選擇或者填寫，并且實現(xiàn)對定制衣服的最終檢查是否為自己所需，并且實現(xiàn)提交。但是由于此處無法進(jìn)行支付金額，所以定為提交后將會有數(shù)據(jù)進(jìn)行展示至歷史訂單中。

點擊選擇地址后，可根據(jù)現(xiàn)有的地址直接選擇或者新增新地址。

圖8 購物車結(jié)算頁面

圖9 地址展示頁面

圖10 結(jié)算結(jié)果展示

圖11 個人信息頁面展示

3.6 個人界面

在該頁面用戶可以查看并修改自己當(dāng)前的尺寸記錄、查詢當(dāng)前物流信息以及查看幫助的問題。

4 結(jié)語

本項目通過微信小程序所開發(fā)的服裝自主DIY 小程序來滿足人們?nèi)找嬖鲩L的對自己的創(chuàng)意以及想法所想要創(chuàng)作的熱情。通過微信小程序簡便而又快捷的方式，使得人們不用下載App，直接打開微信小程序即可享受到將自己的想法進(jìn)行實現(xiàn)的樂趣，同時也可以快速的分享給好友，即達(dá)到推廣此小程序的目的，也使得更多的人能夠參與到對自己的專屬自定義服裝的設(shè)計上來。此外，此小程序也能夠帶給當(dāng)前的服裝企業(yè)一些啟發(fā)，明白當(dāng)代年輕人或者這一類人心中所想，并有針對性的設(shè)計出更加符合人們的想法的衣服，有利于商家們經(jīng)濟(jì)的增長以及更加貼切的創(chuàng)造出客戶們喜歡的衣服，從而實現(xiàn)大批量的生產(chǎn)從而帶來給企業(yè)帶來獲利。但究其根本是期望人們能夠更加輕易地創(chuàng)造出自己喜歡的衣服。