客户端开发算是告一段落，做个总结，总结经验，以便更好的开发商家端
导航
导航结构纠结来纠结去的，最终采用的是 react-navigation 确实很强大，强大到令你窒息，支持iOS的stack，还有tabbar，结构,各种跳转，重置,router and so on。具体自己查，这里不展开了
- 创建
首先介绍下项目结构，先看图
1509852302497.jpg
大致来说 Tab结构有四个组件
- Tab
- 订水
- 水站
- 购物车
- 我
看代码
const Tab =TabNavigator(
{
Home:{
screen:Home
},
WaterStationList:{
screen:WaterStationList
},
ShoppingCart:{
screen:ShoppingCart
},
Me:{
screen:Me
});
这是底层最基本的组件。这里使用了TabNavigator组件，
- App初始化
目前的初始化流程如下
1 应用启动 -- 申请定位 -- 获取用户当前位置信息 -- 后台请求当前位置附近的水站列表 -- 当前位置变化 -- 重新获取附近的水站列表
全局结构
然后呢？其他界面咋办？那就要用到 react-navigation家族的另外一个组件了，StackNavigator比如首页，点击商品，或者水票。这里简写一下，看代码,秒懂。
const App = StackNavigator(
{
Root: {screen: Tab},
ProductDetail:{screen: ProductDetail}
TicketList:{screen: TicketList}
.....
},
Mobx vs Redux
这次采用了mobx的状态容器管理，对于两者 的对比，这里不展开介绍，只点拨下实现原理。
- Redux
应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中,纯函数式实现。 - Mobx
Mobx 使用了 Object.defineProperty 拦截 getter 和 setter，这个就是核心。最新实现机制【es6之后】可能会转向为proxy （代理模式）,
数据
与后台交互
先吐槽一下，我希望的后台返回的数据结构，这个结构不能变，我前端能很方便的从底层全局处理一些展示，
response:{
retCode:200/xxx
status:'success/fail'
message:'xxxxxx',
data:{
xxxxx
oooo
}
}
,然鹅现在返回的狗屎数据我也就将就将了。
- 支付
前端没啥逻辑流程上
1 商品确认
2 生成订单
3 后台生成tn
4 客户端向第三方【微信 支付包】请求并传递tn等参数
5 从第三方返回应用后，向后台请求支付结果查询
6 展示支付结果
- 异常处理
按理说 应该在请求底层拦截status后全局处理，现在没处理。
React
- 类
- 静态
- 函数式
- lamda表达式
购物车
WechatIMG206.jpeg
目前的购物车主要逻辑由后台完成，前端主要展示数据以及简单的加减商品操作,基于店铺维度的支付，建立如下模型
import {observer} from 'mobx-react/native'
import {observable, action, computed, observe} from 'mobx'
class ProductItem{
@observable _selectCount = 0;
constructor(item){
this._selectCount = item.selectCount ;
}
@action increase(){
this._selectCount++ ;
}
@action decrease(){
this._selectCount-- ;
}
@computed get selectCount(){
return this._selectCount ;
}
}
class Shop{
@observable _productItemList = [] ;
constructor(shop){
this._productItemList = shop.list.map(item=>{
return new ProductItem(item);
})
}
@computed get productItemList(){
return this._productItemList ;
}
}
class ShoppingCartStore{
@observable _shoplist = [] ;
constructor(){
this.refreshShoppingCart();
}
@action
refreshShoppingCart(){
let result = shoplist ; //模拟网络请求
this._shoplist = result.map(shop=>{
return new Shop(shop);
})
}
@computed get shopList(){
return this._shoplist ;
}
}
- 本地
- 同步
用户角色
- 游客 tourist
- 登录用户 user
本地把购物车模块逻辑放到后台处理，就引申出来一个问题，未登录用户的操作数据该如何保存，现在的处理逻辑是：
用户启动App，即给登陆一个游客身份，这样一来，用户的操作就可以保存了，例如加入购物车，当真正手机号登录的时候，数据迁移到正式用户中，保证体验的一致。
性能优化
- 性能优化点很多，简单的罗列几个
1：代码规范方面 调试的console要能很方便的去除，最简单的
global.LOG = (...args) => {
console.log('**********************');
console.log(...args);
console.log('**********************');
return args[args.length - 1];
};
等正式发布的时候
global.LOG = (...args) => {};
2：项目中能用色值就不用图片，减少安装包的大小。
3：慎用setState，因其容易导致重新渲染
4：方法的bind一律置于constructor
5：只传递component需要的props
6：尽量使用const element,
7: 组件尽量细化，尽量实现局部渲染
8：list优化。。。。待完善
网友评论