【《基于微信小程序的蛋糕店订购系统设计与实现》9500字（论文）】

II基于微信小程序的蛋糕店订购系统设计与实现摘要：随着移动互联网接入和智能手机的出现，微信在许多移动节目中被大多数用户广泛使用。微信有了更多更快的发展之后使得更多的个人和企业家看到了微信市场的好处，并逐渐加入了微信市场，这是一个微型企业。它是日程信息的扩展，可以提高销售业绩，基于此开发了一个乐馨蛋糕店的小程序。乐馨蛋糕店小程序使用云在线开发，采用HTML、CSS、JS等技术。在此小程序中可以简单的操作并且购买喜欢的蛋糕，此平台应用操作简单，界面清晰，治理良好，功能完善，使用高端。通过乐馨蛋糕店的微信小程序，用户可以在没有时间和地点限制的情况下购买蛋糕。用户不需要下载和安装手机软件。打开微信平台进入小程序购买蛋糕。同时，使用基于小程序的乐馨蛋糕店可以提高蛋糕店的营业额。本平台对乐馨蛋糕店微信小程序进行了一系列的测试，包括系统需求分析、总体设计分析、详细设计分析，并从开发环境、目标、流程、功能等方面进行了总体规划。该平台根据用户需求开发了多个功能模块，让用户更好地了解微信小程序的好处，最大限度地为用户提供一个方便的购买平台，本平台具有界面简单、使用迅捷、易理解、易管理等优点，具有功能齐全、操作方便等特点，具有较高的应用价值。关键词：小程序；微信公众平台；云开发；蛋糕店目录TOC\o"1-3"\u1绪论 11.1研究背景 11.2研究目的和意义 11.2.1研究目的 11.2.2研究意义 22开发工具及技术 32.1开发工具 32.2开发技术 52.2.1前端技术 52.2.2后端技术 53系统分析 63.1可行性分析 63.1.1技术可行性 63.1.2操作可行性 63.1.3经济可行性 63.2需求分析 73.2.1功能需求 73.2.2性能需求 93.2.3可靠性和可用性分析 93.2.4出错处理需求 93.2.5接口需求 103.2.6UML建模 104系统设计 134.1概要设计 134.2逻辑设计 144.2.1小程序业务流程图 144.2.2小程序登录流程图 154.2.3小程序购买流程图 164.3数据库设计 174.3.1设计局部E-R图 174.3.2整体E-R图设计 194.3.3数据库表 205编码实现 225.1菜单功能模块的实现 225.1.1界面展示 225.1.2编码实现 235.2商品详情功能模块的实现 245.2.1界面展示 245.2.2编码实现 255.3购物车功能模块的实现 275.3.1界面展示 275.3.2编码实现 275.4结算功能模块的实现 295.4.1界面展示 295.4.2编码实现 305.5订单功能模块的实现 325.5.1界面展示 325.5.2编码实现 325.6我的收藏功能模块的实现 335.6.1界面展示 335.6.2编码实现 345.7个人资料功能模块的实现 355.7.1界面展示 355.7.2编码展示 366系统测试 396.1测试定义 396.2测试用例 396.2.1授权用例 396.2.2修改地址用例 406.2.3菜单测试用例 406.2.4订单测试用例 406.2.5购物车测试用例 406.2.6收藏测试用例 41参考文献 431绪论1.1研究背景世界经济发展越来越快，电子信息科学技术已经广泛在经济贸易领域中应用，接着电子商务也随之兴起。作为电子商务系统的重要组成部分，网购具有广阔的应用前景，并且受到广大消费者的喜爱。近十几年来，随着微信的快速发展，它的体系变得越来越完善，微信小程序的发展，更是给企业、个人打开了许多商机，总能有更多的人关注到微信营销。微信具有信息传递快速、及时的特点，使得微信营销的周转显著，微信支付系统的完善也为我们的小程序营销提供了便利。与传统实体店销售相比，微信营销具有无可比拟的优势，如降低实体店成本、人员工资、还有信息传递及时、客户群体广泛、以及不受时间和地点限制等，可以大大提高商店营业额，也方便用户通过微信小程序购买商品。因此，乐馨蛋糕店小程序的开发，具有重大意义。1.2研究目的和意义1.2.1研究目的国内外概况：在欧洲、北美等信息化水平较高的国家和地区，网店发展迅速，北美的顶级和顶级贸易商，如沃尔玛、凯马特、Homestorage、Krog、J.C.Penney等，都在网商的行列中占有一席之地。在中国，网上购物系统从无到有也才不过短短几年时间[1]。1998年，彦沙友谊中心在中国发布了第一个网上购物网站，它最先通过网上购物中心出售了一个景德镇的陶瓷工艺品。虽然商品的支付不是在网上进行的，但是这是中国销售业的第一次网上购买。网上购物是1999年才被承认的。随着互联网的普及和13亿多人的消费，一些风险投资家争夺中国网络购物市场的竞争仍在继续，如当当网、eBay、8848等。中国的网上购物正是处于蓬勃发展的阶段。2000年3月，中国拥有购物网站近800家，其中传统零售占近1/3，纯网店占2/3，2013年中国网络市场交易规模达到1.85万亿元，中国网络购物市场整体将保持较快增长，而中国网络购物市场的交易规模预计将达到7000亿元人民币在2020-2021年[2]。1.2.2研究意义（1）对用户：使顾客对乐馨蛋糕店形成一个好的印象，成为乐馨蛋糕店的忠实顾客，使乐馨蛋糕店有一个良好的口碑。（2）对乐馨蛋糕店：对自身进行一次新的定位，瞄准市场目标，对市场行情有一个深入了解，扩大市场占有率，不断改善乐馨蛋糕店的经营情况，提高美誉度。2开发工具及技术2.1开发工具微信开发者工具是微信小程序的官方开发工具，专注于微信小程序的开发，调试，预览，上传等功能模块[3]。微信团队已经发布了微信小程序开发者工具、微信小程序开发文档以及微信小程序设计指南，还有全新的开发者工具技术，集成了开发人员调试、代码编辑及程序发布等功能，使得开发者简单和高效地开发微信小程序。程序调试主要有三大功能区：模拟器、调试工具和小程序操作区。模拟器：模拟器能够模拟出微信小程序在客户端界面准确的逻辑表现，对于绝大部分的API接口来说，均能够在模拟器上呈现出正确的状态[4]。调试工具：调试工具分为6大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel如图2.1所示。图2.1Wxml面板Wxml面板用于帮助开发人员开发Wxml转换接口。在这里我们可以看到准确的页面结构和对应该结构的Wxss属性，同时，通过修改对应Wxss属性，我们可以在模拟器中实时看到修改。通过调试模块左上角的选择器，还可以迅速找到页面中组件对应的Wxml代码[5]。源窗格用于显示当前项目的脚本文件。与浏览器开发不同的是，微信小程序框架编译脚本文件，所以源面板开发者在面板中看到的文件就是经过处理后的脚本文件。开发人员的代码将被包装在define函数中，对于页面代码，在最后会有一个活动调用require。Netwrok面板用于观察和显示请求以及套接字请求。Appdata面板用于显示当前项目的当前时间Appdata的具体数据，并实时反馈项目数据。可以在这里编辑数据并及时反馈到接口。存储面板用于显示当前项目的使用情况。wx.setStorage或者wx.setStorageSync设置测试后的数据存储[6]。控制台面板有两个主要功能：开发者可以在这里输入和调试代码，以及微信小程序的错误输出。如图2.2所示。图2.2源面板2.2开发技术2.2.1前端技术WXML全称是WeiXinMarkupLanguage，叫做微信标识语言，是微信小程序的标签语言，与小程序的基础组件、事件系统结合之后，可以构建出页面的结构。与HTML语言类似，不过wxml语言也有自己的特色。WXSS(WeiXinStyleSheets)是微信样式表，是微信小程序用于修饰标签语言的样式文件，WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者[7]，WXSS具有CSS大部分特性，同时为了更适合开发微信小程序，WXSS对CSS语言进行修改和扩充，引入全新尺寸单位rpx，但大体语法于CSS语言不分离。JS是JavaScript语言的简称，微信小程序里面也可以叫做WXS，是一门脚本语言，通俗易懂，用于页面交互的语言[7]。2.2.2后端技术小程序云开发是微信团队联合腾讯云推出的专业的小程序开发服务[1]。开发者可以使用微信公众平台快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发。云开发技术：（1）无需搭建服务器，快速构建小程序、公众号。（2）免登录、免鉴权调用微信开放服务。（3）统一开发多端应用。（4）不限开发语言和框架。（5）按量计费，成本更低。

3系统分析3.1可行性分析通过对小程序的可行性分析，确定研究方向，明确目标，找到解决问题的方法。根据负责系统的可行性分析，确定最终的选型方案，协助我做出更合理、科学的设计选择。3.1.1技术可行性技术可行性是指的是所掌握的技术是否能够完成本毕业设计，假如本身没有相关的技术储备，而且不能够迅速学会微信小程序开发技术，那恐怕到不了我的设计目的与要求。乐馨蛋糕店小程序采用云开发、基于微信平台开发设计，我作为一名计算机科学与技术专业的学生，在学校期间就学习到许多编程方面的知识，向C和JAVA语言都是通常在用，当然也包括各种编程软件，对这些编程软件的应用了解也比较全面，也在学习网站上学习了很多的编程课程，所以我对这次的毕业设计信心十足[8]。3.1.2操作可行性乐馨蛋糕店小程序是基于微信开发工具开发的，操作十分简单快速，只需要用户拥有一台智能手机，用户打开微信客户端应用软件，进入到乐馨蛋糕店小程序，便可以进行蛋糕分类查看、蛋糕商品收藏，加入购物车以及购买操作，方便快捷，因此是具有操作可行性的。3.1.3经济可行性本小程序采用的开发工具软件都是开源的，这样不仅仅能够削减很多的精力和资源，降低开发成本[9]。而且也能够提高设计的效率，基于微信小程序的乐馨蛋糕店对手机性能配置基本上没有很大要求，目前来看，以个人智能手机来说，均可实现，能够满足需要，因此，本平台的开发在经济上是具有可行性的。总的来说，设计一个基于微信小程序的乐馨蛋糕店具有效率高，操作简便，降低成本等优点。所以，建立一个基于微信小程序的乐馨蛋糕店是十分可行的。3.2需求分析3.2.1功能需求乐馨蛋糕店微信小程序主要实现了用户通过微信授权进入乐馨蛋糕店小程序系统，进行查看菜单，订单，添加购物车，管理我的，主要研究内容如下。菜单：用户可在主界面按照蛋糕分类查看蛋糕商品，并且可以点击查看某一种蛋糕商品详情信息，进入之后可看到蛋糕商品的详细信息；订单：用户可以点击订单查看购买过的订单信息；购物车：用户可以把想要购买的蛋糕商品加入购物车，并且可以管理我的购物车，可以进行修改蛋糕商品数量、删除某一个蛋糕商品、进行结算；我的：我的模块包括我的收藏和个人资料，用户可以管理我的收藏信息，对个人资料进行修改。数据流图顶层数据流图：0层数据流图：图3.1小程序数据流图数据字典图3.2小程序数据字典3.2.2性能需求（1）存储性：因为是乐馨蛋糕店小程序，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂，这就需要一个强大的数据库来存放更多的数据和保证数据的实时性[10]。（2）易学性：小程序的设计应该是简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉小程序的过程。（3）安全性：在信息时代，信息是宝贵的资产，小程序的安全性必须得到充分的保证。（4）先进性。结合已有技术和主流技术，开发满足用户需求并适合用户需求的小程序。（5）可扩展性。提前考虑到小程序设计的系统可扩展性，未来升级和更新小程序是否方便。（6）验证有效性，设计小程序应尽可能满足客户需求。（7）小程序的数据要求：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。3.2.3可靠性和可用性分析可靠性：乐馨蛋糕店微信小程序的制作比较简单明了，用时半个月。用户在有正行的网络情况下便可快速的进入乐馨蛋糕店小程序。乐馨蛋糕店小程序功能基本比较容易，用户可以快速上手，每个功能点也容易设置，经过一系列的测试得出小型错误小于5个。可用性：乐馨蛋糕店微信小程序界面清晰，容易看懂，容易操作，基本上刚上手就会使用。在验证身份方面，我们创建了开发者与用户两种权限，通过唯一微信帐号的唯一授权，可以有效控制相应各自的访问资格，防止或限制非法访问。3.2.4出错处理需求程序错误类型有语法错误、语义错误和逻辑错误，其中，语法错误和逻辑错误可以通过编译器发现，逻辑错误能由编译人员通过比对结果和设计方案发现并处理。3.2.5接口需求用户接口需求；硬件接口需求；软件接口需求；通信接口需求。3.2.6UML建模用户在微信通过微信授权后进入乐馨蛋糕店小程序首页，用户可以在首页浏览蛋糕，查看蛋糕分类，在选择自己喜欢的蛋糕之后可以添加到我的收藏，还可以加入购物车进行管理，且可以直接下单并生成订单。如图3.3所示。图3.3用户用例图开发人员在后台进行用户管理、用户地址信息管理、对蛋糕商品进行分类信息管理、新型蛋糕上架管理、生成订单。如下图所示。图3.4开发者用例图活动图是模型中的完整单元，表示一个程序或工作流，常用于计算流程和工作流程的建模。乐馨蛋糕店小程序的活动图如图3.5所示。图3.5用户活动图时序图通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。乐馨蛋糕店小程序的时序图如图3.6所示。图3.6用户时序图

4系统设计4.1概要设计随着智能手机应用的广泛使用，人们对基于智能手机的软件提出了越来越高的要求。在众多手机软件平台中，微信的使用占据了主导地位，基本实现了该软件必须安装在手机上的现状[11]。为了最大限度地满足用户购买蛋糕的需求，基于微信开发平台开发了乐馨蛋糕店微信小程序应用。本乐馨蛋糕店微信小程序的设计目标如下。1.数据准确推动乐馨蛋糕店小程序基于微信开发平台的数据验证和数据共享的规范化、制度化，提高乐馨蛋糕店相关数据查询的准确性和效率。2.功能全面基于微信开发平台的乐馨蛋糕店小程序主要实现用户通过微信平台进入乐馨蛋糕商城首页，随时查看和购买蛋糕。3.操作简单基于微信开发平台实现的乐馨蛋糕店小程序，以建设操作简单的界面，最大限度的方便用户操作使用。4.高安全性基于微信开发平台的乐馨蛋糕店小程序具备数据库备份和恢复功能，提高数据的安全性。本基于微信开发平台的乐馨蛋糕店小程序的功能结构设计如图4.1所示。图4.1小程序功能图4.2逻辑设计4.2.1小程序业务流程图本小程序的业务流程如图4.2所示。图4.2小程序业务流程图4.2.2小程序登录流程图本小程序的业务流程如图4.3所示。图4.3小程序登录流程图4.2.3小程序购买流程图小程序购买流程图如图4.4所示。图4.4小程序购买流程图4.3数据库设计4.3.1设计局部E-R图设计概念就是在数据分析的基础上自下而上的对整个系统的数据库概念结构进行设计。从用户的角度对视图进行开发，然后集成视图，最后分析从而取得结果。对概念进行设计时采用实体—联系（E-R）的模型开发措施。E-R模型的构成元素有：实体、属性、联系，E-R模型可以用E-R图来表示，是对用户工作环境中所相关的事物给予提示，对实体特性的描述就是属性。设计概念的出发点是能够对企业组织信息要求的数据库概念结构进行反映，就是概念模式。概念模式不依附数据库逻辑结构，也不依赖支持数据库的DBMS，独立于计算机系统[12]。通过上述分析对数据库的需求，与系统概念模型的特点及开发方法相结合，我们可以建立E-R模型图。实体和属性的定义:收藏(id、用户信息、微信号)实体。图4.5收藏实体E-R图蛋糕（id、最新推荐、描述、小图片、大图片、名称、英文名称、类型、类型描述、价格）实体。图4.6蛋糕实体E-R图规格（id、尺寸、包装、配送）实体。图4.7规格实体E-R图地址（id、地址、默认、细节、电话、性别、标签、用户、用户信息）实体。图4.8地址实体E-R图订单（id、订单日期、用户地址、用户信息）实体。图4.9订单实体E-R图4.3.2整体E-R图设计图4.10小程序整体E-R图4.3.3数据库表本基于微信小程序的乐馨蛋糕店的数据表如下。表4.11like收藏信息表字段名称字段意义字段类型字段长度是否主键能否为空id编号int25是否userInfo商品信息varchar50否是openId微信号varchar50否是表4.12product商品信息表字段名称字段意义字段类型字段长度是否主键能否为空id编号int25是否is_hot最新推荐varchar50否是desc描述varchar50否是small_img小图片varchar50否是large_img大图片varchar50否是name名称varchar50否是enname英文名称varchar50否是type类型varchar50否是type_desc类型描述varchar50否是price价格float15否是表4.13product_rule商品规格信息表字段名称字段意义字段类型字段长度是否主键能否为空id编号int25是否size尺寸varchar50否是package包装varchar50否是send配送方式varchar50否是表4.14address地址信息表字段名称字段意义字段类型字段长度是否主键能否为空id编号int25是否address地址varchar50否是phone电话long11否是sex性别char2否是tag默认char2否是user用户varchar50否是userInfo用户信息varchar50否是detail地址varchar50否是表4.15order订单信息表字段名称字段意义字段类型字段长度是否主键能否为空id编号int25是否Idno订单号varchar50否是orderDate下单日期date25否是products商品varchar50否是count数量varchar50否是img图片varchar50否是name名称varchar50否是price价格varchar50否是productileId商品编号varchar50否是rule尺寸varchar50否是package包装varchar50否是userAddress地址varchar50否是phone电话long11否是5编码实现5.1菜单功能模块的实现5.1.1界面展示用户可以按照分类查看菜单信息，点击可以查看蛋糕详情信息，系统主界面展示如图5.1所示。图5.1首页界面图5.1.2编码实现<view

class="menu">

<!--

轮播图

-->

<view>

<swiper

class="swiper"

autoplay="{{swiperOptions.autoplay}}"

interval="{{swiperOerval}}"

circular="{{swiperOptions.circular}}">

<block>

<swiper-item

wx:for="{{bannerData}}"

wx:key="index">

<image

src="{{item.imgUrl}}"

mode="widthFix"

class="auto-img

swiper-img"></image>

</swiper-item>

<swiper-item

wx:for="{{bannerData}}"

wx:key="index">

<image

src="{{item.imgUrl}}"

mode="widthFix"

class="auto-img

swiper-img"></image>

</swiper-item>

<swiper-item

wx:for="{{bannerData}}"

wx:key="index">

<image

src="{{item.imgUrl}}"

mode="widthFix"

class="auto-img

swiper-img"></image>

</swiper-item>

<swiper-item

wx:for="{{bannerData}}"

wx:key="index">

<image

src="{{item.imgUrl}}"

mode="widthFix"

class="auto-img

swiper-img"></image>

</swiper-item>

</block>

</swiper>

</view>

<!--

商品展示区域

-->

<view

class="products">

<!--

侧边栏菜单

-->

<view

class="fl

aside">

<view

class="aside-item

{{item.isActive

?

'active'

:

''}}"

wx:for="{{asideData}}"

wx:key="index"

data-active="{{item.isActive}}"

data-index="{{index}}"

data-key="{{item.key}}"

data-value="{{item.value}}"

bindtap="toggleAsideMenu">{{item.title}}</view>

</view>

<!--

商品

-->

<view

class="fl

pro-box">

<view

class="pro-item

clearfix"

wx:for="{{productData}}"

wx:key="index"

data-id="{{item._id}}"

bindtap="goDetail">

<!--

商品图片

-->

<view

class="pro-img

fl">

<image

class="auto-img"

src="{{item.small_img}}"

mode="widthFix"></image>

</view>

<!--

商品文本描述

-->

<view

class="pro-text

fl">

<view

class="pro-name">

<view

class="ch-name">{{}}</view>

<view

class="en-name">{{item.enname}}</view>

</view>

<view

class="pro-price">${{item.price}}</view>

</view>

</view>

</view>

</view></view>5.2商品详情功能模块的实现5.2.1界面展示用户可以查看商品详情信息，可以选择尺寸、包装盒配送方式，输入数量进行加入购物车和立即购买，商品详情界面展示如图5.2所示。图5.2商品详情界面图5.2.2编码实现<view

class="detail">

<!--

商品大图

-->

<view>

<image

class="auto-img"

src="{{detailData.large_img}}"

mode="widthFix"></image>

</view>

<view

class="detail-box">

<!--

商品名称

-->

<view

class="pro

clearfix">

<view

class="fl

pro-name">{{detailD}}</view>

<view

class="fr

pro-like"

data-id="{{detailData._id}}"

bindtap="likeProduct">

<image

class="auto-img"

src="../../images/icons/{{isLike

?

'like_active'

:

'like'}}.png"

mode="widthFix">

</image>

</view>

</view>

<!--

规格标签

-->

<view

class="rule">

<view

class="rule-item

clearfix"

wx:for="{{ruleType}}"

wx:key="index">

<view

class="fl

rule-title">{{ruleData[item].key}}</view>

<view

class="fl

rule-tag

clearfix">

<view

class="fl

rule-tag-item

{{value.isSelect

?

'active'

:

''}}"

wx:for="{{ruleData[item].value}}"

wx:for-item="value"

wx:for-index="i"

wx:key="i"

data-isselect="{{value.isSelect}}"

data-i="{{i}}"

data-type="{{item}}"

bindtap="toggleRule">{{value.v}}</view>

</view>

</view>

</view>

<!--

商品描述

-->

<view

class="desc">

<view

class="desc-title">商品描述</view>

<view>

<view

class="desc-text"

wx:for="{{detailData.desc}}"

wx:key="index">{{item}}</view>

</view>

</view>

<!--

商品价格数量

-->

<view

class="price-count

clearfix">

<view

class="fl

price">${{detailData.price}}</view>

<view

class="fr

clearfix">

<view

class="icon

fl"

bindtap="decrease">

<image

class="auto-img"

src="../../images/icons/reduce.png"

mode="widthFix"></image>

</view>

<view

class="fl

count">{{count}}</view>

<view

class="icon

fl"

bindtap="increase">

<image

class="auto-img"

src="../../images/icons/add.png"

mode="widthFix"></image>

</view>

</view>

</view>

</view>

<!--

底部按钮区

-->

<view

class="btns">

<view

class="fr

clearfix">

<view

class="fl

btn

buy"

bindtap="buy"

data-key="1">立即购买</view>

</view>

</view></view>5.3购物车功能模块的实现5.3.1界面展示用户可以管理购物车信息，可以进行修改数量，删除，结算，购物车界面展示如图5.3所示。图5.3购物车界面图5.3.2编码实现<view

class="shopcart">

<!--

头部

-->

<view

class="shopcart-header"

wx:if="{{shopcartData.length

>

0}}">

<view

class="manage

fr"

bindtap="manageProduct">{{isManage

?

'完成'

:

'管理'}}</view>

</view>

<!--

商品列表

-->

<view

class="pro-items">

<view

class="pro-item

clearfix"

wx:for="{{shopcartData}}"

wx:key="index">

<view

class="fl

checkbox"

data-index="{{index}}"

bindtap="simpleSelect">

<image

class="auto-img

icon-img"

hidden="{{!item.isSelect}}"

src="../../images/icons/check.png"

mode="widthFix"></image>

</view>

<view

class="fl

pro-img">

<image

class="auto-img"

src="{{item.img}}"

mode="widthFix"></image>

</view>

<view

class="fl

pro-text-box">

<view

class="pro-text">

<view

class="pro-name">{{}}</view>

<view

class="pro-rule">{{item.rule}}</view>

</view>

</view>

<view

class="fr

price-count">

<view

class="p-c"

wx:if="{{!isManage}}">

<view

class="price

fl">${{item.price}}</view>

<view

class="count-box

fl

clearfix">

<view

class="fl

icon"

data-index="{{index}}"

data-id="{{item._id}}"

bindtap="decrease">

<image

class="auto-img

icon-img"

src="../../images/icons/reduce.png"

mode="widthFix"></image>

</view>

<view

class="fl">{{item.count}}</view>

<view

class="fl

icon"

data-index="{{index}}"

data-id="{{item._id}}"

bindtap="increase">

<image

class="auto-img

icon-img"

src="../../images/icons/add.png"

mode="widthFix"></image>

</view>

</view>

</view>

<view

class="delete"

wx:else

data-id="{{item._id}}"

data-index="{{index}}"

bindtap="removeOneShopcart">

<image

class="auto-img"

src="../../images/icons/delete.png"

mode="widthFix"></image>

</view>

</view>

</view>

</view>

<!--

去结算

-->

<view

class="bottom-box"

wx:if="{{shopcartData.length

>

0}}">

<view

class="fl">

<view

class="all-check

fl"

bindtap="allSelect">

<image

class="auto-img

icon-img"

hidden="{{!isAllSelect}}"

src="../../images/icons/check.png"

mode="widthFix"></image>

</view>

<view

class="fl

all-text">全选</view>

</view>

<view

class="fr

buy-box"

wx:if="{{!isManage}}">

<view

class="fl">

<view

class="fl

text">应付合计：</view>

<view

class="fl

text-price">￥{{total}}</view>

</view>

<view

class="fl

buy"

bindtap="pay">去结算</view>

</view>

<!--

全部删除

-->

<view

class="fr

all-delete"

wx:else

bindtap="removeSelectShopcart">删除</view>

</view></view>5.4结算功能模块的实现5.4.1界面展示用户可以选择收货地址进行点击结算，其界面展示如图5.4所示。图5.4结算界面图5.4.2编码实现<view

class="commit">

<view

class="commit-box">

<view

class="receive"

bindtap="toggleAddressList">{{address}}</view>

<view

class="pro-list">

<view

class="product-item

clearfix"

wx:for="{{shopcartData}}"

wx:key="index">

<view

class="fl

pro-img">

<image

class="auto-img"

src="{{item.img}}"

mode="widthFix"></image>

</view>

<view

class="fl

pro-name">

<view

class="ch-name">{{}}</view>

<view

class="pro-rule">{{item.rule}}</view>

</view>

<view

class="fr">

<view

class="pro-price">${{item.price}}</view>

<view

class="pro-count">{{item.count}}</view>

</view>

</view>

<view

class="clearfix">

<view

class="fr">

<view

class="fl

count">共

{{count}}

件商品

合计:</view>

<view

class="fl

price">${{total}}</view>

</view>

</view>

</view>

</view></view><!--

地址列表

--><view

class="address-list"

hidden="{{!isShow}}"

bindtap="toggleAddressList">

<view

class="list-box">

<view

class="list">

<view

class="address-item"

wx:for="{{addressData}}"

wx:key="index"

data-index="{{index}}"

bindtap="selectAddress">

<view

class="person-info

clearfix">

<view

class="fl

person-name">{{item.user}}</view>

<view

class="fl

person-phone">{{item.phone}}</view>

<view

class="fl

clearfix">

<view

class="tag

default

fl"

wx:if="{{item.default

==

1}}">默认</view>

<view

class="tag

fl">{{item.tag}}</view>

</view>

</view>

<view

class="person-address

clearfix">

<view

class="fl

detail-address">{{item.address}}{{item.detail}}</view>

</view>

</view>

</view>

<view

class="new-btn"

bindtap="newAddress">新增地址</view>

</view></view><view

class="pay-box">

<view

class="fl

clearfix">

<view

class="fl

text1">应付合计:

</view>

<view

class="fl

text2">${{total}}</view>

<view

class="fr

pay-btn"

bindtap="commit">立即结算</view></view>5.5订单功能模块的实现5.5.1界面展示用户可以点击查看我的订单信息，包括订单号，图片，名称，价格，时间等，其界面展示如图5.5所示。图.5.5订单界面图5.5.2编码实现<view

class="order">

<view

class="order-item"

wx:for="{{orderData}}"

wx:key="index">

<view

class="order-title">

<view

class="order-item-box

clearfix

">

<view

class="fl

order-code">{{item.id}}</view>

<view

class="fr

order-text">已完成</view>

</view>

</view>

<view

class="product-box">

<view

class="product-item

clearfix"

wx:for="{{ducts}}"

wx:for-item="value"

wx:for-index="idx"

wx:key="idx">

<view

class="fl

pro-img">

<image

class="auto-img"

src="{{value.img}}"

mode="widthFix"></image>

</view>

<view

class="fl

pro-name">

<view

class="ch-name">{{}}</view>

<view

class="pro-rule">{{value.rule}}</view>

</view>

<view

class="fr">

<view

class="pro-price">${{value.price}}</view>

<view

class="pro-count">×{{value.count}}</view>

</view>

</view>

</view>

<view

class="clearfix">

<view

class="fl

order-time">{{item.orderDate}}</view>

<view

class="fr

order-box

clearfix">

<view

class="fl

order-count">共

{{item.count}}

件商品

合计:</view>

<view

class="fl

order-price">${{item.total}}</view>

</view>

</view>

</view></view>5.6我的收藏功能模块的实现5.6.1界面展示用户可以查看我的收藏信息，并且可以进行删除收藏，其界面展示如图5.6所示。图5.6我的收藏界面图5.6.2编码实现<view

class="like

clearfix">

<view

class="like-item

{{index

%

2

==

0

?

'like-item-left'

:

'like-item-right'}}

fl"

wx:for="{{likeProductData}}"

wx:key="index">

<view>

<image

class="auto-img"

src="{{item.small_img}}"

mode="widthFix"></image>

</view>

<view

class="pro-name">{{}}</view>

<view

class="clearfix">

<view

class="fl

price">${{item.price}}</view>

<view

class="fr

delete-icon"

data-id="{{item._id}}"

data-index="{{index}}"

bindtap="removeLikeProduct">

<image

class="auto-img"

src="../../images/icons/delete.png"

mode="widthFix"></image>

</view>

</view>

</view></view>5.7个人资料功能模块的实现5.7.1界面展示用户可以修改个人资料信息，包括头像，用户名，性别，收货地址，个人资料界面展示如图5.7所示。图5.7个人资料界面图5.7.2编码展示view

class="person">

<view

class="person-item">

<view

class="fl

avatar">头像</view>

<view

class="fr

avatar-img">

<image

class="auto-img"

wx:if="{{userInfo.url

!=

''}}"

src="{{userInfo.url}}"

mode="widthFix"></image>

</view>

</view>

<view

class="person-item">

<view

class="fl

avatar">用户名</view>

<view

class="fr

text">{{userInfo.nickName}}

</view>

</view>

<view

class="person-item">

<view

class="fl

avatar">性别</view>

<view

class="fr

text">{{userInfo.sex}}

</view>

</view>

<view

class="person-item"

bindtap="address">

<view

class="fl

avatar">收货地址</view>

<view

class="fr

icon">

<image

class="auto-img"

src="../../images/icons/right_arrow.png"

mode="widthFix"></image>

</view>

</view></view></view>

6系统测试6.1测试定义测试是程序开发必不可少的一个部分，只有进行了测试，我们才知道自己开发的