基于微信小程序的DIY 服裝軟件開(kāi)發(fā)

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

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

0 引言

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

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

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

1.1 功能需求模塊

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

圖1 模塊設(shè)計(jì)

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

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

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

（2）款式選擇模塊

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

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

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

（4）提交訂單模塊

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

（5）個(gè)人信息添加及查詢模塊

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

圖2 微信小程序框架

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

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

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

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

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

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

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

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

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

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

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

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

圖3 小程序注冊(cè)

圖4 小程序目錄

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

2.3 編寫款式選擇模塊

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

圖5 導(dǎo)航頁(yè)面

2.4 編寫圖案自主選擇模塊

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

2.5 編寫提交訂單模塊

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

圖6 服裝DIY 頁(yè)面

圖7 已選擇方案頁(yè)面圖

2.6 編寫個(gè)人信息填寫及查詢模塊

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

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

3.1 選擇款式

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

3.2 自主DIY樣式更改

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

3.3 選擇方案

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

3.4 購(gòu)物車確認(rèn)

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

3.5 結(jié)算頁(yè)面

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

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

圖8 購(gòu)物車結(jié)算頁(yè)面

圖9 地址展示頁(yè)面

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

圖11 個(gè)人信息頁(yè)面展示

3.6 個(gè)人界面

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

4 結(jié)語(yǔ)

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