ipad设置启动图 ios

2019-01-29 10:59:37 liqiuman180688 阅读数 1075

Hsusue Cocoa开发者社区

前言

全面屏刚出时,网上有说反人类。但过去这么久了,趋于技术的进步或看久了,大家也都慢慢习惯了(只是笔者还是买不起全面屏)。官方适配中文版文档也出来了。
在这里插入图片描述
在这里插入图片描述
回想起刚开始适配全面屏用了一种暴力、并不优雅的方法,以至于后来出了XS(MAX)和XR后出了bug。所以选择一种可靠的、优雅的方案是很有必要的。如今网上关于探讨适配全面屏的文章五花八门,笔者将探究其中的各种方案。
由于笔者水平有限,眼界狭窄,难免出现疏忽的地方,希望大神提出更好的方案。

全面屏的数据

  • 顶部

在这里插入图片描述
在这里插入图片描述
从以上两图,我们可以看出全面屏的顶部Statusbar变高了,其他部分没变。
Largetitle是iOS11中新加入的特性。当然我们开发中很少用到Largetitle。

  • 底部

全面屏底部多出了高度为34的Home Indicator 区域。
在这里插入图片描述

个人总结的全面屏适配观点

1.虽然笔者买不起XStyle,但是虚拟器应该能满足适配的所有测试。

所以开发中,请优先使用全面屏开发。笔者有个朋友,开发时用非全面屏,偶尔会出现忘记适配全面屏问题。如果用全面屏,开发效率将会进一步提升。毕竟界面适配全面屏的时候,很难忘记适配非全面屏。

2.App显示界面大小是由App启动页决定的。

记得iPhoneX刚出时,App在其上面运行显示居中,大小和6s一样,上下各有一块黑块。尝试打印出分辨率惊奇发现不是官方宣传的1124,2436。把启动页大小改了宏才达到预想效果。如果用xib,那就没什么问题。启动页用图片的话,要适配上@3x的图片。

3.宏怎么定义

宏里只要能区分开XStyle,其他高度就好说。

网上很多教程都是按照分辨率来区分。然而,根据上面我们可以发现,XStyle的分辨率并非固定。所以单纯按照分辨率是不行的。笔者一开始适配X就是这样,后来XSMax出了问题,被迫强行更新XCode10用XSMax,发现宏没写好(顺便吐槽一句,XCode10真是噩梦,又懒得下回去)。

也有旧教程是按照屏幕宽高。但根据上面数据也不是固定的,所以要注意。这两种失效宏都列在下面。

// 单纯根据分辨率
#define K_iPhoneXStyle ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

// 单纯根据屏幕宽高
#define  K_iPhoneXStyle (KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO)

其实笔者很想弄出一个通用的宏,不那么怕出新机会失效的宏,但奈何实在想不到。只能照XStyle不一样的数据写出宏。下面列出的宏在XS Max时还是有效的。至于以后就说不准了,各位还是要根据新机分辨率或者宽高适当修改。

#define K_iPhoneXStyle ( (CGSizeEqualToSize(CGSizeMake(414, 896), [[UIScreen mainScreen] bounds].size)) || ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO) )

或者

#define  K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))

还有其他的宏

#define KScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define KScreenHeight ([UIScreen mainScreen].bounds.size.height)
#define K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))
#define KStatusBarAndNavigationBarHeight (K_iPhoneXStyle ? 88.f : 64.f)
#define KStatusBarHeight (K_iPhoneXStyle ? 44.f : 20.f)
#define KTabbarHeight (K_iPhoneXStyle ? 83.f : 49.f)
#define KMagrinBottom (K_iPhoneXStyle ? 34.f : 0.f)

还有些宏,是适配字体或者view用的。将在后面介绍UI在不同尺寸下适配方案再提起。

#define KScaleWidth(width) ((width)*(KScreenWidth/375.f))
#define IsIphone6P          SCREEN_WIDTH==414
#define SizeScale           (IsIphone6P ? 1.5 : 1)
#define kFontSize(value)    value*SizeScale
#define kFont(value)        [UIFont systemFontOfSize:value*SizeScale]

最后说一句,利用宏来写虽然简单,但有以下弊端。

  • 找不到能可靠性强的宏XStyle。毕竟以后的手机分辨率或者屏幕宽高肯定会变化(即使短时间内不会)。要适应新机型就要重新上线。
  • 假如以后新出的机刘海长度变了,到时又要修改宏。
  • App适配起横屏,也挺麻烦的。

即使有弊端,笔者还是觉得这么写可行。毕竟大多数App都不用支持横屏,而且屏幕短时间内不会有太大变动。

人要保持一颗活到老学到老的心,这些弊端有方法避免。

iOS11出了安全区域SafeArea这个概念,用得好可以解决以上问题。要点时间适应。

弊端是目前大多App都支持iOS11.0-,这样就要写判断版本号,代码多将近一倍。

优点也很明显

  • 如果苹果新出了新机型,不用改动代码适应的可能性非常大。这意味着不用为了适配问题上线新版本。
  • 横屏时顶部不会有偏移。有横屏需求的话,也许就不用为了横屏做额外适配。

等以后App iOS11.0起步的时候(短时间不太可能qaq),个人感觉SafeArea将会成为主流。

但至少目前,看上去很美好,实际上适配写多一倍的代码让笔者望而生畏。

4.SafeAreaiOS7以后,苹果给UIViewController引入了topLayoutGuide 和 bottomLayoutGuide两个属性。用于表示顶部或底部的高度。根据有无显示状态栏、导航栏、tabBar返回高度。如果VC内嵌VC,内嵌的VC将视为另起的顶底坐标体系,不受原状态栏等影响。你可能听都没听过这两属性,因为开发中我们习惯直接用宏写上数值,几乎不用这两个属性。更何况那时iPhone还没有全面屏这种东西。

到了iOS11,苹果弃用了topLayoutGuide和bottomLayoutGuide两个属性。引入了safeArea代替。官方的建议是 不能被遮挡的内容和控件在安全区域范围内显示。如果视图底部有按钮,在全面屏下,请约束底部距离34,不要影响到Home功能。

  • safeAreaLayoutGuide

此属性适用于自动布局。
在这里插入图片描述
使用前

[NSLayoutConstraint constraintWithItem:someView attribute:NSLayoutAttributeTop relate
dBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:
1.0 constant:0];

使用后

[NSLayoutConstraint constraintWithItem:someView attribute:NSLayoutAttributeTop relate
dBy:NSLayoutRelationEqual toItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttr
ibuteTop multiplier:1.0 constant:0];

笔者用的是Masonry。注意该属性是iOS11后出现的。因为X发布时,最低版本超过了11,所以全面屏都能用此属性。在这里可以看出,因为11不支持,这代码多了一倍。我们完全可以不用这新属性,减少一半代码爽歪歪。所以笔者目前开发还未使用。

[testView mas_makeConstraints:^(MASConstraintMaker *make) {

    make.height.equalTo(@44);
    if (@available(iOS 11.0,*)) {
        make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop);
        make.left.equalTo(self.view.mas_safeAreaLayoutGuideLeft);
        make.right.equalTo(self.view.mas_safeAreaLayoutGuideRight);
    } else {
        make.top.equalTo(self.view).offset(KStatusBarHeight);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
    }
}];

笔者没有全面屏,只能展示一下热点了。该效果与用宏KStatusBarHeight一样。
(注:此手机系统12.0)在这里插入图片描述
但横屏时就不一样了。宏写法会与上方有一段KStatusBarHeight距离,此方法没有。这就是笔者说的其中一个优点,然而并没有好到足够让笔者用它的程度。
在这里插入图片描述

最后有两个观点。

  • 对于在ViewController的view,推荐使用mas_safeAreaLayoutGuide。这样就能动态更改,即使横屏。
  • 对于在View之间的约束,推荐使用mas_left。一来没必要用safeArea,二来不用判断版本号,减少代码量。
  • safeAreaInsets

此属性适用于手动计算frame。

X竖屏时控制器view的safeAreaInsets是(44,0,34,0);横屏(0, 44, 21, 44)。在这里插入图片描述
用到的是这个方法- (void)viewSafeAreaInsetsDidChange;

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor redColor];
    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, KStatusBarHeight, KScreenWidth, 200)];
    testView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:testView];
    self.testView = testView;
}

- (void)viewSafeAreaInsetsDidChange {
    [super viewSafeAreaInsetsDidChange];
    NSLog(@"%s", __func__);

    [self updateFrame];
}

- (void)updateFrame {
    if (@available(iOS 11.0, *)) {
        CGRect newFrame = self.testView.frame;
        newFrame.origin.x = self.view.safeAreaInsets.left;
        newFrame.size.width = KScreenWidth - self.view.safeAreaInsets.left - self.view.safeAreaInsets.right;
        self.testView.frame = newFrame;
    }
}

在这里插入图片描述
在这里插入图片描述

用frame的话,不仅低于11的系统,就连高于11的系统,要适配起横屏问题都比较麻烦。

所以笔者是趋向于用约束的,见仁见智吧。

这里再贴出两篇说SafeArea的文章。

最近很火的 Safe Area 到底是什么

笔者很久不用xib了,贴出现成的一篇文章。

iOS XIB使用Safe Area后在iOS9和10上面出现的问题和解决方案

4.automaticallyAdjustsScrollViewInsets 和 contentInsetAdjustmentBehavior

  • automaticallyAdjustsScrollViewInsets:

在iOS7.0以后,相对于ScrollView新增属性,默认为YES,系统会根据所在界面的astatus bar, search bar, navigation bar, toolbar, or tab bar等自动调整ScrollView的inset。

- (void)viewDidLoad {
   [super viewDidLoad];
   self.title = @"我是导航条";

   self.view.backgroundColor = [UIColor redColor];
   UITableView *testTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, KScreenWidth, KScreenHeight) style:UITableViewStylePlain];
   testTableView.backgroundColor = [UIColor blueColor];
   testTableView.delegate = self;
   testTableView.dataSource = self;
   [self.view addSubview:testTableView];

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
   if (!cell) {
       cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
   }
   cell.textLabel.text = [NSString stringWithFormat:@"%ld", (long)indexPath.row];
   return cell;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
   return 20;
}

在这里插入图片描述
在这里插入图片描述
可以看到没有改变tableView的frame,只是显示范围变了。

如果没有这个属性,我们要实现同样的效果,tableView尺寸要这样设置。当然手动修改insets也是可以的。

x = 0, 
y = KStatusBarAndNavigationBarHeight, 
width = KScreenWidth, 
height = KScreenHeight - KStatusBarAndNavigationBarHeight

但是要注意:这种自动调整是在ScrollView是其根视图添加的的第一个控件的时候,才会出现自动调整的效果。详情查看automaticallyAdjustsScrollViewInsets属性

  • contentInsetAdjustmentBehavior

iOS11中废弃了automaticallyAdjustsScrollViewInsets,取而代之的是contentInsetAdjustmentBehavior属性。

该属性原理和automaticallyAdjustsScrollViewInsets原理相似,是为了进一步适应安全区域。
在这里插入图片描述

如果你需要自定义内边距,代码将变成以下这样。

if (@available(iOS 11.0, *)) {

        self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

} else {

        self.automaticallyAdjustsScrollViewInsets = NO;

}

contentInsetAdjustmentBehavior各个值之间的区别

链接里有这观点
在这里插入图片描述

最后来谈一下关于全面屏的适配方案。

  • 支持横屏的App,每个界面带ScrollView的吧。
  • 如果你的App最低支持iOS11.0,那么用safeAreaLayoutGuide约束将非常刺激。横屏基本不用管,除非排版需求不一样。
  • 如果你的App要适配11.0-,不支持横屏。那么采用宏来写目前是主流。只是以后出了新类型可能要稍微修改一下宏,并且运行逐个界面检查。目前11.0起步的App毕竟少数,用safeAreaLayoutGuide反而要多判断版本号。看以后App支持版本号趋势吧。
  • 如果你的App要适配11.0-,支持横屏。建议用约束。用frame可能写死人,自求多福吧。
  • 横屏有时实在没办法解决某些问题的话,就写两套。关于iOS横竖屏适配

电话、热点状态栏问题

有电话打进来、手机开了热点有连接,状态栏会变长20。虽然很多App并未对这些情况适配,但优秀的App应该要处理好。

在这里插入图片描述

横屏和电话热点并无直接关系。横屏状态下默认状态栏是不显示的。

当状态栏增高时,App的控制器的view将会下移20,但是高度却不变。tabBar不会有任何改变。所以如果某个界面scrollView一直到底的话,最好用约束到底部,这样调用viewWillLayoutSubviews时就会修改scrollView高度。建议不要写高度,不然会出现scrollView底部显示丢失20高度的问题。

个人总结的UI在不同尺寸下适配方案

这时就要说回上面提到的宏了。

#define KScaleWidth(width) ((width)*(KScreenWidth/375.f))
#define IsIphone6P          SCREEN_WIDTH==414
#define SizeScale           (IsIphone6P ? 1.5 : 1)
#define kFontSize(value)    value*SizeScale
#define kFont(value)        [UIFont systemFontOfSize:value*SizeScale]

1.UILabel的适配问题

相信开发过程中都遇到过字体适配问题。

UIFont

App如果要设置全局字体,可以通过Swizzing修改。或者像以上宏一样,传进参数,修改字体大小。

看过一篇文章,淘宝在Plus机型的字体都加大成1.5倍。笔者买不起Plus机型,更不敢装淘宝这种剁手App,所以无法验证。

iOS字体大小适配的几种方法

本文要探究的是UILabel显示的问题。重点并不在UIFont上。
先研究UILabel。

  • UILabel默认字体为[UIFont systemFontOfSize:17];//
    每个中文文字宽度为17。但字母、数字宽度并非固定。例如1比0瘦。注意这将可能是个坑。
  • numberOfLines只有设定了宽度约束的情况下起效。否则Label只会显示一行。
  • UILabel默认垂直方向会居中显示,即当Label高度高于text高度,文字在垂直方向上居中。水平方向上textAlignment可以设置。

在这里插入图片描述

如果要设置成顶部对齐,有好几种方法。最粗暴的是用UITextView。

在这里插入图片描述
lineBreakMode设置文字过长时省略号放哪。

label.lineBreakMode = NSLineBreakByCharWrapping;以字符为显示单位显

示,后面部分省略不显示。

label.lineBreakMode = NSLineBreakByClipping;剪切与文本宽度相同的内

容长度,后半部分被删除。

label.lineBreakMode = NSLineBreakByTruncatingHead;前面部分文字

以……方式省略,显示尾部文字内容。

label.lineBreakMode = NSLineBreakByTruncatingMiddle;中间的内容

以……方式省略,显示头尾的文字内容。

label.lineBreakMode = NSLineBreakByTruncatingTail;结尾部分的内容

以……方式省略,显示头的文字内容。

label.lineBreakMode = NSLineBreakByWordWrapping;以单词为显示单位显

示,后面部分省略不显示。
  • adjustsFontSizeToFitWidth //设置字体大小适应label宽度
  • minimumScaleFactor

在这里插入图片描述

  • sizeToFit

改变Label的尺寸以显示文字。需要注意的是,需要在label.text赋值后执行。如果宽高都进行了约束,那么调用sizeToFit将无效果。如果只约束了宽度,并且行数非1,那么sizeToFit会修改Label的高度;如果只约束了高度,或者行数为1,那么sizeToFit只会修改Label的宽度。如果二者皆未约束,只会修改Label宽度。

  • sizeToFit和adjustsFontSizeToFitWidth的区别。

从字面上我们就能区分开,前者是改变Label的宽高,后者是改变字体大小。

反正以后做项目的时候,明确需求,我们是固定了字体的大小来适配label的宽,还是固定了label的宽来适配字体的大小,前者用sizeToFit,后者用adjustFontsToFit。

以淘宝举例。为了研究只能下这剁手App了。

se下搜iPhoneX在这里插入图片描述
6s下搜iPhoneX在这里插入图片描述
这里无视Label左边的图标(天猫、双11)。

其商品标题有两行。之前提到了,如果不作处理,Label默认垂直方向居中。如果文字长度只有一行,那会显示奇怪。所以笔者来约束的话,先做垂直方向处理,并且约束了宽度距离左边图片,距离cell.contentView右边。然后设置行数为2(或者约束高度,行数为0,lineBreakMode裁剪)。

还有一种方案是Label根据文字长度自动适配高度,并设置最大高度限制。输入框高度就用类似方案。网上搜UITextView自动高度一堆教程。笔者懒得翻就不弄了。基本原理是根据文字大小长度、Label的宽度、文字间距,算出文字高度,然后设置Label高度为 最大限制高度与文字高度 较小者。

再来看价格和付款人数Label。

笔者设计的话,会采用以下形式。

priceLabel.font = ...
[priceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(imageView.mas_right).offset(...);
    make.height.equalTo(...);
    make.top...;
}];

numberOfPeopleLabel.font = ...
[numberOfPeopleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(priceLabel.mas_right).offset(...);
    make.height.equalTo(...);
    make.top...;
}];

然后在cell设置model时

priceLabel.text = ...
[priceLabel sizeToFit];
numberOfPeopleLabel.text = ...
[numberOfPeopleLabel sizeToFit];

总结一下,开发中很少会用到adjustsFontSizeToFitWidth,大多数时候都会顶部对齐、换行、裁剪,或设置自动高度。

2.UI在不同尺寸的适配

来说最后一个非常有用的宏。

#define KScaleWidth(width) ((width)*(KScreenWidth/375.f))

笔者遇到的设计师给的图都是i6屏幕,其宽度为375.f。如果给的图不是,那么将这个宏数值修改即可。

这个宏有什么用呢?

其实就是一个比例转换的问题。不同屏幕下,某些UI可能大小不一样,这时候采用这个宏将会非常方便。

还是举回上面的两张淘宝图例子。

笔者目测(目测而已),cell是不同高度的。假如6s中商品图的宽度150.f,占屏宽0.4。在se中按照比例,320 * 0.4,为128。

那么我们用这个宏,就能一步到位。KScaleWidth(150),在6s中就为150,在se中为128。

除此之外,间距约束用这个宏也有奇效。

这个宏在collectionView中更显神威。

在这里插入图片描述
设计图算好了两个cell的间距,每个cell的大小,整个collectionView的大小,contentInset。这时我们采用这个宏,在不同屏幕下的适配问题将迎刃而解。

这里为什么不写出KScaleHeight呢?

笔者并不是说不能用,只是view通常是被宽度所限制。你见过微信的cell文本内容高度有变化吗hhhhh。就像图片尺寸变了,高度也是被图片宽度带动,而不是屏幕高度。

当然此宏虽很有用,但是开发中还是要经过考虑哪些地方需要用。

作者:Hsusue
链接:https://juejin.im/post/5bd2a094518825289f7f3d17

2019-12-30 18:32:25 unhejing 阅读数 729

目录

1.准备环境

2.登录 iOS Dev Center

3.申请证书和描述文件之前需要先申请App ID和证书请求文件

4. 申请开发(Development)证书和描述文件(用户开发者开发和测试) 

 5. 申请发布(Distribution)证书和描述文件

6.使用Hbuilder X在线云打包


1.准备环境

(1)必需要有苹果开发者账号,并且加入了 “iOS Developer Program”

(2)Mac OS 10.9以上系统(如果已经申请p12证书则不需要)我们这里p12在线生成,无需使用mac电脑

2.登录 iOS Dev Center

(1)登录iOS Dev Center,地址:https://developer.apple.com/devcenter/ios/index.action

(2)登录成功后在页面左侧选择 “Certificates,IDs & Profiles” 进入证书管理页面:

(3)在证书管理页面,可以看到所有已经申请的证书及描述文件,如下图:

TYPE:Development 为开发证书,Distribution为发布证书

3.申请证书和描述文件之前需要先申请App ID和证书请求文件

(1)首先需要申请苹果 App ID (App的唯一标识)如果已申请,请跳过

--选择页面的 “Identifiers" 可查看到已申请的所有 App 应用标识,点击页面上的加号来创建一个新的应用标识:

--选择标识类型为 “App IDs”,然后点击 “Continue”

--平台选择 “iOS,tvOS,watchOS”,Bundle ID 选择 “Explicit”,在 Description 中填写描述,然后填写 Bundle ID,Bundle ID 要保持唯一性,建议填写反域名加应用标识的格式 如:“io.dcloud.hellouniapp”, 然后点击 “Continue”
注意:在 HBuilderX 中 App 提交云端打包时界面上的 AppID 栏填写的就是这个 Bundle ID

--接下来需要选择应用需要使用的服务(如需要使用到消息推送功能,则选择“Push Notifications”),然后点击 “Continue”
注意:如果App用不到的服务一定不要勾选,以免响应审核

--接着点击Register即可 

 

--确认后选择提交,回到 identifiers 页面即可看到刚创建的App ID:

 (2)生成证书请求文件

不管是申请开发 (Development) 证书还是发布 (Distribution) 证书,都需要使用证书请求 (.certSigningRequest) 文件,证书请求文件需在Mac OS上使用 “钥匙串访问” 工具生成。这里是需要mac电脑,过程可参考:https://ask.dcloud.net.cn/article/id-152,我这里演示没有mac电脑的情况。

--注册登录香蕉云编,地址:https://www.yunedit.com/

--点击ios证书生成,新建CSR文件。(根据需求填写)

--生成以后点击下载:即可得到证书请求文件:CertificateSigningRequest.certSigningRequest

4. 申请开发(Development)证书和描述文件(用户开发者开发和测试) 

开发(Development)证书及对应的描述文件用于开发阶段使用,可以直接将 App 安装到手机上,一个描述文件最多绑定100台测试设备(开发证书不能用于发布应用到 App Store)。

(1)申请开发(Development)证书

--在证书管理页面选择 “Certificates" 可查看到已申请的所有证书(TYPE:Development 为开发证书,Distribution为发布证书),点击页面的加号来创建一个新的证书:

--在 “Software” 栏下选中 “iOS App Development” 然后点击 “Continue”: 

-- 接下来需要用到刚刚在香蕉云编上生成的证书请求文件,点击“Choose File...”选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件,点击 “Continue” 生成证书文件:

--生成证书后选择 “Download” 将证书下到本地 (ios_development.cer):

 --如果是mac电脑,双击保存到本地的 ios_development.cer 文件,会自动打开 “钥匙串访问” 工具说明导入证书成功,可以在证书列表中看到刚刚导入的证书,接下来需要导出 .p12 证书文件,选中导入的证书,右键选择 “导出...”,这里仍然不使用mac电脑,直接使用香蕉云编,生成p12文件,如下:上传cer,然后点击去生成。

--上传成功以后点击去生成,输入证书密码即可:

--生成以后点击下载,即可得到p12文件

--至此,我们已经完成了开发证书的制作(得到了 xxx.p12 证书文件),接下来,继续生成开发阶段所需的描述文件,在生成描述文件之前,需要先添加调试设备(iPhone 、iPad)

(2)添加调试设备 

开发描述文件必须绑定调试设备,只有授权的设备才可以直接安装 App,所以在申请开发描述文件之前,先添加调试的设备。
(如果已经添加设备,可跳过此节)

--在证书管理页面选择 “Devices”,可查看到已添加的所有设备信息,点击页面上的加号来添加一个新设备:

--输入设备名称和UUID

 获取设备UDID方法,将设备连接到电脑,启动 iTunes,点击此区域可切换显示设备的 UDID,右键选择复制

--输入完成后,点击“Continue” 继续完成添加即可;也可以通过香蕉云扫码获取,如下图:

 (3)申请开发 (Development) 描述文件

--在证书管理页面选择 “Profiles”,可查看到已申请的所有描述文件,点击页面上的加号来添加一个新的描述文件:

--在 “Development” 栏下选中 “iOS App Development”,点击“Continue”按钮:
 --这里要选择之前创建的 “App ID” ,点击“Continue”:

--接下来选择需要绑定的证书,这里建议直接勾选 “Select All”,点击“Continue”:

 --选择授权调试设备,这里建议直接勾选 “Select All”,点击 “Continue”:

--输入描述文件的名称(如“HelloUniAppProfile”), 点击 “Generate” 生成描述文件:

 --点击“Download”下载保存开发描述文件(文件后缀为 .mobileprovision),对应uniapp云打包的证书profile文件

至此,我们已经得到了开发证书(.p12)及对应的描述文件(.mobileprovision),接下看一下如何制作发布证书及发布描述文件

 5. 申请发布(Distribution)证书和描述文件

发布 (Production) 证书用于正式发布环境下使用,用于提交到Appstore审核发布。发布证书打包的 ipa,不可以直接安装到手机上

(1)申请发布(Production)证书

--在证书管理页面选择 “Certificates" 可查看到已申请的所有证书(TYPE:Development 为开发证书,Distribution为发布证书),点击页面的加号来创建一个新的证书:

--在 “Software” 栏下选中 “App Store and Ad Hoc”,点击 “Continue”:

--接下来同样需要用到之前生成的证书请求文件,点击“Choose File...”选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件,点击 “Continue” 生成证书文件:

 --生成证书成功,选择“Download” 将证书下载到本地 (ios_production.cer):

--同样双击保存到本地的 ios_production.cer 文件将证书导入到 “钥匙串访问”工具中,可以在证书列表中看到刚刚导入的证书,接下来需要导出 .p12 证书文件,选中导入的证书,右键选择 “导出...”,我们这里仍然用香蕉云编生成。参考开发证书p12生成。

--至此,我们已经完成了发布证书的制作(得到了 xxx.p12 证书文件),接下来,继续生成发布描述文件 

(2)申请发布 (Distribution) 描述文件

--在证书管理页面选择 “Profiles”,可查看到已申请的所有描述文件,点击页面上的加号来添加一个新的描述文件:

--在 “Distribution” 栏下选中 “App Store”,点击“Continue”按钮:

--这里要选择之前创建的 “App ID”,点击“Continue”:

 --接下来选择需要绑定的发布证书(iOS Distribution),这里勾选刚刚生成的发布证书”,点击“Continue”:

--接下来输入描述文件的名称(如“HelloUniAppProfile_Distribution”), 点击 “Generate” 生成描述文件:

 

--然后点击 “Download” 将描述文件下载到本地(文件后缀为 .mobileprovision)

至此,我们已经得到了发布证书(.p12)及对应的发布描述文件(.mobileprovision) 

6.使用Hbuilder X在线云打包

本博客参考Dcloud官方文章:https://ask.dcloud.net.cn/article/id-152 亲测可行。

2016-08-22 12:04:15 boyit0 阅读数 5486

虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的。

既然是在iOS中的Safari折腾的,那么代码中利用到的也基本上都是Safari的私有属性。

添加图标到主屏幕是Web App的第一步:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">

添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed,区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在,图标的尺寸就需要做4个:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes尺寸来告诉设备该调用哪个图标。

有了图标还不够像,还需要加上启动画面:

<link rel="apple-touch-startup-image" sizes="2048x1496" href="icon-2048x1496.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1536x2008" href="icon-1536x2008.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1024x748" href="icon-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" sizes="768x1004" href="icon-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" sizes="640x920" href="icon-640x920.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">

apple-touch-startup-image是用来标示启动画面的,但它不像apple-touch-icon可以指定sizes来告诉设备该使用哪个图片(也有一种说法是在iOS5中已经支持sizes识别了,但没有测试成功),所以只能通过media里的设备分辨率的判断值来识别,而iPhone Retina的分辨率值界于取值之间,所以需要通过webkit的私有属性-webkit-min-device-pixel-ratio:2来鉴别像素密度以进行识别。

启动画面的图片尺寸并非完全等于设备的尺寸,比如iPad2的尺寸是1024×768,但它的启动画面尺寸横向是1024×748,竖向尺寸是768×1004,因为需要减去系统状栏的高度20px,而使用的Retina屏幕的iPhone4以及iPad3则需要减去状态栏的高度40px。

Web App运行起来要像Native App,那么就要去掉Safari的一些默认控件,比如地址栏、状态栏之类的。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">

apple-mobile-web-app-capable是用来定义应用全屏展示的;在定义了apple-mobile-web-app-capable的前提下,设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效;format-detection的值用于启用或禁用自动检测在网页中可能出现的电话号码;

viewport并非Safari的私有属性,width用于指定宽度,initial-scale指定初始化的缩略比例,minimum-scale指定缩小的比例,而maximum-scale则是放大的比例,当然这些缩放都取决于user-scalable——决定用户是否能缩放页面。

更正:

虽然New iPad采用了Retina屏幕,但实际上物理分辨率并没有变,还是1024*768的,所以以上代码中的New iPad的启动画面代码尺寸有误,应该是

<link rel="apple-touch-startup-image" sizes="2048x1496" href="icon-2048x1496.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1536x2008" href="icon-1536x2008.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">


阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能(虽然很多小白用户都不知道这个),用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的,展示形式跟原生的应用是一样并最大限度地模拟本地APP 的效果,不过,现在发现了个问题,就是通过主屏幕上点击进入Web APP 形式的网页时候,点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接。

问题解决:

<script type="text/javascript">
//iOS Web APP中点击链接跳转到Safari 浏览器新标签页的问题 devework.com
//stanislav.it/how-to-prevent-ios-standalone-mode-web-apps-from-opening-links-in-safari
if(("standalone" in window.navigator) && window.navigator.standalone){
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy = event.target;
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
{
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}
</script>


2017-12-06 16:31:04 st646889325 阅读数 14570

关于设置launchImage:
这里写图片描述

工程配置信息中设置显示launchImage:
1、删除Launch Screen File
2、在Launch Images Source中设置你在Assets.xcassets中设置的启动页

这里写图片描述

如果你发现:项目运行并没有显示设置的图片,那么试试下面这种方法
1、转到LaunchScreen.storyboard
2、取消勾选配置信息中的Use as Launch Screen选项

这里写图片描述

1.点击工程目录中的Images.xcassets,点击左侧边栏的LaunchImages
2.然后在xcode最右侧的边栏处选择你的APP是否要对ipad、横竖屏、以及低版本的iOS系统做支持。

这里写图片描述

当你再次启动程序时,如果你发现,这一切并没有什么luan用!好吧,请在模拟器中卸载/删除你的APP,然后再重新运行即可

关于 LaunchImage 图片 命名 以及其 尺寸:

iPhone Portrait iOS 11 (1125×2436) @3x
iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2x
iPhone Portrait iOS 7,8-2x (640×960) @2x
iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x
iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

iPad Portrait iPad2 and iPad mini (768×1024) @1x
iPad and iPad mini (1536×2048) @2x
iPad Pro (2048×2732) @2x

Xcode工程结构详解

阅读数 735

cordova打包webapp

阅读数 27

TimLiu-iOS

阅读数 1463

iphone机型分辨率

阅读数 522