10 KiB
3 litemall小商城
技术：
- 小商城前端，即litemall-wx模块
- 微信小程序
- 小商城后端，即litemall-wx-api模块
- Spring Boot 2.x
- Spring MVC
- weixin-java-tools
目前发现存在的一些问题：
缺失优惠券功能缺失商品评价中管理员回复功能，进一步地用户之间相互评价回复缺失后台服务返回的token存在有效期，小商场应该自动刷新缺失账号多次登录失败，应该小商城出现图片验证码限制，或者后台账号锁定改善商品搜索中采用更好的搜索机制改善商品搜索中，支持热门搜索"换一批"改善地址优化，目前每一次点击都会请求后台，应该缓存已有的数据改善商品数量和规格中，如果货品数量不足，则显示效果，通常是是两种效果- 某个规格选择以后，另外规格的某些规格是实线，而某些是虚线，
- 商品的都规格选择以后，“立即购买”和“加入购物车显示”灰色
改善商品好评计算与显示，例如90%好评改善商品的评论列表中显示评价的评论分数、商品规格改善商品的评论列表中的图片点击可放大，同时用户评价的多个图片可以选择左右滑动查看。改善当一些页面查询数据没有跟新时，底部显示相应的提醒，例如“没有更多数据”。改善个人页面中实现订单部件，显示用户订单数量，同时点击以后跳转到订单的相应页面。改善商品的订单中支持订单号搜索功能改善在一些内容比较多的页面中支持“顶部”功能功能目前已经有账号登录页面，可以再支持手机短信登录方式。功能个人页面支持帮助中心功能推荐功能，基于用户的一些信息，在合适的页面给出推荐商品
3.0 小商场环境
开发者小商场开发环境以后，启动后台服务，小程序端可以 显示数据和图片，但是微信登录会失败，因为appid不是 开发者自己的，这里进一步介绍开发者需要设置的小商场环境。
3.0.1 微信小程序信息
开发者在微信小程序官网申请以后，可以有app-id和app-secret信息。
- 在litemall-core模块的src/main/resources的资源文件中设置
litemall
wx
app-id=开发者申请的app-id
app-secret=开发者申请的app-secret
- 在litemall-wx模块的project.config.json文件中设置
"appid": "开发者申请的app-id",
-
启动后台服务
-
建议开发者关闭当前项目，重新打开（因为此时litemall-wx模块的appid可能未更新）。 编译运行，尝试微信登录
3.0.2 微信商户支付信息
开发者在微信支付平台申请以后，可以有app-id和app-secret信息。
-
在litemall-wx-api模块的src/main/resources的资源文件中设置
wx.mch-id=开发者申请的mch-id wx.mch-key=开发者申请的mch-key wx.notify-url=开发者部署服务的微信支付成功回调地址注意
- notify-url是微信支付平台向小商场后台服务发送支付结果的地址。 因此这就要求该地址是可访问的。
- 目前小商场后台服务的默认request mapping是
/wx/order/pay-notify（见WxOrderController类的payNotify）, 因此notify-url应该设置的地址类似于http://www.example.com/wx/order/pay-notify - 当开发者真正上线后台服务时，强烈建议默认request mapping要重新命名，不能对外公开。
-
启动后台服务
-
部署后台服务到云主机
-
litemall-wx的api.js设置云主机的域名。 编译运行，尝试微信支付。
3.1 litemall-wx-api
本节介绍小商场的后台服务模块。
3.1.1 授权服务
见WxAuthController类。
3.1.2 首页服务
见WxHomeController类。
3.1.3 类目服务
见WxCatelogController类。
3.1.4 商品服务
见WxGoodsController类。
3.1.5 品牌服务
见WxBrandController类。
3.1.6 专题服务
见WxTopicController类。
3.1.7 搜索服务
见WxSearchController类。
3.1.8 购物车服务
见WxCartController类。
3.1.9 订单服务
见WxOrderController类。
3.1.10 评价服务
见WxCommentController类。
注意：
订单商品评价功能见WxOrderController类的comment方法。
3.1.11 团购服务
见WxGrouponController类。
3.1.12 收藏服务
见WxCollectController类。
3.1.13 足迹服务
见WxFootprintController类。
3.1.14 收货地址服务
见WxAddressController类。
3.1.15 区域服务
见WxRegionController类。
3.1.16 安全
3.1.16.1 开发技巧
当小商城后台服务开发中因为测试或者debug可能需要经常性重启应用，此时 一旦重启，将导致小商场的小程序段的token失效，因此要求用户再次登录。 这里，介绍一个小技巧: 开发时，
3.2 litemall-wx
这里的代码基于nideshop-mini-program，但是做了一定的修改：
- 数据属性名称调整，原项目中数据属性名称是下划线法命名（例如goods_id），而这里采用骆驼式命名法（例如goodsId），因此代码中需要进行相应调整；
- 代码清理重构，删除了一些目前不必要的文件，梳理一些逻辑功能；
- BUG修补，修改了一些错误；
- 功能完善拓展，例如商品立即购买功能、商品评价功能；
具体变化可以采用工具进行对比。
注意
目前litemall-wx项目代码基于nideshop-mini-program的commit版本acbf6276eb27abc6a48887cddd223d7261f0088e。由于改动变化较大，因此之后litemall-wx将独立开发，nideshop-mini-program的跟新不一定会合并到litemall-wx中。
3.2.1 业务API设置
业务API存放在config/api.js。
但是可以发现这样的代码：
// 本机开发时使用
var WxApiRoot = 'http://localhost:8082/wx/';
// 局域网测试使用
// var WxApiRoot = 'http://192.168.0.101:8082/wx/';
// 云平台部署时使用
// var WxApiRoot = 'http://122.152.206.172:8082/wx/';
也就是说这里存在三种类型的API服务地址，这里是考虑到开发存在三种情况：
- 本机开发时，localhost是当前开发机的地址；
- 手机预览时，192.168.0.101是开发机的IP地址；
- 当后台部署在云主机中时，122.152.206.172是云主机的IP地址；
- 此外，更最重要的是，如果小程序正式部署时，这里的地址必须是域名， 而不能是IP地址。
因此，开发阶段开发者可以按照具体情况切换1，2或3的选项。
3.2.2 页面
- 首页
- 专题页
- 专题详情页
- 专题评论页
- 专题评论添加页
- 品牌页
- 品牌详情页
- 人气推荐页
- 新品首发页
- 分类页
- 分类详情页
- 查找页
- 商品详情页
- 商品评论页
- 购物车页
- 下单页
- 下单地址页
- 下单地址添加页
- 支付结果页
- 个人页
- 订单列表页
- 订单详情页
- 优惠券页
- 收藏页
- 足迹页
- 收货地址页
- 收货地址添加页
- 登录页
- 注册页
- 找回密码页
3.2.3 登录设计
按照官方文档，开发者采用wx.login方法即可实现登录操作；
然而，由于wx.login只能返回临时登录凭证code，从服务器也只能返回对应的sessionId,
因此虽然已经可以视作登录，但是在小程序中不能显示有意义的登录状态，
因此实际很多小程序是继续采用wx.getUserInfo来进一步请求用户信息。
因此本模块中，用户的登录状态也是由wx.login和wx.getUserInfo组成。
3.2.2.1 登录检测
开发者可以采用user.checkLogin来检查是否已登录，而其检测逻辑是：
- 可以从storage获取
userInfo和token - 同时
wx.checkSession也成功。
但是如果每次都使用checkLogin可能也不太好，因此目前机制是：
- 应用启动时就检测一次，如果登录则设置app.globalData.hasLogin为已登录状态; 之后，其他页面只要查看这个状态即可知道目前是否已登录；
- 此外，如果后台token过期返回401代码时，则及时清除过期的登录状态信息； 而用户登录失败时则app.globalData.hasLogin为未登录状态。
注意：
这里的逻辑可能有点乱。。。，但是目前实际效果看没有问题。
3.2.2.2 登录时机
登录请求用户信息的时机存在两种设计：
- 一种是小程序加载时，即申请用户信息，这种实现较简单；
- 另外一种是小程序加载时不需要，但是小程序用户需要真正用户信息时才申请用户信息， 而这种实现较复杂。
目前采用第二张实现，可以分成两种情况：
-
用户主动登录
用户主动登录，指的是
我的页面中用户没有登录显示点击登录的效果。 -
用户被动登录
用户被动登录，指的是用户想购买商品或者需要用户登录才能操作的行为， 此时因为向服务器请求时token没有设置，因此服务器拒绝用户的请求，同时返回
401业务代码。目前需要检测用户登录的页面有:
- 购物车
- 我的主页
讨论:
对于第二张情况，原nideshop-mini-program项目是采取一种自动登录的方式。 这里则采用跳转登录页面的方式。
3.2.2.3 登录操作
如前面讨论，这里的登录操作实际包含两个操作wx.login和wx.getUserInfo。
开发者可以采用user.loginByWeixin来进行登录操作。
按照官网文档，用户登录前应该检测以下，来避免频繁无意义的登录操作， 因此较合适的做法如下所示:
user.checkLogin().catch(() => {
user.loginByWeixin().then(res => {
this.setData({
userInfo: res.data.userInfo,
});
}).catch((err) => {
util.showErrorToast('登录失败');
});
});
3.2.4 立即购买和放入购物车
3.2.5 storage使用
本模块中采用storage来存储一些数据，以及组件间进行通信。
3.2.5.1 userInfo和token
3.2.5.2 cartId
3.2.5.3 addressId
3.3 开发新功能
本章节介绍如何开发新的微信小程序功能。