3.md 5.4 KB
3 litemall小商城
技术：
- 小商城前端，即litemall-wx模块
- 微信小程序
- 小商城后端，即litemall-wx-api模块
- Spring Boot 1.5.10
- Spring MVC
- weixin-java-tools
目前发现需要完善的：
- 支付功能
- 运费计算
- 优惠券功能
- 商品搜索
- 进一步区分商品和货品的关系
- 地址优化，目前每一次点击都会请求后台，应该缓存已有的数据
- 商品数量和规格中，如果货品数量不足，则显示不能点击的效果
- 登录逻辑重新设计，如果用户没有登录，则相关页面显示登录的效果
3.1 litemall-wx-api
3.1.1 业务
3.1.2 安全
3.1.3 支付
准备采用weixin-java-tools工具简化微信支付代码的开发。 由于需要商户相关信息，目前没有开发。
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 登录
按照官方文档，开发者采用wx.login方法即可实现登录操作；
然而，由于wx.login只能返回临时登录凭证code，从服务器也只能返回对应的sessionId,
因此虽然已经可以视作登录，但是在小程序中不能显示有意义的登录状态，
因此实际很多小程序是继续采用wx.getUserInfo来进一步请求用户信息。
因此本模块中，用户的登录状态也是由wx.login和wx.getUserInfo组成。
3.2.2.1 登录检测
用户可以采用user.checkLogin来检查是否已登录，而其检测逻辑是：
- 可以从storage获取
userInfo和token - 同时
wx.checkSession也成功。
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.2.4 登录拒绝授权
还存在一个问题，当用户登录时，会出现"微信授权"的对话框。 如果用户选择”拒绝“，那么之后用户的登录操作总是失败的。
目前的做法是，用户拒绝授权后，如果用户登录失败，则返回信息框， 提醒用户“请退出，左滑删除小程序，然后重新进入进行授权”。
3.2.3 立即购买和放入购物车
3.2.3
3.2.4 storage使用
本模块中采用storage来存储一些数据，以及组件间进行通信。