普通分享页面基础

作者: i爱吃土豆的猫 | 来源:发表于2019-04-20 23:55 被阅读0次

普通分享页面基础
前端基础
一网打尽APP常见功能模块页面设计，超全超详细
Axure新手入门(四)
【转载】Axure教程（31-40）
Android 分享页面调起原生App，提高转化率
在webpack构建的项目中使用Vue
iOS UIDocumentInteractionControl
叫“普通”“基础”的，一般都不普通也不全基础
vue+typeScript

产品要求做截图分享, 分享类似于微博的那种长图, 可以滚动, 先看效果图

截屏幕分享.png

下面是实现的步骤

1.导入分享工具

UMShareTool

2.导入分享工具

#import "QuickCreate.h"
#import "UMShareManege.h"

#define KwxurlStr  @"https://itunes.apple.com/cn/app//id836500024?mt=12"
#define KqqurlStr  @"https://itunes.apple.com/cn/app/qq/id451108668?mt=12"

//高效率的NSLog
#ifdef DEBUG
#define DLog(...) NSLog(@"\n%s \n⚠️第%d行⚠️ \n %@\n\n",__func__,__LINE__,[NSString stringWithFormat:__VA_ARGS__])
#else
#define DLog(...)
#endif

//需要的属性

@property (nonatomic, strong) UIView         *shareHeaderView;
@property (nonatomic, strong) UIView         *shareBtnView;
@property (nonatomic,strong)  UILabel        *titleLabel;
@property (nonatomic, strong) UIButton       *shareCancelBtn;

// platform //微信、朋友圈、qq、qq空间、微博–0,1,2,3,4）
@property(nonatomic, assign) long   sharePlatform;
@property(nonatomic, strong) UIWindow *window;

@property (nonatomic,strong) UIScrollView *hkshareScrollView;
@property (nonatomic,strong) UIImageView  *hkshareImageView;

@property (nonatomic,strong) UIImage *hkshareImage;
@property (nonatomic,assign) CGFloat hkimageHeight;
@property (nonatomic,assign) CGFloat hkimageWidth;
@property (nonatomic,copy)  NSString *hkimagePath;

//点击, 弹出分享页面

- (void)sharePictureToPlatform{

NSString *path_document = NSHomeDirectory();
//设置一个图片的存储路径
self.imagePath = [path_document stringByAppendingString:@"/Documents/pic.png"];
//把图片直接保存到指定的路径（同时应该把图片的路径imagePath存起来，下次就可以直接用来取）
[UIImagePNGRepresentation(self.shareImage) writeToFile:self.imagePath atomically:YES];

if (self.shareHeaderView) {
    [self.shareHeaderView removeFromSuperview];
}

if (self.hkshareScrollView) {
    [self.hkshareScrollView removeFromSuperview];
}

if (self.shareBtnView) {
    [self.shareBtnView removeFromSuperview];
}


self.window= [UIApplication sharedApplication].keyWindow;

self.shareHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight-170)];
[self.window addSubview:self.shareHeaderView];
self.shareHeaderView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.4];
[self.shareHeaderView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(disMissShareView)]];

_hkshareScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(60*ScreenWidthRate, SafeAreaTopHeight, ScreenWidth-120*ScreenWidthRate, (ScreenHeight-SafeAreaTopHeight) -180*ScreenHeightRate )];
_hkshareScrollView.backgroundColor = [UIColor whiteColor];
_hkshareScrollView.layer.cornerRadius = 10;
_hkshareScrollView.layer.masksToBounds = YES;

self.hkshareScrollView.contentSize =  CGSizeMake(self.hkimageWidth, self.hkimageHeight);

[self.shareHeaderView addSubview:self.hkshareScrollView ];
[self.hkshareScrollView addSubview:self.hkshareImageView];

self.hkshareImageView.image = self.shareImage;

   
[self.hkshareImageView makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.hkshareScrollView);
    make.width.mas_equalTo(self.hkimageWidth);
    make.height.mas_equalTo(self.hkimageHeight -30);
    make.centerX.equalTo(self.hkshareScrollView);
}];


self.shareBtnView = [[UIView alloc] initWithFrame:CGRectMake(0, kScreenHeight,kScreenWidth , 170)];


self.titleLabel=[[UILabel alloc]initWithFrame:CGRectMake(0, 8, kScreenWidth, 20)];
self.titleLabel.text=@"截图分享到";
self.titleLabel.textColor=[UIColor blackColor];
self.titleLabel.font=[UIFont systemFontOfSize:16];
self.titleLabel.textAlignment=NSTextAlignmentCenter;
//    [self.shareBtnView addSubview:self.titleLabel];


//功能按钮s
CGFloat btnHeight = 70;

self.shareBtnView.backgroundColor = [KLTool colorFromHexRGB:@"#F4F4F7"];
[self.window addSubview:self.shareBtnView];

NSArray *itemsArr = @[@[@"保存本地",@"微信",@"朋友圈",@"QQ",@"QQ空间"]];

CGFloat btnWith = kScreenWidth/5;
for (int i=0; i<itemsArr.count; i++) {
    NSArray *subArr = itemsArr[i];
    for (int j=0; j<subArr.count; j++) {
        UIButton *itemBtn  = [self buttonWithFrame:CGRectMake(j*btnWith, 20, btnWith, btnHeight) imageName:[NSString stringWithFormat:@"resharebtn_image_%d",i*3+j] title:subArr[j] tag:i*3+j];
        [self.shareBtnView addSubview:itemBtn];
    }
}

self.shareCancelBtn = [UIButton buttonWithType:UIButtonTypeCustom];
self.shareCancelBtn.frame = CGRectMake(0, self.shareBtnView.kl_height-60, kScreenWidth, 60);
[self.shareCancelBtn setTitleColor:[KLTool colorFromHexRGB:@"#38485C"] forState:UIControlStateNormal];
self.shareCancelBtn.titleLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:16];
[self.shareCancelBtn setBackgroundColor:[UIColor whiteColor]];
[self.shareCancelBtn setTitle:@"取消" forState:UIControlStateNormal];
[self.shareCancelBtn addTarget:self action:@selector(disMissShareView) forControlEvents:UIControlEventTouchUpInside];
[self.shareBtnView addSubview:self.shareCancelBtn];

[UIView animateWithDuration:0.3 animations:^{
    [self.shareBtnView setFrame:CGRectMake(0, kScreenHeight-170,kScreenWidth , 170)];
} completion:nil];
}

//按钮点击事件

 - (void)itembtnClick:(UIButton *)btn index:(long )index{
  switch (btn.tag) {
        //0保存本地, 1微信, 2朋友圈, 3QQ, 4QQ空间
    case 0:{
        
        [self saveBtnClick];
    }
        break;
    case 1:{
        
        UIImage *iii = [UIImage imageNamed:@"sharebtn_image_1"];
        [UMShareManege hkPictureSharePlatform:UMSocialPlatformType_WechatSession thumbImage:iii picture:self.shareImage viewControl:self succeed:^(id data) {
            DLog(@"%@",data);
            [self showAlertWithMessage:@"分享成功"];
        } failure:^(NSError *error) {
            DLog(@"%@",error);
            NSString *message = error.userInfo[@"message"];
            if ([message isEqualToString:@"应用未安装"]) {
                [self alertViewDownload:KwxurlStr];
            }else{
                [self showAlertWithMessage:@"分享失败"];
            }
        }];
    }
        break;
    case 2:{
        
        UIImage *iii = [UIImage imageNamed:@"sharebtn_image_1"];
        [UMShareManege hkPictureSharePlatform:UMSocialPlatformType_WechatTimeLine thumbImage:iii picture:self.shareImage viewControl:self succeed:^(id data) {
            DLog(@"%@",data);
            [self showAlertWithMessage:@"分享成功"];
        } failure:^(NSError *error) {
            DLog(@"%@",error);
            NSString *message = error.userInfo[@"message"];
            if ([message isEqualToString:@"应用未安装"]) {
                [self alertViewDownload:KwxurlStr];
            }else{
                [self showAlertWithMessage:@"分享失败"];
            }
        }];
    }
        break;
    case 3:{
        
        UIImage *iii = [UIImage imageNamed:@"sharebtn_image_1"];
        [UMShareManege hkPictureSharePlatform:UMSocialPlatformType_QQ thumbImage:iii picture:self.shareImage viewControl:self succeed:^(id data) {
            DLog(@"%@",data);
            [self showAlertWithMessage:@"分享成功"];
        } failure:^(NSError *error) {
            DLog(@"%@",error);
            NSString *message = error.userInfo[@"message"];
            if ([message isEqualToString:@"应用未安装"]) {
                [self alertViewDownload:KqqurlStr];
            }else{
                [self showAlertWithMessage:@"分享失败"];
            }
        }];
    }
        break;
    case 4:
    {
        UIImage *iii = [UIImage imageNamed:@"sharebtn_image_1"];
        [UMShareManege hkPictureSharePlatform:UMSocialPlatformType_Qzone thumbImage:iii picture:self.shareImage viewControl:self succeed:^(id data) {
            DLog(@"%@",data);
            [self showAlertWithMessage:@"分享成功"];
        } failure:^(NSError *error) {
            DLog(@"%@",error);
            NSString *message = error.userInfo[@"message"];
            if ([message isEqualToString:@"应用未安装"]) {
                [self alertViewDownload:KqqurlStr];
            }else{
                [self showAlertWithMessage:@"分享失败"];
            }
        }];
    }
    default:
        break;
}
      [self disMissShareView];
}

//弹框消失

- (void)disMissShareView{

if (self.shareHeaderView) {
    [self.shareHeaderView removeFromSuperview];
}

[UIView animateWithDuration:0.3f
                 animations:^{
                     
                     [self.shareBtnView setFrame:CGRectMake(0, kScreenHeight,kScreenWidth , 170)];
                     
                 }
                 completion:^(BOOL finished){
                     if (self.shareBtnView) {
                         [self.shareBtnView removeFromSuperview];
                     }
                 }]; 
}

//没有安装的时候下载

- (void)alertViewDownload:(NSString *)downloadStr{

//1.创建UIAlertController
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示"
                                                                         message:@"未检测到客户端，请安装后重试。"
                                                                  preferredStyle:UIAlertControllerStyleAlert];

// 2.创建并添加按钮
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    
    // NOTE: 跳转itune下载App
    NSURL *downloadUrl = [NSURL URLWithString:downloadStr];
    [[UIApplication sharedApplication]openURL:downloadUrl];
    
}];

UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
    NSLog(@"cancel Action");
}];

[alertController addAction:okAction];
[alertController addAction:cancelAction];

// 3.呈现UIAlertContorller
[self presentViewController:alertController animated:YES completion:nil];

}

//点击保存图片

- (void)saveBtnClick{
//1.创建UIAlertController
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示"
                                                                         message:@"确定要保存到相册"
                                                                  preferredStyle:UIAlertControllerStyleAlert];
// 2.创建并添加按钮
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    
    NSLog(@"ok Action");
    UIImageWriteToSavedPhotosAlbum(self.shareImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}];

UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
    NSLog(@"cancel Action");
}];

[alertController addAction:cancelAction];
[alertController addAction:okAction];

// 3.呈现UIAlertContorller
UIWindow   *alertWindow = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
alertWindow.rootViewController = [[UIViewController alloc] init];
alertWindow.windowLevel = UIWindowLevelAlert + 1;
[alertWindow makeKeyAndVisible];
[alertWindow.rootViewController presentViewController:alertController animated:YES completion:nil];

}

//保存结果的回调

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{

if(error == nil) {
    [self showAlertWithMessage:@"已存入手机相册"];
}else{
    [self showAlertWithMessage:@"保存失败"];
  }
}

// Alert提示

- (void)showAlertWithMessage:(NSString *)message{

//1.创建UIAlertController
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示"
                                                                         message:message
                                                                  preferredStyle:UIAlertControllerStyleAlert];
// 2.创建并添加按钮
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    NSLog(@"调用接口");
}];

[alertController addAction:okAction];

// 3.呈现UIAlertContorller, 加到Window上
//    [self presentViewController:alertController animated:YES completion:nil];

UIWindow   *alertWindow = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
alertWindow.rootViewController = [[UIViewController alloc] init];
alertWindow.windowLevel = UIWindowLevelAlert + 1;
[alertWindow makeKeyAndVisible];
[alertWindow.rootViewController presentViewController:alertController animated:YES completion:nil];

}

//封装的 btn 上的文字和图片

- (UIButton *)buttonWithFrame:(CGRect)frame imageName:(NSString *)imageName title:(NSString *)title tag:(int)tag{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = frame;

UIImageView *icon = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height/3*2)];
icon.contentMode = UIViewContentModeScaleAspectFit;
icon.image = [UIImage imageNamed:imageName];
[btn addSubview:icon];

[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:12];
btn.tag = tag;
[btn setTitleEdgeInsets:UIEdgeInsetsMake(frame.size.height*3.0/4.0, 0, 0, 0)];

[btn addTarget:self action:@selector(itembtnClick:index:) forControlEvents:UIControlEventTouchUpInside];

return btn;
}

普通分享页面基础
产品要求做截图分享, 分享类似于微博的那种长图, 可以滚动, 先看效果图下面是实现的步骤 1.导入分享工具 UM...
前端基础
前端基础学习学习方法:听-->写-->分享学习目标: 基础静态代码网页布局-->首页/注册/列表页面 HTM...
一网打尽APP常见功能模块页面设计，超全超详细
本期「素材播报」比较特别，没有原型分享，只想跟刀友们唠唠页面设计。页面、组件都是构成原型的基础元素，不同的是，组...
Axure新手入门(四)
本文目录基础31. 切换元件库第2章页面设置基础32. 设置页面居中基础33. 设置页面背景（图片/颜色...
【转载】Axure教程（31-40）
本文目录基础31. 切换元件库第2章页面设置基础32. 设置页面居中基础33. 设置页面背景（图片/颜色...
Android 分享页面调起原生App，提高转化率
需求为了提高转化率，需要在分享页面，直接调起原生app，如果原生没有安装，跳转到下载页面普通浏览器一般是通过...
在webpack构建的项目中使用Vue
一、普通网页中使用Vue（Vue基础学习）使用标签引入vue的包页面中创建一个容器（id为app的div）...
iOS UIDocumentInteractionControl
基础操作预览打开的文件样式点击预览页面中的分享按钮弹出此页面打开第三方App里面的文档如果我们需要打开第三...
叫“普通”“基础”的，一般都不普通也不全基础
叫“普通”的，一般都不普通；叫“基础”的也不全是基础。比如普通心理学，普通生物学，基础医学，基础物理学。人们总...
vue+typeScript
这篇文章讲的很通俗易懂，就分享一下[如何使用 vue + typescript 编写页面 ( 基础装饰器部分 )]...