微信分享&创建一个分享组件

前言

大多数APP都有分享功能，以满足对我们APP本身的产品要去。那么如何实现分享呢？我们关注分享从代码层面要考虑两个问题：1、如何实现APP与分享平台的接口对接。2、如何设计一个分享组件。这里我们主要对问题2来展开阐述，对于问题1，我们会以微信分享为例来说明。

微信分享

微信开发平台接入已经有了详细的介绍，主要包括手动接入和cocoapods集成，这里就不赘述了。当然你可以在向微信注册APPID前完成这些步骤。
分享与收藏也详细得举出了实例，以及一些注意事项（其实头文件中的注释也很详细）
如果使用过程中遇到什么问题，看下微信常见问题

这里我主要做的就是把WXApi的代理封装到了一个单例SCWXDelegateHandler中然后在AppDelegate中实现

//iOS9及以上使用
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options {
    return [WXApi handleOpenURL:url delegate:[SCWXDelegateHandler sharedInstanse]];
}

//iOS9以下使用
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    BOOL isSuc = [WXApi handleOpenURL:url delegate:[SCWXDelegateHandler sharedInstanse]];
    NSLog(@"url %@ isSuc %d",url,isSuc == YES ? 1 : 0);
    return  isSuc;
}

然后在把微信发送的各种消息封装到SCWXMessageSendHandler中，比如发送文本消息，就可以直接调用+ (void)sendMessageWithText:(NSString *)text andScene:(SCWXMessageScene)msgScene;方法就可以了。
其他的分享平台都接入（比如QQ）都可以依照上面的方式来处理

一个分享组件

我们都知道友盟的分享组件，我们仿照友盟的分享组件来实现一个类似的组件。
对于这个组件我们要做出以下要求：1、实现可变动的水平分页布局。；2、提供完全自定义的入口（标题、图片、点击事件处理）功能 ；
1、可变动的水平分页布局。可变动指的是我们可以设置布局的行数和每行显示的入口个数（下面我会将入口改称为“渠道”更方便理解），水平分页指的是当渠道个数大于我们每页呈现的数目我们将会将剩下的渠道布局到下一页。
综合上面的考虑，iOS已经提供一个解决方案，就是UICollectionView。但是UICollectionView的水平布局并不会像我们平时理解的九宫格式的将每个cell对应到索引角标。比如我们要布局有5个渠道，2行4列的情况，理想的是下图的布局索引：

collection2.png

但是，如果通过UICollectionView水平方式布局，得到的是下面这种情况：

collection1.png

从上面我们可以观察出，UICollectionView的布局方式是“水平方向优先”的，但是它的索引填充确实按照垂直方向从左到右来计算的。
这样会造成一个很大的问题，我们提供给UICollectionView数据源的信息并没有按照我们理想的方式来显示，本来我是想让索引值为1的数据显示到水平方向第二个的。那么怎么调整呢？其实，很简单，我们让SCShareHorizontalFlowLayout继承UICollectionViewFlowLayout,重写- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath方法，将布局信息调整成我们理想的情况就行了：

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
    //重新调整atributes的布局（collectionView的水平方向布局，优先垂直方向放置cell,这里我们强制改成优先水平方向）
    NSInteger item  = indexPath.item;
    CGFloat itemWidth = attributes.size.width;
    CGFloat itemHeight = attributes.size.height;
    CGFloat columnMargin = self.minimumLineSpacing;
    CGFloat rowMargin = self.minimumInteritemSpacing;
    UIEdgeInsets sectionInset  = self.sectionInset;
    CGFloat collectionHeight = [self.collectionView my_getHeight];
    CGFloat collectionWidth = [self.collectionView my_getWidth];
    CGFloat topMargin  = 0;
    if (collectionHeight >= self.rowCount * (rowMargin + itemHeight) - rowMargin) {
        topMargin = (collectionHeight - self.rowCount * (rowMargin + itemHeight) - rowMargin) / 2;
    }
    attributes.frame = CGRectMake(sectionInset.left + (item % (self.itemCountPerRow)) * (columnMargin + itemWidth) + indexPath.section * collectionWidth, topMargin + (item / (self.itemCountPerRow)) * (rowMargin + itemHeight), itemWidth, itemHeight);
    return attributes;
}

如果要分页，我们需要计算UICollectionView的contentSize，但是我们需要在SCShareHorizontalFlowLayout里设置，否则对于UICollectionView不会生效，所以我们重写- (CGSize)collectionViewContentSize方法就可以了。
现在我们已经解决了水平方向布局的问题，那么对于渠道的配置改怎么处理呢？
2、自定义渠道
UICollectionView是需要数据源的，我们将这些信息封装到一个SCShareItemModel里，目前主要有标题、图片、图片url、别名、扩展信息，几个属性。（注，别名是我们区分点击的是哪个渠道，一般命名要有意义；扩展信息是个字典）

使用示例：

- (void)shareButtonClicked {
    SCShareItemModel *item1 = [[SCShareItemModel alloc] init];
    item1.title = @"微信1";
    item1.image = [UIImage sc_imageInBunlde:@"SCShare" imageName:@"wxIcon"];
    item1.nickName = @"wx1";
    item1.extendInfo = @{@"f":@"11"};
    SCShareItemModel *item2 = [[SCShareItemModel alloc] init];
    item2.title = @"微信2";
    item2.image = [UIImage sc_imageInBunlde:@"SCShare" imageName:@"wxIcon"];
    item2.nickName = @"wx2";
    SCShareItemModel *item3 = [[SCShareItemModel alloc] init];
    item3.title = @"微信3";
    item3.image = [UIImage sc_imageInBunlde:@"SCShare" imageName:@"wxIcon"];
    item3.nickName = @"wx3";
    SCShareItemModel *item4 = [[SCShareItemModel alloc] init];
    item4.title = @"微信4";
    item4.image = [UIImage sc_imageInBunlde:@"SCShare" imageName:@"wxIcon"];
    item4.nickName = @"wx4";
    SCShareItemModel *item5 = [[SCShareItemModel alloc] init];
    item5.title = @"微信5";
    item5.image = [UIImage sc_imageInBunlde:@"SCShare" imageName:@"wxIcon"];
    item5.nickName = @"wx5";
    NSArray *tempArray = @[item1,item2,item3,item4,item5];
    SCShareController *shareController = [[SCShareController alloc] initWithItems:tempArray];
    __weak typeof(self) weakSelf = self;
    shareController.actionBlock = ^(SCShareItemModel *item) {
        __strong typeof(self) strongSelf = weakSelf;
        SCShareItemModel *itemModel = item;
        NSLog(@"当前点击的nickName: %@",itemModel.nickName);
        if ([itemModel.nickName isEqualToString:@"wx1"]) {
            if ([WXApi isWXAppInstalled]) {
                [strongSelf sendRequestButtonClicked:nil];
            } else {
                NSLog(@"请先安装微信app");
            }
        } else {
            //TODO
        }
    };
    [shareController showInController:self];
}

效果图:

share.png

最后附上项目地址
SCShare

后续：

• 其实这个项目还有很多值得改善的地方，比如对于“渠道”的处理，目前渠道数据对于组件来说只是一个数据源，我们可以在model层面多做些事情，让model向UITableView意向通过代理的方式，提供标题，图片，点击事件的处理等，这样使得代码有更大的扩展空间，比如现在对点击事件的处理我们不能在处理过程中对返回数据进行拦截；
• 另外，代码的耦合还是比较严重，我们如果要创建一个分享组件，就必要提供数据源，如果渠道数目过多我们就会在使用的地方创建多个SCShareItemModel；
• 还有，可复用性不强。比如我们自定义的某个渠道，其实这个渠道提供的功能可能是通用的，比如我们提供了一个"上传文件"功能的渠道，我们如何更好的复用这些功能而不是将他们散落在代码的各个角落或者独立成另外一个SDK，所以就要求我们将这些功能和“渠道”更紧密的结合在一起；
• 最后基于上面渠道功能的形成，我们完全可以将微信分享、qq分享直接设置成一个参数以及他们分享信息的参数都提供给组件。

如果上面的做好了，基本上可以提供一个很好用的组件分享了。
后续我会继续完善这个组件，希望大家多多支持。