基于微信小程序的服装个性化定制系统设计与实现

韦玉辉, 苏兆伟,2， 潘梦诗

(1. 安徽工程大学 纺织服装学院，安徽 芜湖 241000；2. 杭州职业技术学院 达利女装学院，浙江 杭州 310018)

微信小程序自2017 年1月9日由腾讯公司正式推出后，因具有开发成本低、用户获取成本低、用户体验好、用户保留率高、访问方便等特点，逐渐成为各大实体经济进行网络信息推广的首选平台[1-3]。同时，随着消费者自我意识的增强，人们对于个性化定制的需求越来越强烈[4- 6]。结婚作为人生大事，是展示自我个性的重要场合，因此根据自己的喜好定制婚礼服逐渐成为准新娘首选的嫁衣置办方式[7-8]。目前关于中式婚礼服的研究主要集中在服装款式结构设计、图案设计、制作工艺、服饰配件的穿搭技巧等方面[9-10]，而鲜有关于定制婚礼服设计的研究[11-12]。因此，文中以微信小程序为开发平台，以中式婚礼服为例，详细阐述其开发流程及涉及到的关键技术手段。该研究可为从事服装个性化定制平台研发的企业提供理论参考。

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

1.1 功能需求分析

通过对线上线下25个婚庆服饰品牌以及100场中式婚礼中新娘服装款式结构的市场调研，并对20位准新娘(大专以上学历，对自己的服装有清晰认知和独特要求)的消费需求进行分析，明确目前市场上中式婚礼服的款式结构特点和消费者个性化需求，进而确定中式婚礼定制中款式造型结构的模块组成及系统功能要求，具体如图1所示。

图1 系统整体功能要求Fig.1 Overall functional requirements of the system

由图1可以看出，可以将系统程序分为8个模块，分别是微信授权登录模块、尺寸选择模块、款式选择模块、色彩选择模块、面料选择模块、图案选择模块、工艺选择模块和订单输出模块。

1.1.1微信授权登录模块 微信授权登录模块存在于微信公众平台。用户的基本信息会通过OAuth 2.0授权传递给程序后台，不再需要用户提供账号和密码给第三方应用软件。该模块通过授权验证的方法，由微信将用户和第三方连接起来，且不必担心用户账号和密码泄露的问题。

1.1.2尺码选择模块 尺码选择模块只提供给登录用户使用。用户参考系统提示以及个人体型选择适合自己的尺码，并将相关信息储存到数据库中，以便后期定制服装时制版使用。该模块包含了身高、体质量、肩宽、胸围、腰围、臀围、臂根围。

1.1.3款式选择模块 款式选择模块是系统的核心模块之一，主要包含：领型选择模块、门襟选择模块、衣身选择模块、袖型选择模块、裙型选择模块以及档牌选择模块。用户可以根据系统提供的部件图示选择自己喜欢的领型、门襟、衣身等部件来定制符合自己个性的婚礼服。

1.1.4色彩选择模块 色彩选择模块是系统的核心模块之一，模块中包含红色、粉色以及蓝色等中式婚礼服常用色彩。用户可以在该模块中选择自己心仪的色彩，并保存在数据库中。

1.1.5面料选择模块 面料选择模块是系统的核心模块之一，模块中包含棉、麻、丝等常用于制作中式婚礼服的各种面料。用户根据系统展示的面料图样选择合适的面料选项。系统在后台将选中的信息储存在数据库中。

1.1.6图案选择模块 图案选择模块是系统的核心模块之一，其包含动物图案、植物图案、民族图案等中式婚礼服常用的各种图案。用户根据系统展示的图样选择喜欢的图案选项。系统将用户的选项信息进行储存。

1.1.7工艺选择模块 工艺选择模块也是系统的核心模块之一，其包含刺绣、盘扣、手工烫钻等传统工艺和现代工艺。用户可根据自己的需求选择相应的工艺。系统同样会将相关信息进行保存。

1.1.8订单输出模块 订单输出模块是依据用户在上述各模块中所选择的选项，在后台对存储到数据库中的信息进行分析处理。输出内容主要包括款式、色彩、面料、图案、工艺信息。

1.2 系统架构设计

图2为中式婚礼服定制微信小程序的物理设计。由图2可以看出，基于微信小程序的中式婚礼服个性化定制系统是一个由系统应用表现层、系统网络层、系统功能层和系统技术层组成的多层级系统，且各层之间存在相互协调的关系。

1.3 系统技术选型

1.3.1系统开发模型 中式婚礼服个性化定制微信小程序以瀑布模型[7-8]作为软件开发模型。瀑布模型是1970 年由温斯顿·罗伊斯(ROYCE W)提出的，模型中给出了软件生存周期活动的固定顺序，在上一阶段的活动完成后，必须经过严格的评估审核，才可以进行下一阶段的研究等活动，最终得到软件产品，因此也称为软件生存周期模型。瀑布模型具体如图 3所示。

图2 中式婚礼服定制微信小程序的物理设计Fig.2 Physical design of customized WeChat applet for Chinese wedding dress

图3 系统开发模型——瀑布模型示意Fig.3 System development model—waterfall model

1.3.2系统技术架构 微信小程序是利用微信平台实现的。微信官方会提供一整套的开发框架，开发者能够参考微信开发文档进行操作程序的开发与调试。官方公布的微信开发工具名为微信Web开发者工具，具体技术架构如图4所示。

图4 系统技术框架Fig.4 System technical framework

由图4可以看出，整个小程序技术框架共分为逻辑层和视图层，其中，逻辑层为小程序提供运行环境和特有功能；视图层用来渲染页面结构。逻辑层和视图层之间的关系是指将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。程序技术框架包括6个文件夹，分别是images文件、pages文件、utils文件、app.json文件、app.js文件以及app.wxss文件。

1)将images文件又分为6个小文件夹，里面分别放置的是款式图、色彩图、面料图、图案、工艺图以及效果图。款式文件又可分为领型、门襟、衣身、袖型、裙型及档牌等小文件。系统程序通过内部代码将图片放置在程序界面的固定位置。

2)在pages文件中最关键的是index文件，里面分别放置index.js,index.wxss及index.wxml文件。其中index.js文件定义页面，index.wxml文件用来进行页面的整体结构设计，index.wxss文件用来定义组件的显示方式。

3)该技术框架中，utils文件夹下为util.js文件，其中包含了一些工具函数，方便程序调用函数。

4)除了images文件、pages文件以及utils文件外，技术框架中还包括app.js文件、app.json文件以及app.wxss文件。这3个应用文件是程序的主体部分。其中app.js文件是项目的入口文件，用来放置事件处理函数；app.json文件用来对程序进行全局配置，决定页面的路径、窗口等内容；app.wxss文件用来设置全局的样式，作用于小程序的所有页面。

2 系统开发流程及关键技术

为完成基于微信小程序的中式婚服个性化定制系统设计，文中研究了其系统开发流程以及关键技术，具体包括以下5点。

2.1 微信小程序的申请注册与账号设置

为完成定制系统的设计与制作，首先需要进行微信小程序号的注册与账号设置。具体操作步骤为：①选择合适的小程序号类型(该系统仅是实现中式婚礼服的定制效果展示，以个人身份进行注册即可)；②根据注册流程，填写注册资料、身份验证、邮箱验证激活及补充信息等，并及时勾选“同意协议”选项，点击注册，完成开发程序号的注册；③通过基本设置、第三方设置、版本管理等信息的填写，完成小程序账号设置，并登记管理员信息成为系统管理员，具体注册界面如图5所示。

2.2 获取微信小程序的AppID

微信小程序注册成功后，登录到小程序开发账号。在开发者工具界面的左上方点击“设置”按钮，会在界面的右边出现小窗口，再点击小窗口上方的“基本信息”按钮即可出现小程序的AppID等相关信息，具体界面如图6所示。

图5 小程序注册界面Fig.5 Registration interface of WeChat applet

图6 获取程序AppIDFig.6 Getting the AppID of the program

2.3 创建微信小程序项目

在微信开发者工具界面左上方点击“项目”中的“新建项目”按钮，点击后需要填写AppID和项目名称，并选择一个计算机本地文件夹作为代码存放的路径。如果选择的文件夹是空的，最后需要勾选“创建quick start项目”选项，项目就被成功创建，具体如图7所示。

图7 创建程序项目 Fig.7 Creating program project

此外，微信开发者工具包含编辑、调试以及项目3个部分。创建项目后，开发者点击该项目即可进入到真正的开发者工具界面。在“编辑”界面内编辑和修改代码，在“调试”界面内测试代码，在“项目”界面内查看小程序属性、修改配置。

2.4 编写微信小程序代码

在开发者工具界面点击“编辑器”选项，便可查看和编辑小程序的代码。在该项目中包含了一些简易的应用文件，其中app.js,app.json,app.wxss是最重要的3个文件。这3个文件是小程序的主体，文件名称不可随意更改，app.js文件放置的是脚本代码，app.json文件放置的是配置代码，app.wxss文件放置的是公共样式表。程序代码编写具体如图8所示。

图8 编写程序代码Fig.8 Writing program code

2.5 创建微信小程序界面

在微信小程序的项目中，除了包含3个应用文件外，还包括pages目录和utils目录，其中pages目录一般由index界面和logs界面组成。每一个界面都需要写在app.json的pages中，并且都由4个文件组成，文件的后缀分别是.js,.json,.wxss,.wxml，其中.js定义的是逻辑文件，.json定义的是配置文件，.wxss定义的是页面样式文件，而.wxml定义的是页面结构文件。创建程序界面具体如图9所示。

图9 创建程序界面Fig.9 Creating program page

3 系统运行与功能测试

3.1 场景设计

为验证基于微信小程序的中式婚礼服个性化定制系统的可行性，文中选择了一种场景进行方法验证，具体场景设置见表1。

3.2 功能测试

根据表1的用户要求进行系统功能测试。图10为根据用户需求获得的系统运行结果。由图10可知，系统基本实现了顾客个性化款式结构造型特征表达的需求。但目前的定制系统只能将定制服装的款式结构特征准确表达出来，而定制服装的色彩、面料材质、装饰工艺还不能准确表达，这也是研究团队后期需要重点解决的问题。

表1 用户场景设置

图10 测试结果Fig.10 Test result

4 结语

为实现以消费者需求为中心的服装个性化定制与移动终端的结合，文中设计开发了一套基于微信小程序的中式婚礼服个性化定制系统。研究表明，利用微信小程序进行中式婚礼个性化定制系统设计开发是完全可行的。该研究既为正在从事服装个性化定制系统开发的企业提供了一种研发成本低且易于推广的个性化定制系统设计方法，也可为中国服装行业的转型升级提供帮助，有助于推动个性化定制的发展。