二手商城的本科毕业设计

1 小程序端需求

1.1商品发布页面，可以上传商品的各种信息。

1.2商城页面，商城分左侧分类栏和右侧商品列表栏，可以直接添加商品到购物车。

1.3购物车弹窗，列表页可以直接添加商品到购物车。这些操作都和菜品列表是联动的，也就是菜品列表和购物车里增删个数，都是可以同步的。

1.4搜索功能，可以直接点击搜索图标。

1.5模糊搜索功能，包含名字里的一个字就可以查找成功。

1.6商品详情，有顶部图片轮播，商品信息，添加购物车，商品描述，用户评价，底部购物车。购物车联动的功能。

1.7下单功能，购物明细、价格计算、收货地址等。

1.8收货地址的管理，有默认地址、编辑地址、删除地址、复制地址。添加和修改地址。

1.9支付功能，目前我使用的是模拟支付方式

1.10订单页面，新下单待收货、已收货待评价、订单完成、订单取消。

1.11个人中心界面，授权登录功能、和点击退出登录功能。

 

1. 进货商页面

可以通过进货商页面，实现进货功能。联系进货商完成进货功能。可以直接调起电话进行拨打，也可以直接复制联系方式。

1. 商家端，物品库存管理，物品上架、下架管理

3.1管理发布商品，可以删除已经发布的商品。管理待发货的订单。

1. cms网页管理后台

由于cms是一个可视化网页后台而且是云开发自带的内容管理。所以我们可以直接使用，不需要自己编写代码。只需要在web网页端进行常规的账号注册登录，项目的建立。商品信息。管理商品，上架下架产品。管理和处理订单，添加和联系进货商。

1. 数据库功能

数据库使用的是云开发自带的数据库，打开云开发控制台就可以选择数据库选项，就可以进行数据库的操作。

1. 云开发功能

首先要进行云函数的部署，将在cloud目录下编写的云函数都要进行部署。对后台逻辑的云函数的编写。

1增加或减少商品数量

2修改商品状态

3获取商品列表

4获取用户openid

5获取订单列表

6获取评论

 

2小程序实现的环境 

小程序的开发环境，我们在开发小程序之前必须准备好一款适合自己的开发者工具，这里我给大家推荐官方开发者工具——微信开发者工具。登录微信社区https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html选择稳定版下载。点击自己的电脑版本下载，下载完成后不停的点下一步即可。

在开始工作之前我们我们需要的准备工作也是不能少的，必须是注册小程序后才可以使用。还有云开发环境的创建和初始化，在创建云开发之前,有下面几个注意事项：1,必须注册小程序后才可以开通云开发。2,一个小程序可以创建两个云开发环境。创建小程序时，我们需要填写自己的appid，不使用自己的appid创建项目，就不能使用云开发功能。所以一定要先去注册一个小程序，然后用自己的appid。进入云开发控制台拿到云开发环境id，拿到环境id以后，就去app.js里做云开发环境初始化。

 

为毕业设计申请的APPID，小程序名kjx毕业设计。

 

云开发的环境名称和环境ID

2.2小程序功能模块的实现 

商品的发布功能，使用wxml的input属性，设计出输入框，至于添加图片功能则是一个mode属性。

 

商城页的购物车和购物车弹窗功能，购物车的代码参考小程序商城。具体来自B站老K学代码，编程小石头两位up主，有兴趣可以自己搜一下。下单功能，购物明细、价格计算、收货地址等功能都类似于小程序商城。本文的程序主要也是基于小程序商城改造设计。在小程序商城中商品的下单功能，购物明细和计价功能都是比较传统的需求。像订单和支付功能等主要的部分这里做一个介绍。

 

这里的订单和支付功能是本次毕业设计的难点所在，订单相对来说可以在商城中找到参考而小程序的支付则是参考微信开发文档https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_1.shtml根据开发文档和API接口实现小程序的支付功能。由于目前微信官方对个人的支付存在限制，所以我使用的是一个模拟支付的功能。

 

 

 

如图这里是一个动画来模拟实际支付功能，有没有觉得他很像小程序的购物车。

 

2.3数据库的连接实现 

数据库采用的是云开发控制台自带的云数据库，基本上我们只需要在控制台上创建好数据信息即可。

 

2.4商品信息管理功能模块 

 

还有微信登录授权的功能，因为小程序是基于微信用户的，所以对比起APP和网页。小程序在登录方面。直接采用微信用户的授权即可。上次被问到小程序登录的有效时长是多少，我回答的是小程序是通过微信授权，然后信息储存在storage中的。除非自己点击退出否则获取的信息一直有效，结果他回答我说两个小时。有点不是很懂，有知道的朋友可以告诉我一下。后面自己查阅官方文档觉得自己没错啊!

 

这里功能实现是调用微信小程序getUserInfo接口，在wxml中添加open-type属性。在js中绑定数据即可实现。图中代码块this.setdata{}。

大家可以看到上面头像是灰色的，为什么呢？因为这个设计是四月底份交，4月23号停用getUserInfo接口改用wx.getUserProfile 。而我在四月中的时候就已经写完了代码，后面交的时候影响小程序的运行。我也就没有再更改有兴趣可以自己查阅官方文档。这里加了自己的改动部分：<button  lang="zh_CN" type="primary" bindtap="onGotUserInfo">授权登陆</button>。在js里将代码改为：wx.getUserProfile({

            desc:'正在获取'//不写不弹提示框

         success:function(res){ console.log('获取成功: ',res)

            },

           fail:function(err){

               console.log("获取失败: ",err) }

        })

 

2.5商品进货管理模块 

在进销存系统中主要的进货环节，这里采用了一个比较简单的页面将进货商的页面，将进货商的信息放在页面上。需要进货时，点击进货商的联系方式即可进入拨号功能。只是一个简单的页面展示。而管理就需要进入到cms系统中对货物和进货商的信息的编辑和修改。商品信息的管理主要也是通过cms后台管理来对商品信息进行管理的，可在后台中对商品信息进行编辑修改和删除。

 

云开发实现管理操作逻辑是，要使用wx-server-sdk。使用封装后的SDK来实现功能逻辑。云函数通过require关键字来引入SDK。