基于微信小程序的DIY 服装软件开发

吴志攀，袁裕镇，赵金烽，叶洽鑫

（惠州学院计算机科学与工程学院，惠州516007）

0 引言

为了给人们带来更好的网购体验，激发人们的灵感及创意，进行对微信小程序服装自主DIY 系统的可行性与开发设计研究。通过对相关资料的搜索，确定人们对目前的衣服款式需求，利用微信小程序平台进行开发与设计，通过对该系统的系统架构设计分析及实现过程分析，验证微信小程序服装自主DIY 系统的可行性。从而确定了通过微信小程序来实现对DIY 服装软件开发是可行的，并且是一种快捷方便的网购方式，给人们带来更好的网购体验。

文献[1-2]中是关于微信小程序开发程序的一些设计理念以及结构框架；文献[3]中介绍了小程序对比App 而拥有的优势以及分析；文献[4]是关于利用微信小程序设计婚礼服装的小程序；文献[5-6]中是关于利用App 或HTML5 来制作服装自主设计的想法以及程序。从此可以看出，利用微信小程序来完成自主任意服装进行设计以及开发的程序并不是很常见，可见市场上在这一领域是暂时空缺的。

1 基于微信小程序的系统架构设计

1.1 功能需求模块

通过对市场上的相关服装自主设计流程分析，以及对一部分调查用户的网购流程及所需要的功能想法进行统计，得出服装自主DIY 设计系统的基本模块以及基本功能需求。具体如图1 所示。

图1 模块设计

如图1 所示，服装自主DIY 设计系统大致分为5个模块，分别是微信授权用户登录模块、款式选择模块、图案自主设计模块、提交订单模块、个人信息填写及查询模块。

（1）微信授权用户登录模块

在此模块，利用微信小程序与微信账号信息绑定的接口，可以调用用户通过微信登录的相关账号与信息。通过这样的方式，确保了用户的身份信息安全，同时也可以实现用户的图片分享等功能。

（2）款式选择模块

在此模块，用户能够通过自己的需求而选择相对应的衣服款式及特性，通过选择衣服款式而可以将相关信息存入下一模块以便进行进一步的设计。

（3）图案自主设计模块

这一模块是系统的核心模块，用户可以在此模块自主添加图片，用户可以选择调用自己本机上的图片，也可以选择小程序本身自带的图库图片，并且也可以在此界面添加文字。通过这样的方式，实现用户对服装的自主设计图案。并且在设计完成后，可以将设计后的图片保存为方案，以便在后续将所选择的方案提交至购物车，完成选择下单购买功能。

（4）提交订单模块

在这一模块，用户可以将已选择的方案，转换至提交订单页面，并且在此填写尺寸等相关信息，以便用户在填写完相关信息后可以进入至购物车界面并完成提交。

（5）个人信息添加及查询模块

在这一模块，用户将可以完成预先填写个人信息功能如收货地址、尺码等相关信息，同时在此模块，用户可以联系到生产商以及开发者，反馈意见以及修改相关信息。

图2 微信小程序框架

1.2 系统架构分析

本系统是基于微信小程序平台所进行设计与开发，而微信小程序的架构是利用双线程模型进行对数据的处理以及对信息的分析，即视图渲染与业务逻辑分别运行在不同的线程中。这样的开发方式有助于避免不好的用户体验，但是在一定程度上增大了开发的难度，并且使得页面之间的响应会有一定的延迟。

微信小程序利用渲染层与逻辑层之间的数据通信以及响应实现对页面的数据与信息处理。视图层和逻辑层通过系统层的WeixinJsBridge 进行通信：逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。页面渲染的具体流程是：在渲染层，宿主环境会把WXML 转化成对应的JS 对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData 方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom 树上，渲染出正确的UI 界面。

微信小程序架构分为基本的三个部分，分别是pages 文件目录、utils 文件目录，以及全局文件目录，而本系统在原有基本的架构的基础上还运用了微信云开发的clouds 目录以及自定义组件components 目录。

其中components 目录与pages 目录下拥有都拥有4 个文件，分别是index.wxml、index.wxss、index.js、index.json 文件。其中index.wxml 文件是用于对页面的结构布局开发；index.wxss 是用于对页面的样式编写，使得页面变得美观；index.js 文件是用于对页面的逻辑判断进行操作，写出相对应的功能的最重要部分；index.json文件是用于与微信小程序内置的组件进行操作的文件，如配置数据等操作。

Utils 目录下只有一个utils.js 文件，包含了数学函数等工具，方便小程序直接调用。

全局文件目录下拥有4 个文件，其中app.js 文件用于全局的逻辑判断数据操作，在此页面所写的函数以及数据，在全局变量范围内都可以进行访问与操作。App.json 文件所用于微信小程序自带的样式结构设计以及简易的框架如tabBer 导航栏。Project.config.json 文件则是微信小程序的项目配置文件，如需配置pages 页面以及云开发等操作则需要在里面进行添加相关的数据。

2 系统开发的具体流程

2.1 下载微信小程序工具及创建AppID

首先需要在微信小程序官方文档中下载微信小程序并且注册账号，获取AppID，这样才能够在微信小程序工具中创建属于自己的微信小程序，并且开发者是唯一的，虽然可以有多个开发者可以同时使用该ID，但是对于云开发等微信小程序的应用只能通过开发者的微信账号登录才能够使用，如图3 所示。

2.2 创建目录及多级目录

这一步可以在微信小程序中自主创建，但是在微信小程序中无法创建文件夹，所以浏览至该小程序创建的硬盘所在地创建新的文件夹是最佳的方式，完整且有逻辑性的目录有利于项目的开发。在预先架构的设计方案，使得本系统在pages 目录下创建了clothkind 文件、cloth-diy 文件、cloth-choose 文件、carts 文件、total 文件、profiles 文件。

图3 小程序注册

图4 小程序目录

在创建目录之后需要在app.json 文件里配置相关的数据，将新建的目录文件所在路径填写至app.json文件中。

2.3 编写款式选择模块

首先确定好页面的布局样式，留下预先布置好的位置以便后续操作，在cloth-kind.wxml 文件上确定好了轮播图、导航栏、商品列表、筛选功能等功能的位置，此处轮播图引用了相对应的UI 组件，在简单的套用的同时，在其中进行了修改，而后导航栏以及商品列表都需要经过JS 文件中的data 数据列表传入渲染层，渲染层收到从逻辑层发出的信息后在页面上进行渲染。导航栏则是自己运用了相对应的JS 知识进行了编写与实现，并且实现了瞄点功能，即用户点击了导航栏的某个数据，商品列表则会实现列表下滑或上浮至数据所在位置。而筛选功能则运用了JS 的动画等相关知识，利用了微信小程序自带的数据本地缓存，将用户所提交的搜索结果在商品列表里进行搜索并进行展示。当用户确定好了相对应的款式后，即可点击款式的图片进行跳转至图案自主选择模块，如图5 所示。

图5 导航页面

2.4 编写图案自主选择模块

当图案自主选择模块收到从款式选择模块传来的衣服图片、名称等信息时，cloth-diy 页面将会将衣服款式呈现至前端处，而在这一页面，用户可以通过自己上传图片的形式或者选择系统提供给用户选择的图案logo 进行对服装的自主设计。在这一页面用户也可以自己输入文字，从而出现在canvas 画布上。而用户在初步完成选择素材之后，可以通过拖动图案或者文字的形式，自由的选择需要将自己所设计的图案放置自己想要的位置上，当然是在画布允许的范围内。当用户点击确定按钮之后，系统将会把画布上的文件进行转成临时图片地址，通过临时图片地址来完成下一环节，将用户设计好的图片转至已选择方案页面处。在进行购买。

2.5 编写提交订单模块

当用户从已选择方案这一页面上进行了将商品添加至购物车这一操作时，将会使用户填写相对应的尺码等信息，如果用户已经在个人信息页面上填写了尺码等相关信息，此处用户即可自主选择是否需要填写新的尺码数据或者选择已预先填写好的尺码数据。当用户提交了尺码信息后，将会跳转至购物车页面，并且将用户所选择的方案的名称、图片、尺码以及价格等信息传入购物车页面中。在购物车页面上的数据是使用微信本地缓存的功能传值至cart.js 文件中的data 值上，即将数据池中的数据传至逻辑层中，再通过逻辑层将信息传至cart.wxml 渲染层上。在购物车页面上用户可以进行提交订单、删除某条数据、对商品数目进行更改等的操作。用户可以进行单选或者全选等操作进行所选择的数据提交至订单，购物车将会自动计算总金额。当用户点击了结算按钮后，将会跳转至提交订单页面即total 文件中，在total 文件中用户将可以填写地址、电话、姓名等的相关数据，并对所选择商品的数据进行确认后进行支付，即可完成整个订单。但是由于未有公有账户，所以尚未实现对支付功能的实现。

图6 服装DIY 页面

图7 已选择方案页面图

2.6 编写个人信息填写及查询模块

此页面设计为用户登录后的个人界面，在此页面中有查询物流信息、查看历史购买订单、我的尺寸、我的地址、常见问题、求打赏、以及联系我们等功能。在此处，我的尺寸与我的地址可以分别在该界面进行预先填写，也可以在此界面完成对已有的尺寸与地址所进行修改。当然不仅在此处可以进行对尺寸与地址的编写，当用户在进行购买或者设计自定义衣服时，亦可手动输入尺寸与填写地址等操作，在此处的只为了更加方便用户能够使用以及对个人信息的管理。此处的查询物流信息应该为用户购买了商品之后，商家分配订单号，即时反应出当前快递的物流信息，但是我们并没有完成支付功能，这样也就无法完成分配订单等操作，所以在此处设计为手动输入物流单号，从而打印出当前物流信息。此处的查询物流信息调用了apishop网站的API 接口，通过返回数据（即快递单号及appid）至apishop 的后台，再从apishop 返回物流信息至小程序中，从而实现对物流信息的查询。查看历史购买订单——当用户完成了提交用户订单后，将会有购买记录保存于历史购买订单列表中，并且保存着完成状态等信息。另外的常见问题、求打赏、联系我们等页面则会保留着该小程序的使用中途遇到的问题等其他功能。

3 系统功能测试

3.1 选择款式

用于测试当用户选择所需要进行DIY 的衣服款式，是否能够跳转到DIY 页面，并且保留用户所选择的衣服款式。

3.2 自主DIY样式更改

当用户进行选择衣服款式之后，即可跳转到自主DIY 页面，在此页面用户可以进行自主选择图片或者自行添加相册里的图片从而完成对衣服的样式的更改。

3.3 选择方案

当用户DIY 好了衣服样式之后，点击保存按钮，即可将用户设计好的衣服样式保存至已选择方案页面。在已选择方案页面中可以选择衣服样式，并且选择好尺寸，从而跳转到购物车页面进行确认下单。

3.4 购物车确认

在该页面用户将通过确认想要购买的定制衣服并且选中进行结算，在该页面也可以进行对所需要购买衣服的数目进行更改。

3.5 结算页面

在该页面，用户将需要进行对所购买的定制衣服进行地址的选择或者填写，并且实现对定制衣服的最终检查是否为自己所需，并且实现提交。但是由于此处无法进行支付金额，所以定为提交后将会有数据进行展示至历史订单中。

点击选择地址后，可根据现有的地址直接选择或者新增新地址。

图8 购物车结算页面

图9 地址展示页面

图10 结算结果展示

图11 个人信息页面展示

3.6 个人界面

在该页面用户可以查看并修改自己当前的尺寸记录、查询当前物流信息以及查看帮助的问题。

4 结语

本项目通过微信小程序所开发的服装自主DIY 小程序来满足人们日益增长的对自己的创意以及想法所想要创作的热情。通过微信小程序简便而又快捷的方式，使得人们不用下载App，直接打开微信小程序即可享受到将自己的想法进行实现的乐趣，同时也可以快速的分享给好友，即达到推广此小程序的目的，也使得更多的人能够参与到对自己的专属自定义服装的设计上来。此外，此小程序也能够带给当前的服装企业一些启发，明白当代年轻人或者这一类人心中所想，并有针对性的设计出更加符合人们的想法的衣服，有利于商家们经济的增长以及更加贴切的创造出客户们喜欢的衣服，从而实现大批量的生产从而带来给企业带来获利。但究其根本是期望人们能够更加轻易地创造出自己喜欢的衣服。