开发记录

开发记录旨在记录开发过程中一些比较细微的知识点，技巧，以及一些开发过程中的意外事故。帮助回忆链接当时的场景

1. 在Xcode 9，使用UIImagePickerController拍照或者从相册中选取图片，会出现如下错误信息。待解决......

    [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled}

在Stack Overflow中同样有人提出该问题Xcode9，Swift4使用UIImagePickerController出错

虽然在控制台中显示了该错误，但是并不影响图片上传。后续有解决方案补充。

UPDATED:

这个问题在stackoverflow已经有人提供了解决方案，原因在于使用UIImagePickerController的时候。在使用之前权限认证，之后才使用UIImagePickerController功能。

1. 权限认证：

func checkPermission() {
      let photoAuthorizationStatus = PHPhotoLibrary.authorizationStatus() switch photoAuthorizationStatus {
      case .authorized: print("Access is granted by user")
      case .notDetermined: PHPhotoLibrary.requestAuthorization({
          (newStatus) in print("status is \(newStatus)") if newStatus == PHAuthorizationStatus.authorized { /         do stuff here */ print("success") }
      })
        case .restricted: / print("User do not have access to photo album.")
        case .denied: / print("User has denied the permission.")
    }
}    

2. 正确调用UIImagePickerController 的didFinishPickingMediaWithInfo

@objc func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
} 

2. 关于iOS中Provisioning Profile证书过期后，已经安装的App会有什么的影响。

已经安装的App会出现无法打开(打开即闪退)，所以需要在Apple的开发者后台中，重新创建Provisioning Profile，并且打包应用发布。

如何验证Provisioning Profile过期后，应用无法打开。将手机的时间调整为过期后的时间，kill应用(应用在后台关闭)，重新尝试打开应用，将无法打开应用。

3. 在UIWebView中，网页无法自适应WebView的大小，在WKWebView中可以正常显示。Stack Overflow有更多方式解决

3.1 首先需要在Html中的header标签中使用viewport

    

3.2 在UIWebView的代理方法`webViewDidFinishLoad `或者是`viewDidLoad`调用如下：

   self.webView.scalesPageToFit = YES;
   self.webView.contentMode = UIViewContentModeScaleAspectFit;

4. Mac笔记本，百度推送平台上传pem证书，验证失败。

具体Apple开发者平台创建证书，过程略。

直接说明原因——由于近期在升级了Mac系统从10.12.6到10.13。在百度推送开发者平台上，需要上传.pem格式的证书，该证书是基于在钥匙串中导出的 .p12证书转换过来的。在10.12.6系统中内置的openssl版本是：OpenSSL 0.9.8zh，在10.13中openssl版本是：LibreSSL 2.2.7。百度推送平台只接受0.98及一下版本转换的pem证书。既然知道了原因，那就是安装0.98版本的openssl就可以。

转换命令——在terminal中：

openssl pkcs12 -in yourP12File.p12 -out yourPemFile.pem -nodes 

openssl下载地址openssl下载地址

安装步骤参考
MAC(Linux)升级Openssl

安装成功后，可以查看openssl的版本

/usr/local/openssl/bin/openssl version

显示

OpenSSL 0.9.8zh 3 Dec 2015

之后cd到证书存放的目录下，执行如下命令，就可以以openssl0.98版本转换证书格式了(系统默认的openssl版本还是2.2.7版本)

/usr/local/openssl/bin/openssl pkcs12 -in p12file.p12 -out penfile.pem -nodes

5. CSS实现控件的水平居中，垂直居中，水平垂直方向同时居中

由于我也是从移动端转向前端开发，对前端也是半路出家

html模版

    

        
水平方向上居中
    
    
    

        
垂直方向上居中
    
    
    

        
水平垂直方向上居中
    

5.1 水平方向居中

.container-horization {
    width: 100%;
    height: 200px;
    background: deepskyblue;
    margin-bottom: 20px;
}
        
.container-horization-item {
    width: 130px;
    height: 80px;
    background: yellow;
    margin: 0 auto;
    line-height: 80px;
    text-align: center;
}

在CSS中，对水平方向的居中是很容易的。需要控件的外边距即可，左右间距auto即可，margin: 0 auto;

水平方向居中.png

5.2 垂直方向上居中

在CSS中，则要吐槽一下，在垂直居中方面，利用margin: auto 0;垂直方向的自动外边距，无法达到效果。

这里主要还是由于没有对父控件即控件本身进行正确的定位。直接看代码， 首先对父控件需要使用相对布局，之后对子控件需要使用绝对布局，并且利用top，和bottom属性，结合margin: auto 0;，则可以达到效果。

.container-vertical {
      position: relative;
      width: 100%;
      height: 200px;
      background: deepskyblue;
      margin-bottom: 20px;
}
        
.container-vertical-item {
    position: absolute;
    width: 130px;
    height: 80px;
    text-align: center;
            background: yellow;
        line-height: 80px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

垂直方向上居中.png

5.3 水平垂直方向居中

有了5.2的经验，我们可以尝试设置子控件的left和right，top，bottom属性都为0，并且margin: auto;四个方向上都是自动外边距。则可以达到这样的效果。其中需要注意的子控件需要必须是display: block; 属性。

看代码

 .container-horization-vertical {
    position: relative;
    width: 100%;
    height: 200px;
    background: deepskyblue;
    margin-bottom: 20px;
}
        
.container-horization-vertical-item {
    position: absolute;
    width: 150px;
    height: 80px;
    background: yellow;
    line-height: 80px;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

image.png

小结: 这种方案在解决一些不算复杂的页面布局时还是很不错的，可以适配任何界面以及几乎所有的浏览器。但对于十分复杂的页面可能会需要其他的解决方案，但是从这个思路出发也可以得到启示

前端开发-p标签显示出来的font-size大于设置的font-size大小

在前端开发中，在某些情况下，发现我们设置的标签的font-size和展示在浏览器中的显示不一致，一半是显示效果更大。

如下：

我们设置p标签的font-size: 30px;但是浏览器最终显示出来的结果是font-size: 39px;的效果，如下如：

设置font-size: 30px;的原始代码

最终计算出来font-size: 39px;的效果

如上情况，是因为浏览器某些时候会自动的去计算字体的大小(累觉不爱，那还让我设置font-size属性干嘛？)，具体什么情况下会触发浏览器的自动计算字体大小的功能，继续调研。

关于如何解决这个奇怪的问题，这里需要于css中的font-size-adjust属性，可以参考Stack Overflow上的一篇讨论 Some font-size's rendered larger on Safari (iPhone)

html body {
        -webkit-text-size-adjust: none;
        font-size-adjust: none;
    }

font-size-adjust介绍 font-size-adjust介绍

这样在全局设置，将自动调整字体font-size功能关闭既可。