[ ] 准备阶段：数据层model

请求数据-ContactsService

写一个mock网络请求获取JSON数据的方法：

+ (void)getContactsCompleteBlock:(void (^)(ContactsListEntity *contactsListEntity, NSError *error))completeBlock;

提示：此方法不需要传入参数

方法的实现：使用中network的方法：

-(NSURLSessionDataTask *)requestAPI:(NSString *)apiName nameSpace:(NSString *)nameSpace parameters:(NSDictionary *)parameters options:(SPNetworkOptions)options complete:(void (^)(NSURLResponse *, SPNetworkResponseObject *, NSError *))complete {
    return [self fetchMockByAPIName:apiName parameters:parameters complete:complete];
}

提示：这里请求的API即为请求的JSON文件的前缀：@"getContactList"

complete block的实现:
获得的返回的responseObject的entity，并用它初始化contactsListEntity

ContactsListEntity *contactsListEntity = [[ContactsListEntity alloc] initWithDictionary:responseObject.entity];

没有出错的情况下，即error为nil，completeBlock返回contactsListEntity完成回调。

解析数据

1、JSON数据

在工程中对应的mock文件夹中创建getContactList-alimockapi.json文件

设计JSON格式

一层：array contactList
二层：contactList中元素为一个个cell的信息（dictionary）
这里包含信息是，key：contactName、contactId、contactAdd、contactNumber
提示：value都是string类型的。

2、ContactsListEntity

property：

@property (nonatomic, strong) NSArray *contacts;

method：重写AliEntity中的映射方法，这里面解析方法都已经写好，可以理解为这里是调用一个接口，只需要告诉它名称的对应关系即可。

 +(NSDictionary *)arrayItemMap;

 +(NSDictionary *)propertyMap;

propertyItemMap 自定义映射关系。这里把JSON中的某数据结构（例如这里是数组：contactList)赋值给ContactsListEntity中名为contacts的成员变量。

return @{@"contactList" : @"contacts"};

arrayItemMap 定义数组中的item都应该是什么类型。这里是指JSON中对应的数组contactList应该由ContactsInfoEntity组成。

3、ContactsInfoEntity

property：

@property (nonatomic, copy) NSString *contactName;
@property (nonatomic, copy) NSString *contactId;
@property (nonatomic, copy) NSString *contactNumber;
@property (nonatomic, copy) NSString *contactAddress;

method：重写Entity中的映射方法。道理同listEntity。
提示：此Entity中的属性名如果与JSON中相同，则可以省去映射步骤。若不同，则需要单独处理。

 + (NSDictionary *)propertyMap {
    return @{@"contactAdd" : @"contactAddress"};
}

[ ] 准备阶段：视图层view

数据绑定-ContactsTableViewCell

1、自动调用UITableViewCell初始化方法：

 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier NS_AVAILABLE_IOS(3_0) NS_DESIGNATED_INITIALIZER;

2、cell初始化函数commonInit：
初始化子view，并将其添加到父视图

     _checkContainerView = [UIView new];
    [self.contentView addSubview:_checkContainerView];

3、设计布局，使用Masonry 添加约束

使用mas_maekConstraints设置约束条件：mas_equalTo
示例：

[textView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(StyleSpacing2);
        make.top.mas_equalTo(StyleSpacing4);
        make.bottom.mas_equalTo(StyleSpacing4);
        make.right.mas_equalTo(StyleSpacing2);
    }];

注意添加约束要在addSubview之后。

4、public method：实现数据绑定

 - (void)configWithContactsInfoEntity:(ContactsInfoEntity *)entity;

将ContactsInfoEntity中属性值赋值给cell中的lable.text
示例：

self.contactName.text = entity.contactName;

提示：cell这里容易出错，详见Contacts报错总结。

[ ] 开始“动工”：控制层controller

控制层-ContactsViewController

viewController生命周期：

viewDidLoad：

初始化tableView

self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];

设置tableView的其他属性（背景颜色、分割样式等等）
给tableView绑定delegate、datasource

self.tableView.delegate = self;
    self.tableView.dataSource = self;

将tableView添加到父视图

[self.view addSubview:self.tableView];

调用加载数据方法reloadData

viewDidAppear:

 - (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
}

其他生命周期过程省略。

加载数据-reloadData

这个方法是用来加载数据的，数据就是从mock网络请求获取而来的，既然如此，那么之前精心准备的ContactsService就华丽登场啦：

[ContactsService getContactsCompleteBlock:^(ContactsListEntity *contactsListEntity, NSError *error) {
        if (!error) {
            
            NSLog(@"contacts : %@", contactsListEntity);
            self.contactsListEntity = contactsListEntity;
            [self.tableView reloadData];
            
        } else {
            
            NSLog(@"error : %@", error.localizedDescription);
            
        }
    }];

请求数据成功之后，在无错误的情况下completeBlock执行：把成功返回的contactsListEntity传给本地的contactsListEntity。

TableView Delegate&Datasource

delegate：

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

因为暂无特殊要求，这里高度直接设置为了固定值。

datasource：
1、列表行数

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

列表行数返回的是加载数据成功后的contactListEntity中数组contacts的元素数。

return self.contactsListEntity.contacts.count;
}

2、cell

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

此时，就要用到之前准备的ASCContactsTableViewCell啦。
先实例化一个它的对象cell：

 ContactsTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ContactsTableViewCell" forIndexPath:indexPath];

然后用加载数据成功后的contactListEntity中数组contacts的某个元素内容去构造这个cell，调用ASCContactsTableViewCell类的方法：

[cell configWithContactsInfoEntity:self.contactsListEntity.contacts[indexPath.row]];

最后返回这个cell，工程主体就大功告成啦！

[ ] 用起来～

功能入口-AliMyAlibaba

修改view

在页面内添加一个新的headerButton，与原有的三个button：“Favorite Companies、Favorite Products、Browsing History” 并列放置。

DingTalk20170719140008.png

添加响应事件

为新设置的按钮添加响应方法actContacts

 - (void)actContacts {//跳转联系人页面
    [UT ctrlClicked:@"MyContacts" page:self args:nil];
    [AccountHelper executeUserRequiredAction:^{
        ContactsViewController *cc= [[ContactsViewController alloc] initWithNibName:nil bundle:nil];
        [self.navigationController pushViewController:cc animated:YES];
    }];
}

这里就实例化了ContactsViewController类的对象，并通过push的方法显示出来。那么这个功能的入口就写好了，可以用起来啦～

DingTalk20170719145934.png

加个联系人头像美化一下：

DingTalk20170719201748.png

再添加一个下拉翻页功能，好啦～任务完成了～

iOS-Contacts( TableView)