技术:
- 小商城前端,即litemall-wx模块
- 微信小程序
- 小商城后端,即litemall-wx-api模块
- Spring Boot 1.5.10
- Spring MVC
- weixin-java-tools
目前发现存在的一些问题:
-
严重
支付功能注意
这里之所以没有实现,是因为本人没有商户支付能力。
-
严重
账号登录和注册中验证码注意:
这里之所以没有实现,是因为需要接入云平台的短信服务。 后期可能接入腾讯的短信服务。
-
缺失
优惠券功能 -
缺失
商品评价中管理员回复功能,进一步地用户之间相互评价回复 -
缺失
后台服务返回的token存在有效期,小商场应该自动刷新 -
缺失
账号多次登录失败,应该小商城出现图片验证码限制,或者后台账号锁定 -
改善
商品搜索中采用更好的搜索机制 -
改善
商品搜索中,支持热门搜索"换一批" -
改善
地址优化,目前每一次点击都会请求后台,应该缓存已有的数据 -
改善
商品数量和规格中,如果货品数量不足,则显示效果,通常是是两种效果- 某个规格选择以后,另外规格的某些规格是实线,而某些是虚线,
- 商品的都规格选择以后,“立即购买”和“加入购物车显示”灰色
-
改善
商品好评计算与显示,例如90%好评 -
改善
商品的评论列表中显示评价的评论分数、商品规格 -
改善
商品的评论列表中的图片点击可放大,同时用户评价的多个图片可以选择左右滑动查看。 -
改善
当一些页面查询数据没有跟新时,底部显示相应的提醒,例如“没有更多数据”。 -
改善
个人页面中实现订单部件,显示用户订单数量,同时点击以后跳转到订单的相应页面。 -
改善
商品的订单中支持订单号搜索功能 -
改善
在一些内容比较多的页面中支持“顶部”功能 -
功能
目前已经有账号登录页面,可以再支持手机短信登录方式。 -
功能
个人页面支持联系客服 -
功能
个人页面支持帮助中心 -
功能
推荐功能,基于用户的一些信息,在合适的页面给出推荐商品
目前账号注册只是简单的根据用户名和密码新建一个账号。
这里缺失一个重要的属性,即用户邮箱或者手机号,来限制用户随意注册。
- 关键字搜索
用户的搜索采用和商品的关键字属性匹配来查找商品。 因此需要用户添加商品时设置关键字值。
这里只是简单的搜索,更好地做法可能是进一步搜索商品的名字、简介。 或者采用更为专业的搜索算法。
- 运费计算
订单费用小于88时,则需要运费8元; 否则运费0元。
目前运费8元是写在后台代码中,未来可能允许设置管理员设置其他值; 或者采用更加符合实际情况的运费计算方式。
准备采用weixin-java-tools工具简化微信支付代码的开发。 由于需要商户相关信息,目前没有开发。
用户登录成功以后,后端会返回token
,之后用户的请求都会携带token。
目前token的失效和跟新机制没有涉及。
如果litemall-admin-api不配置CROS,则Spring Boot会失败。 但是,这里litemall-wx-api没有配置CROS,Spring Boot却不会报错,需要进一步研究。
如果是微信登录,那么无需账号和密码。
而如果用户采用了账号和密码的形式登录,那么后端需要把用户密码加盐。
如果采用账号密码登录,那么登录失败一定次数,应该限制登录。
进一步地,如果项目启用了短信功能,应该短信提醒用户,防止他人登录。
目前这里没有实现,仅列出。
这里的代码基于nideshop-mini-program,但是做了一定的修改:
- 数据属性名称调整,原项目中数据属性名称是下划线法命名(例如goods_id),而这里采用骆驼式命名法(例如goodsId),因此代码中需要进行相应调整;
- 代码清理重构,删除了一些目前不必要的文件,梳理一些逻辑功能;
- BUG修补,修改了一些错误;
- 功能完善拓展,例如商品立即购买功能、商品评价功能;
具体变化可以采用工具进行对比。
注意
目前litemall-wx项目代码基于nideshop-mini-program的commit版本acbf6276eb27abc6a48887cddd223d7261f0088e。由于改动变化较大,因此之后litemall-wx将独立开发,nideshop-mini-program的跟新不一定会合并到litemall-wx中。
业务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的选项。
按照官方文档,开发者采用wx.login
方法即可实现登录操作;
然而,由于wx.login
只能返回临时登录凭证code
,从服务器也只能返回对应的sessionId,
因此虽然已经可以视作登录,但是在小程序中不能显示有意义的登录状态,
因此实际很多小程序是继续采用wx.getUserInfo
来进一步请求用户信息。
因此本模块中,用户的登录状态也是由wx.login
和wx.getUserInfo
组成。
用户可以采用user.checkLogin
来检查是否已登录
,而其检测逻辑是:
- 可以从storage获取
userInfo
和token
- 同时
wx.checkSession
也成功。
但是如果每次都使用checkLogin
可能也不太好,因此目前机制是:
- 应用启动时就检测一次,如果登录则设置app.globalData.hasLogin为已登录状态; 之后,其他页面只要查看这个状态即可知道目前是否已登录;
- 此外,如果后台token过期返回401代码时,则及时清除过期的登录状态信息; 而用户登录失败时则app.globalData.hasLogin为未登录状态。
注意:
这里的逻辑可能有点乱。。。,但是目前实际效果看没有问题。
登录请求用户信息的时机存在两种设计:
- 一种是小程序加载时,即申请用户信息,这种实现较简单;
- 另外一种是小程序加载时不需要,但是小程序用户需要真正用户信息时才申请用户信息, 而这种实现较复杂。
目前采用第二张实现,可以分成两种情况:
-
用户主动登录
用户主动登录,指的是
我的
页面中用户没有登录显示点击登录
的效果。 -
用户被动登录
用户被动登录,指的是用户想购买商品或者需要用户登录才能操作的行为, 此时因为向服务器请求时token没有设置,因此服务器拒绝用户的请求,同时返回
401
业务代码。目前需要检测用户登录的页面有:
- 购物车
- 我的主页
讨论:
对于第二张情况,原nideshop-mini-program项目是采取一种自动登录的方式。 这里则采用跳转登录页面的方式。
如前面讨论,这里的登录操作实际包含两个操作wx.login
和wx.getUserInfo
。
用户可以采用user.loginByWeixin
来进行登录操作。
按照官网文档,用户登录前应该检测以下,来避免频繁无意义的登录操作, 因此较合适的做法如下所示:
user.checkLogin().catch(() => {
user.loginByWeixin().then(res => {
this.setData({
userInfo: res.data.userInfo,
});
}).catch((err) => {
util.showErrorToast('登录失败');
});
});
还存在一个问题,当用户登录时,会出现"微信授权"的对话框。 如果用户选择”拒绝“,那么之后用户的登录操作总是失败的。
目前的做法是,用户拒绝授权后,如果再次登录,则:
- 弹出对话框,请求用户授权
- 如果用户仍然拒绝,则返回
- 如果用户接受授权,则弹出系统权限配置页面,等待用户给与授权。
本模块中采用storage来存储一些数据,以及组件间进行通信。