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

前言

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

微信分享

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

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

//iOS9及以上使用
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)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分享直接设置成一个参数以及他们分享信息的参数都提供给组件。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • 一百年前,我不是我, 一百年后,这世上已没有我。 可我偏偏相信因果。 原谅我篡改夕爷的词作。 走过的已走过,错过的...
    守一集雅_孔小乐阅读 285评论 2 3