社区团购微信小程序的设计与实现
归类：微信小程序
1.1 选题背景
坐拥12亿的用户基数[1]的微信可以说是行业龙头，这些年来，传统电商形式的网上购物飞速发展，电商形式的购物以及该融入人们生活当中。而社区团购，则是基于传统电商的基础，新发展出的网购模式，并且十分有前景，适合当下这个时期，发展迅速。社区团购对于传统的电商模式来说，并不是在新的APP上或者PC端网站上进行购物，而是在微信里发展客户，通过每一个微信群里发展一个团长，以家庭为单位，每一户可以在小程序里把想要购买的商品加入购物车，第二天由团长统一配送。为了顺应线上购物的形式以及当下的这样的一个疫情时期，还有每家每户对日常用品的需要和对生鲜产品的刚需，实现便民快捷实惠的社区团购微信小程序是非常有必要的。小程序对于用户最大的优势在于无须安装，用完即走，节省内存，且从微信入口直接下单无需跳转方便快捷，甚至登录信息获取和唤起微信支付都很顺畅，小程序的体验已经几乎接近APP了，很大程度上解放了用户的手机内存，手机内存是有限的，就算有1T的内存，总有用完的时候，所以很多用户都愿意下滑微信使用小程序而不是再下载一个APP，通过小程序来实现自身的需求。至今，很多商家不仅上线了APP，同时APP也与小程序同步，商家逐渐开始拥抱微信小程序。
第二，由于疫情原因，对于各地区的影响也是十分巨大，防疫期间，尽量避免人与人的接触是很也必要的，同时也为用户带来了极大的便利，既实惠又方便，也有助于全民防疫。
三，团购享受方便实惠的同时，更有折上折的优惠，使得商家的商品方便别销售，也让用户享受到更大的优惠。[3]
1.2 研究前身、现状及发展趋势
在整合、微商、移动支付成熟的基础上，2016年湖南长沙地区诞生了第一个社区团购集团。初期阶段，社区团购的运营模式是团长和微信团购等运营商一起推广和展示产品。最常见的是接龙拼团，通过手动会计的方式记账，预仓库模型出现。货款也由团长统一收齐交给供应商。在这个初期阶段，社区集体采购库存量有限，经营收入难以增加。2017年，微信小程序问世。与传统的电子商务网站和APP相比，具有更强的社会属性，具有方便客户接触、传递共享、内容营销等特点，迅速成为电子商务的宠儿。小程序的发布有利于提高交易效率的社区团购，对于增加企业采购库存和减轻社会负担，一些企业采购负责人的社会中心逐渐转向小程序。2018年，微信小程序快速发展，社区团购通常使用小程序作为主要的操作工具。与此同时，微信群、微信支付等的成熟，商业集团内部的以微信小程序为主的社区团购在2018年夏天登场，与无人货架相比更受资本追捧。2019年，由于供应链的脆弱性、秋季潮流、资金链断裂等因素，产业开始交叉整合，许多平台倒闭破产、一体化融合的社区团购退出江湖。从2020年下半年开始，几乎消失的社区团购将重新登场并活跃起来。城市先发制人的产品种类繁多，经济发展迅速，已经达到上限，收入差距难以找到。此后，主要电子商务平台开始关注市场崩溃，寻找利润。传统的电子商务平台在服装、食品、医药、电器、护理等领域已经具有很高的渗透率。但在食品生鲜市场领域，渗透率很低，发展空间巨大。一旦抢先占领了市场，将优先获得一大比的利润。生鲜的市场领域成为各大型电子商务平台的竞争平台。如今，从百团大战到”拼美淘”三分天下，均预示着社区团购在未来会成为人们日常生活的一部分，至少在疫情期间的当下，是一个比较安全且方便的购物方式。
1.3 系统开发意义和目标
本课题主要研究目的有三：其一，在互联网与电商盛行的时代里，对当下社区团购发展的新情况进行了解是具有一定必要性的。其二，不断优化商家，提高流量、曝光率、增加用户的依赖性。其三，从实际出发，为了让用户方便、更实惠地体验享受在家躺着的同时又能进行社区购物，提出针对性建议以及优化的方案也是此次设计的目标。
社区团购与传统电商相比：社区团购是在团长所在区域范围一公里内，用户以家庭为单位，向团长订购所需的生活必需品，以团购的方式，用更加实惠的方式购买所需物品。团长会在订购的第二天将物品送到每家门口。长是社区团购中极其重要的角色，因为团长要负责组队，接受订单，收取货款，移动平台上统一下单，等到所有货品到了小区，团长应通知参与团购的人员到指定地点提货，或者送货上门。另外，团长还负责商品咨询和售后服务。由于团长的存在，解决了传统的电子商务平台的客户服务、配送和售后服务人员的角色，为企业减少了不必要的人力支出，是社区团购平台上每个社区的“灵魂人物”。和其他网购平台莫时相比，社区团购是预售模式，省去了中间囤货的环节，是商家避免了不必要的产品上的损失，并且价格与效率上，相比于传统电商来说，更具有优势。
社区团购最重要的一点是回头客，给顾用户便利，快捷，高效的使用体验。社区团购与传统电商相比，是一种进步。首先，社区团购起源于长沙，其发展时间并不长，不过四年多。社区团购是传统电商不断探索和反复实践的产物。近年来，中国大部分学者开始关注社区团购，并在相关理论研究中取得一定成果，分析了它的运营模式和成功原因。但是大部分人分析了社区团购的运营模式和消费者的需求。本文章将在前人的基础上，对社区团购微信小程序主要对用户体验的影响研究，对小程序的功能和使用环境的优化及通过小程序之间的交互作用增强用于对社区团购微信小程序的依赖，为社区团购的国内快速发展的理论打下了基础。
1.4 系统可行性分析
系统可行性的研究目的为的就是为了在系统研发前期，通过对市场、用户、技术手段等方面的调研，制定出一套可行的研发方案。发现问题，并以最低成本确定解决问题的方案。
客源成本：坐拥12亿的用户基数的微信是一个超级客源流量入口。而小程序是一个桥梁，直接连接的企业与用户，利用熟人关系，快速传播，扩大群规模，然后团长在微信群里推广商品，分享链接，回答客户的问题以及与客户互动和讨论，客户最终通过小程序链接下单。
人力成本低：社区团购的团长一般又在家的宝妈担任，其职责包括客服，推广，配送和售后.
资金周转速度快，物流成本低：社区团购实行预售的方式，客户下单付款，商家拿到货款订购后，统一时间发货。这样就降低了库存成本，也减少物流仓库消耗的成本。
技术可行性：本小程序使用微信开发者工具开发，通过小程序开发框架所提供的自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，小程序自身提供的组件、接口和API，并在视图层与逻辑层间提供了数据传输和事件，为用户提供良好的操作体验。
商品性价比高：直接向源头的生产基地或工厂采购，既保证了产品质量，又降低了产品最终销售价格。1.5 创新之处
1.用户可以通过拼团享团购价。
2.对于传统电商APP，本系统是在微信小程序中使用，让用户的使用更加方便快捷，实惠，高效。
3.运用到新的wxml(WeiXin Markup Language)、wxss(WeiXin Style Sheets)的小程序专属开发语言。[2]
1.6 工作基础及条件
需求基础：了解微信小程序社区团购的流程；老师指导；图书馆或者网上查阅资料
知识条件：熟悉社区团购购物流程，微信小程序操作；熟悉微信小程序系统的开发流程
应用平台：IOS、安卓
开发工具：微信开发者工具
开发语言： WXML(WeiXin Markup Language)、WXSS(WeiXin Style Sheets)、 基于 JavaScript 的逻辑层框架
2.1 逻辑层（App Service）简介
小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
App()和 Page() 方法，进行程序和页面的注册。App必须在app.js中注册，并且不允许注册多个。
Page用来注册页面，接受 object 参数，其指定页面的生命周期函数、事件处理函数、初始数据等。
开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。
2.2 视图层简介
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language) 用于描述页面的结构。WXSS(WeiXin Style Sheet) 用于描述页面的样式。组件(Component)是视图的基本组成单元。[8]
2.3 WXML简介
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 充当的就是类似 HTML 的角色，具有数据绑定、列表渲染、条件渲染、模板、事件、引用等的功能。
2.4 WXSS简介
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
2.5 微信小程序API库
API（Application Programming Interface，应用程序编程接口）。通俗来讲就是一种接口函数，封装好了各种常用函数给每个开发者，然后开发者只需要调用函数即可。微信小程序利用API基本上可以实现数据存储、微信支付、用户信息获取等功能。
图2-1 渲染层与逻辑层关系结构图
系统需求分析与概要设计
3.1 系统功能需求分析
需求分析的过程是系统开发与设计的关键，整个系统要以需求分析为基础，是极其重要的第一步。在这个阶段，多方调查研究用户的需求，从而确定系统的功能，并对系统的业务逻辑层进行建模。所以，需求分析是项目开发中必不可少的一环。社区团购微信小程序需要满足两类人的使用需求，一种是面向前端用户使用的客户端，用户可以通过小程序进行浏览商品，能够清晰的查看到商品的详情，选择客户需求的商品进购物车下单。还可以通过拼团换取优惠券，方便实惠地完成商品购买，清晰的查看到商家的物流以及团长取货地址，一切透明化，让客户更放心。另一种是商家可以在后台注册商品，增删分类、增删改查商品、查看管理订单等，高效率的完成商品的管理。该系统所需功能如下：[9]
首页banner轮播图，为商家投放广告，提高商品曝光。
商家商品按种类分类。
大图展示全部商品列表，月销量，让用户更清晰一目了然。
用户能够自助浏览商品下单，加入购物车。
用户可添加姓名、电话、收货地址信息，并选择默认地址。
用户可以查看购物车，增加或删除商品。
用户可以查看订单。
用户可以分享自己喜欢的商品给微信好友。
商家可以通过后台注册商店，增删分类，增删商品信息，下架商品，查看订单。
3.2 系统流程图模型
社区团购微信小程序前端流程图如图3-3所示：
图3-3 社区团购微信小程序前端流程图
社区团购后台管理系统流程图如图3-4所示：
图3-4 社区团购后台管理系统流程图
坐拥12亿的用户基数[1]的微信可以说是行业龙头，这些年来，传统电商形式的网上购物飞速发展，电商形式的购物以及该融入人们生活当中。而社区团购，则是基于传统电商的基础，新发展出的网购模式，并且十分有前景，适合当下这个时期，发展迅速。社区团购对于传统的电商模式来说，并不是在新的APP上或者PC端网站上进行购物，而是在微信里发展客户，通过每一个微信群里发展一个团长，以家庭为单位，每一户可以在小程序里把想要购买的商品加入购物车，第二天由团长统一配送。为了顺应线上购物的形式以及当下的这样的一个疫情时期，还有每家每户对日常用品的需要和对生鲜产品的刚需，实现便民快捷实惠的社区团购微信小程序是非常有必要的。小程序对于用户最大的优势在于无须安装，用完即走，节省内存，且从微信入口直接下单无需跳转方便快捷，甚至登录信息获取和唤起微信支付都很顺畅，小程序的体验已经几乎接近APP了，很大程度上解放了用户的手机内存，手机内存是有限的，就算有1T的内存，总有用完的时候，所以很多用户都愿意下滑微信使用小程序而不是再下载一个APP，通过小程序来实现自身的需求。至今，很多商家不仅上线了APP，同时APP也与小程序同步，商家逐渐开始拥抱微信小程序。
第二，由于疫情原因，对于各地区的影响也是十分巨大，防疫期间，尽量避免人与人的接触是很也必要的，同时也为用户带来了极大的便利，既实惠又方便，也有助于全民防疫。
三，团购享受方便实惠的同时，更有折上折的优惠，使得商家的商品方便别销售，也让用户享受到更大的优惠。[3]
1.2 研究前身、现状及发展趋势
在整合、微商、移动支付成熟的基础上，2016年湖南长沙地区诞生了第一个社区团购集团。初期阶段，社区团购的运营模式是团长和微信团购等运营商一起推广和展示产品。最常见的是接龙拼团，通过手动会计的方式记账，预仓库模型出现。货款也由团长统一收齐交给供应商。在这个初期阶段，社区集体采购库存量有限，经营收入难以增加。2017年，微信小程序问世。与传统的电子商务网站和APP相比，具有更强的社会属性，具有方便客户接触、传递共享、内容营销等特点，迅速成为电子商务的宠儿。小程序的发布有利于提高交易效率的社区团购，对于增加企业采购库存和减轻社会负担，一些企业采购负责人的社会中心逐渐转向小程序。2018年，微信小程序快速发展，社区团购通常使用小程序作为主要的操作工具。与此同时，微信群、微信支付等的成熟，商业集团内部的以微信小程序为主的社区团购在2018年夏天登场，与无人货架相比更受资本追捧。2019年，由于供应链的脆弱性、秋季潮流、资金链断裂等因素，产业开始交叉整合，许多平台倒闭破产、一体化融合的社区团购退出江湖。从2020年下半年开始，几乎消失的社区团购将重新登场并活跃起来。城市先发制人的产品种类繁多，经济发展迅速，已经达到上限，收入差距难以找到。此后，主要电子商务平台开始关注市场崩溃，寻找利润。传统的电子商务平台在服装、食品、医药、电器、护理等领域已经具有很高的渗透率。但在食品生鲜市场领域，渗透率很低，发展空间巨大。一旦抢先占领了市场，将优先获得一大比的利润。生鲜的市场领域成为各大型电子商务平台的竞争平台。如今，从百团大战到”拼美淘”三分天下，均预示着社区团购在未来会成为人们日常生活的一部分，至少在疫情期间的当下，是一个比较安全且方便的购物方式。
1.3 系统开发意义和目标
本课题主要研究目的有三：其一，在互联网与电商盛行的时代里，对当下社区团购发展的新情况进行了解是具有一定必要性的。其二，不断优化商家，提高流量、曝光率、增加用户的依赖性。其三，从实际出发，为了让用户方便、更实惠地体验享受在家躺着的同时又能进行社区购物，提出针对性建议以及优化的方案也是此次设计的目标。
社区团购与传统电商相比：社区团购是在团长所在区域范围一公里内，用户以家庭为单位，向团长订购所需的生活必需品，以团购的方式，用更加实惠的方式购买所需物品。团长会在订购的第二天将物品送到每家门口。长是社区团购中极其重要的角色，因为团长要负责组队，接受订单，收取货款，移动平台上统一下单，等到所有货品到了小区，团长应通知参与团购的人员到指定地点提货，或者送货上门。另外，团长还负责商品咨询和售后服务。由于团长的存在，解决了传统的电子商务平台的客户服务、配送和售后服务人员的角色，为企业减少了不必要的人力支出，是社区团购平台上每个社区的“灵魂人物”。和其他网购平台莫时相比，社区团购是预售模式，省去了中间囤货的环节，是商家避免了不必要的产品上的损失，并且价格与效率上，相比于传统电商来说，更具有优势。
社区团购最重要的一点是回头客，给顾用户便利，快捷，高效的使用体验。社区团购与传统电商相比，是一种进步。首先，社区团购起源于长沙，其发展时间并不长，不过四年多。社区团购是传统电商不断探索和反复实践的产物。近年来，中国大部分学者开始关注社区团购，并在相关理论研究中取得一定成果，分析了它的运营模式和成功原因。但是大部分人分析了社区团购的运营模式和消费者的需求。本文章将在前人的基础上，对社区团购微信小程序主要对用户体验的影响研究，对小程序的功能和使用环境的优化及通过小程序之间的交互作用增强用于对社区团购微信小程序的依赖，为社区团购的国内快速发展的理论打下了基础。
1.4 系统可行性分析
系统可行性的研究目的为的就是为了在系统研发前期，通过对市场、用户、技术手段等方面的调研，制定出一套可行的研发方案。发现问题，并以最低成本确定解决问题的方案。
客源成本：坐拥12亿的用户基数的微信是一个超级客源流量入口。而小程序是一个桥梁，直接连接的企业与用户，利用熟人关系，快速传播，扩大群规模，然后团长在微信群里推广商品，分享链接，回答客户的问题以及与客户互动和讨论，客户最终通过小程序链接下单。
人力成本低：社区团购的团长一般又在家的宝妈担任，其职责包括客服，推广，配送和售后.
资金周转速度快，物流成本低：社区团购实行预售的方式，客户下单付款，商家拿到货款订购后，统一时间发货。这样就降低了库存成本，也减少物流仓库消耗的成本。
技术可行性：本小程序使用微信开发者工具开发，通过小程序开发框架所提供的自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，小程序自身提供的组件、接口和API，并在视图层与逻辑层间提供了数据传输和事件，为用户提供良好的操作体验。
商品性价比高：直接向源头的生产基地或工厂采购，既保证了产品质量，又降低了产品最终销售价格。1.5 创新之处
1.用户可以通过拼团享团购价。
2.对于传统电商APP，本系统是在微信小程序中使用，让用户的使用更加方便快捷，实惠，高效。
3.运用到新的wxml(WeiXin Markup Language)、wxss(WeiXin Style Sheets)的小程序专属开发语言。[2]
1.6 工作基础及条件
需求基础：了解微信小程序社区团购的流程；老师指导；图书馆或者网上查阅资料
知识条件：熟悉社区团购购物流程，微信小程序操作；熟悉微信小程序系统的开发流程
应用平台：IOS、安卓
开发工具：微信开发者工具
开发语言： WXML(WeiXin Markup Language)、WXSS(WeiXin Style Sheets)、 基于 JavaScript 的逻辑层框架
2.1 逻辑层（App Service）简介
小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
App()和 Page() 方法，进行程序和页面的注册。App必须在app.js中注册，并且不允许注册多个。
Page用来注册页面，接受 object 参数，其指定页面的生命周期函数、事件处理函数、初始数据等。
开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。
2.2 视图层简介
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language) 用于描述页面的结构。WXSS(WeiXin Style Sheet) 用于描述页面的样式。组件(Component)是视图的基本组成单元。[8]
2.3 WXML简介
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 充当的就是类似 HTML 的角色，具有数据绑定、列表渲染、条件渲染、模板、事件、引用等的功能。
2.4 WXSS简介
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
2.5 微信小程序API库
API（Application Programming Interface，应用程序编程接口）。通俗来讲就是一种接口函数，封装好了各种常用函数给每个开发者，然后开发者只需要调用函数即可。微信小程序利用API基本上可以实现数据存储、微信支付、用户信息获取等功能。
图2-1 渲染层与逻辑层关系结构图
系统需求分析与概要设计
3.1 系统功能需求分析
需求分析的过程是系统开发与设计的关键，整个系统要以需求分析为基础，是极其重要的第一步。在这个阶段，多方调查研究用户的需求，从而确定系统的功能，并对系统的业务逻辑层进行建模。所以，需求分析是项目开发中必不可少的一环。社区团购微信小程序需要满足两类人的使用需求，一种是面向前端用户使用的客户端，用户可以通过小程序进行浏览商品，能够清晰的查看到商品的详情，选择客户需求的商品进购物车下单。还可以通过拼团换取优惠券，方便实惠地完成商品购买，清晰的查看到商家的物流以及团长取货地址，一切透明化，让客户更放心。另一种是商家可以在后台注册商品，增删分类、增删改查商品、查看管理订单等，高效率的完成商品的管理。该系统所需功能如下：[9]
首页banner轮播图，为商家投放广告，提高商品曝光。
商家商品按种类分类。
大图展示全部商品列表，月销量，让用户更清晰一目了然。
用户能够自助浏览商品下单，加入购物车。
用户可添加姓名、电话、收货地址信息，并选择默认地址。
用户可以查看购物车，增加或删除商品。
用户可以查看订单。
用户可以分享自己喜欢的商品给微信好友。
商家可以通过后台注册商店，增删分类，增删商品信息，下架商品，查看订单。
3.2 系统流程图模型
社区团购微信小程序前端流程图如图3-3所示：
图3-3 社区团购微信小程序前端流程图
社区团购后台管理系统流程图如图3-4所示：
图3-4 社区团购后台管理系统流程图
