分类
科技文章

让div可以使用:focus伪类

:focus伪类默认只能用于input类元素,可以通过给div设置tabindex属性,即可应用:focus伪类

<div id="focus-example" tabindex="0">
  <div>Focus me!</div>
  <div class="extra">Hooray!</div>
</div>
#focus-example > .extra {
  display: none;
}
#focus-example:focus > .extra {
  display: block;
}

注:可以使用outline: none去掉框选效果

分类
科技文章

mac终端访问iCloud Drive

iCloud Drive 目录位于 Mobile Documents。可以在终端里这样访问 iCloud Drive,从用户的 home 目录进入:

cd ~/Library/Mobile\ Documents/com~apple~CloudDocs
分类
科技文章

electron 12版本preload.js问题

最新的electron 12.x版本中,在preload.js中直接给render进程的window挂载api已经无效了,electron提供了新的注入jsbridge的机制,对原有代码稍加改动即可:

例如在render进程的window上挂载$electron

contextBridge.exposeInMainWorld('$electron', electron);
分类
科技文章

apache切换php版本

在ubuntu18.04上可以安装7.4版本,参考这里。安装好了之后,在终端里php -v会显示7.4版本,但是apache2使用的php模块并不会直接更换版本。可以使用如下方法切换。

sudo a2dismod php7.2
sudo a2enmod php7.4
sudo service apache2 restart
分类
科技文章

SharedArrayBuffer更新

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

如果页面上的脚本用到了SharedArrayBuffer,需要配置跨域相关策略,根据官方指导,再引用脚本的入口文件配置如下即可

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

如果用的Apache2,可以在.htaccess中只为特定的目录开启。

<IfModule mod_headers.c>
  Header set Cross-Origin-Embedder-Policy require-corp
  Header set Cross-Origin-Opener-Policy same-origin
</IfModule>
分类
科技文章

mac上批量转换HEIC到JPG

iPhone拍摄照片默认是HEIC格式

macOS内置了一个终端工具,sips,用这个就可以转换格式

批量转换:

find . -name "*.HEIC" -exec bash -c 'sips -s format jpeg -s formatOptions default $1 --out ${1%.*}.jpg' bash {} \;
分类
科技文章

libmp3lame库编译的错误

在macOS上编译libmp3lame报错,3.100版本

Undefined symbols for architecture x86_64:
  "_lame_init_old", referenced from:
     -exported_symbol[s_list] command line option
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make[3]: *** [libmp3lame.la] Error 1
make[2]: *** [all-recursive] Error 1
make[1]: *** [all-recursive] Error 1
make: *** [all] Error 2

解决办法

删除 include/libmp3lame.sym 中的lame_init_old

分类
科技文章

javascript human file size

function humanFileSize(bytes, dp = 2) {
    const thresh = 1024;

    if (Math.abs(bytes) < thresh) {
        return bytes + 'B';
    }

    const units = ['KB', 'MB', 'GB'];
    let u = -1;
    const r = 10 ** dp;

    do {
        bytes /= thresh;
        ++u;
    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);

    return bytes.toFixed(dp) + units[u];
}
分类
科技文章

新建Developer ID Application 报错

报错:You already have a current Developer ID Application certificate or a pending certificate request.

Developer ID只能创建5个,新建超过5个时就会出现以上报错,而且开发者账号网站上Developer ID也不能revoke,如果revoke了Developer ID,之前用此证书签名的APP就无法再安装了。

Developer ID证书创建之后一定要注意备份,是可以重用的。

分类
科技文章

发布Electron App到Mac App Store

原文链接,此文在原文基础上有补充。

此文章基于Catalina新版发布规则撰写。

你有两种选择来发布适用于MacOS的Electron App。一种是直接发布(请参阅对Electron App进行公证),或通过Mac App Store(MAS)发布。通过MAS分发的所有应用程序都必须进行沙盒处理(sandbox),这意味着除已批准的权利(entitlements)外,它们完全独立。Mac的Catalina OS于2019年10月发布,添加了许多影响沙盒应用程序的更改,导致许多现有的Electron应用程序崩溃并拒绝了新应用程序。 要使基本应用程序成功提交以供审核并批准在Mac App Store上分发,您需要执行以下步骤。

1. 从已经开发完成的Electron App开始

必须使用Electron版本8.0.2或更高版本(或修补版本6.1.7和5.0.13),因为早期版本使用Apple不再允许的私有API。 Electron应该是dev(或global)依赖,而不是production依赖。

npm install -D electron

2. 苹果开发者账号

必须要有苹果开发者账号,需要付费600多一年。在developer.apple.com注册。

3. 创建两个签名证书

每个证书创建需要两步。

3.1 3rd Party Mac Developer Application 证书

3.1.1 请求证书

  • 打开钥匙串访问(位于 应用程序 > 实用工具)
  • 点击菜单 > 证书助理 > 从证书颁发机构请求证书
  • 在弹出的证书助理窗口中,填写用户电子邮件地址
  • 填写常用名称(例如3rd Party Mac Developer
  • CA电子邮件地址留空
  • 选择存储到磁盘,点击继续
  • 选择存储目录后,会存储文件名CertificateSigningRequest.certSigningRequest

3.1.2 导入证书到苹果开发者账号

  • 访问https://developer.apple.com/account > Certificates, IDs & Profiles > + (to add a new certificate) > Mac App Distribution > continue > Choose File > 选择刚刚生成的文件(CertificateSigningRequest.certSigningRequest) > continue > Download > 双击下载的文件(mac_app.cer),会自动加载到钥匙串。
  • 注意:在开发者账号网站中显示的名称是Mac App Distribution,加载到钥匙串之后显示的名称是3rd Party Mac Developer Application: {name} (XXXXXXXXXX),它们是相同的证书。
  • 删除CertificateSigningRequest.certSigningRequest文件。

3.2 3rd Party Mac Developer Installer 证书

大致重复3.1中的流程

3.2.1 请求证书

  • 打开钥匙串访问(位于 应用程序 > 实用工具)
  • 点击菜单 > 证书助理 > 从证书颁发机构请求证书
  • 在弹出的证书助理窗口中,填写用户电子邮件地址
  • 填写常用名称(例如3rd Party Mac Developer
  • CA电子邮件地址留空
  • 选择存储到磁盘,点击继续
  • 选择存储目录后,会存储文件名CertificateSigningRequest.certSigningRequest

3.2.2 导入证书到苹果开发者账号

  • 访问https://developer.apple.com/account > Certificates, IDs & Profiles > + (to add a new certificate) > Mac Installer Distribution > continue > Choose File > 选择刚刚生成的文件(CertificateSigningRequest.certSigningRequest) > continue > Download > 双击下载的文件(mac_installer.cer),会自动加载到钥匙串。
  • 注意:在开发者账号网站中显示的名称是Mac Installer Distribution,加载到钥匙串之后显示的名称是3rd Party Mac Developer Installer: {name} (XXXXXXXXXX),它们是相同的证书。
  • 删除CertificateSigningRequest.certSigningRequest文件。

查看证书

  • 在钥匙串中查看证书:打开钥匙串访问,点击“登录”,点击“我的证书”,刚刚导入的两个证书应该在列表中,名称是3rd Party Mac Developer Application: {name} (XXXXXXXXXX) 。个人开发者的name就是你的名字。
  • 在苹果开发者账号网站上查看:https://developer.apple.com/account/ > Certificates, IDs, & Profiles menu > Certificates menu > Mac App Distribution and Mac Installer Distribution 两种类型的证书在列表中可见。

证书备份

注意:如果更换了开发用的Mac电脑,需要备份证书再导入新设备才可以使用本次生成的证书,否则只能重新生成,之前导入到苹果开发者网站的证书下载导入钥匙串之后会显示缺少私钥,而且网站上可保留的证书数量很有限,想添加多的,只能先revoke以前的。备份的证书需要选择p12格式,包含公钥和私钥,可以设置密码保护。把备份的证书妥善保管,以备更换设备或者切换设备使用。备份操作在证书列表右键,选择导出,按操作提示执行即可。

4. 创建 App ID

  • Go to your developer account – developer.apple.com > Certificates, IDs & Profiles > Identifiers > + (to add a new id) > select App IDs > continue button.
  • On the Register App ID page:
    • Platform: MacOS
    • Bundle ID: Explicit. Apple recommends using a reverse-domain name style string (i.e., com.domainname.appname). This does not need to correspond with an actual website. This will need to match the appId property in the package.json file.
    • When done click continue, review it, then click register.

5. 在开发者账号中新建App

引用:https://help.apple.com/app-store-connect/
官方文档: help.apple.com/app-store-connect/#/dev2cd126805

此部分稍后再写,也有很多注意事项。

6. Create an icon set

参考:
https://www.electron.build/icons
https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon

此部分稍后再写

7. package.json文件

斜体字的值需要更改为你的信息。

{ 
  "name": "AppName",  
  "version": "1.0.0", 
  ...
  "author": "AuthorName", 
  "build": {  
    "appId": "com.companyname.appname",
    "productName": "App Name with spaces & special characters", 
    "buildVersion": "1",
    "copyright": "Copyright © 2020 Developer/Company Name", 
    "mac": {  
      "category": "public.app-category.categoryName", 
      "icon": "build/icon.icns",  
      "target": "mas",  
      "hardenedRuntime": false, 
      "entitlements": "build/entitlements.mas.plist", 
      "entitlementsInherit": "build/entitlements.mas.inherit.plist",  
      "provisioningProfile": "MacAppStore.provisionprofile",  
    } 
  } 
} 

参考文档:

一些注意事项:

  • nameproductNamename将用作您应用在用户计算机上的显示名称。它不能包含空格或特殊字符。如果要在name中使用空格或特殊字符,请在build键中添加一个productName键。 您可以设置其名称,使其显示在Mac App Store的appstoreconnect.apple.com上。
  • versionbuildVersion:package.json中的version应与appstoreconnect.apple.com上的应用程序的版本号相对应。如果您将应用程序上传到appstoreconnect,但在决定将其提交审核之前进行更改,则无法删除上传的内容。此时需要设置不同的buildVersion,重新构建之后上传。
  • appId:使用之前在开发者账号网站中创建的App ID
  • category键应与您在appstoreconnect.apple.com中为App设置的category一致。List of possible categories
  • target需要设置为mas
  • hardenedRuntime需要设置为false。如果要将app分发到MAS之外,则可以将其设置为true。参考:developer.apple.com/documentation/security/hardened_runtime_entitlements