关于前端:翻译-JavaScript-Everywhere第25章-移动应用程序发布

1次阅读

共计 5393 个字符,预计需要花费 14 分钟才能阅读完成。

翻译 |《JavaScript Everywhere》第 25 章 挪动应用程序公布

写在最后面

大家好呀,我是毛小悠,是一位前端开发工程师。正在翻译一本英文技术书籍。

为了进步大家的浏览体验,对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央,或者你有任何意见或者倡议,能够在评论区留言,或者加我的微信:code_maomao,欢送互相沟通交流学习。

(σ゚∀゚)σ..:*☆哎哟不错哦

第 25 章 挪动应用程序公布

在我上世纪 90 年代中期的高中,为你的 TI-81 图形计算器下载游戏是一种风潮。

有人会失去一个游戏的拷贝件,而后它会像野火一样蔓延开来,咱们每个人轮流用一根数据线把计算器连贯到另一个计算器上,以便加载游戏。在你的计算器上玩游戏是一种既能让你在课后或自习室里实现课余时间的办法,又能放弃做作业的样子。然而,正如你所设想的,这种调配办法很慢,须要两个学生放弃连贯几分钟,而其余学生则只能期待着。明天,咱们的数字袖珍计算机比我那简陋的绘图计算器功能强大得多,局部起因是咱们能够通过可装置的第三方应用程序轻松扩大其性能。

随着咱们最后的利用程序开发实现,咱们当初能够公布咱们的应用程序,这样其他人能够拜访它。在本章中,咱们将理解如何配置咱们的应用程序。

而后咱们将在 Expo 上公开公布咱们的利用。

最初,咱们将生成能够提交到苹果或谷歌 Play 仓库的利用程序包。

app.json 配置

Expo应用程序包含一个 app.json 文件,该文件用于配置特定于应用程序的设置。

当咱们生成一个新的 Expo 应用程序时,会主动为咱们创立一个 app.json 文件。让咱们看一下为咱们的应用程序生成的文件:

{
"expo": {
"name": "Notedly",
"slug": "notedly-mobile",
"description": "An example React Native app",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {"fallbackToCacheTimeout": 1500},
"assetBundlePatterns": ["**/*"],
"ios": {"supportsTablet": true},
"android": {}}
}

其中大多数配置是不言自明的,但让咱们回顾一下它们的目标:

  • name

咱们的应用程序的名称。

  • slug

用于公布 Expo 应用程序的 URL 名称,位于expo.io/project-owner/slug

  • description

对咱们我的项目的形容,将在通过 Expo 公布应用程序时应用。

  • privacy

Expo我的项目的公共可用性。能够将其设置为 publicunlisted

  • sdkVersion

Expo SDK版本号。

  • platforms咱们的指标平台,包含ios, android, and web.
  • version

咱们应用程序的版本号,应遵循语义版本规范。

  • orientation方向

咱们应用程序的默认方向,能够应用纵向或横向值锁定,也能够将用户设施的旋转方向与默认方向匹配。

  • icon

应用程序图标的门路,将同时用于 iOSAndroid

  • splash

应用程序加载屏幕的图像地位和设置。

  • updates

加载利用后,咱们的利用应如何通过地面(OTA)更新进行查看的配置。该 fallbackToCacheTimeout 参数容许咱们指定工夫长度(以毫秒为单位)。

  • assetBundlePatterns

容许咱们指定应与咱们的应用程序捆绑在一起的资源的地位。

  • iosandroid

启用特定于平台的设置。

此默认配置为咱们的应用程序提供了松软的根底。在 Expo 文档中能够找到许多其余设置。

图标和应用程序加载屏幕

咱们设施上的小方形图标已成为古代社会中最出名的设计之一。闭上你的眼睛,我置信你能够设想到数十个图标,包含徽标或特定的背景色彩。此外,当用户点击图标时,会呈现一个初始的动态“启动屏幕”,该初始屏幕在应用程序加载时显示。到目前为止,咱们曾经应用了默认的空白 Expo 图标和启动屏幕。咱们能够在应用程序中将其替换为自定义的设计。

我在 assets/custom 文件夹中蕴含一个“值得注意的”图标和启动屏幕。咱们能够通过将它们替换为 assets 目录中的图像或更新咱们的 app.json 配置以指向自定义子目录中的文件来利用它们。

App 图标

icon.png文件是一个正方形 1024×1024 像素 PNG 文件。如果咱们应用 app.json 中的属性指向该文件,Expo将为各种平台和设施生成适当的图标大小。图标应齐全是正方形,没有任何通明像素。这是包含应用程序图标的最简略、最间接的办法:

"icon": "./assets/icon.png",

除了单个跨平台图标,咱们还能够抉择蕴含特定于平台的图标。这种办法的次要长处是包含实用于 AndroidiOS的独自图标款式,尤其是如果你有趣味应用 Android 的图标款式时。

自适应图标。

对于 iOS,咱们将持续应用单个1024×1024 png。在app.json 文件中:

"ios": {"icon": IMAGE_PATH}

要应用 Android 的自适应图标,咱们须要指定一个前台图像,一个背景色彩(或backgroundImage)和一个后备动态图标:

"android": {
"adaptiveIcon": {
"foregroundImage": IMAGE_PATH,
"backgroundColor": HEX_CODE,
"icon": IMAGE_PATH
}
}

对于咱们的用例,咱们能够持续应用单个动态图标。

开机画面

初始屏幕是在咱们的应用程序在设施上启动时短暂显示的全屏图像。咱们能够应用在 assets/custom 中找到的默认图片替换默认的 Expo 图片。只管设施的大小在平台内和平台之间会有所不同,但我还是抉择应用 1242×2436 的大小的

Expo文件。而后,Expo将调整图像的大小,以跨设施屏幕和宽高比工作。

咱们能够在 app.json 文件中配置初始屏幕,如下所示:

"splash": {"image": "./assets/splash.png", "backgroundColor": "#ffffff", "resizeMode": "contain"},

默认状况下,咱们设置的是红色背景色,当图像加载时,该色彩可能可见;或者,取决于咱们抉择的色彩。

resizeMode,作为初始屏幕图像四周的边框。咱们能够更新它以匹配屏幕的色彩:

"backgroundColor": "#4A90E2",

resizeMode批示如何针对各种屏幕尺寸调整图像大小。

通过设置为 contain 时,咱们保留了原始图像的长宽比。

当你应用 contain 时,某些屏幕尺寸或分辨率将把 backgroundColor 作为初始屏幕图像四周的边框。

或者,咱们能够将 resizeMode 设置为cover,这将扩大图像以填充整个屏幕。

因为咱们的应用程序具备轻微的突变,因而咱们将 resizeMode 设置为涵盖:

"resizeMode": "cover"

25-1。咱们的应用程序启动画面

以此配置了咱们的图标和初始屏幕图像(请参见图25-1)。当初,咱们筹备钻研如何公布咱们的应用程序,以使其他人能够拜访它。

Expo 公布

在开发过程中,咱们的应用程序可通过局域网在手机上的 Expo Client 应用程序中拜访。这意味着只有咱们的开发电脑和手机在同一网络上,咱们就能够拜访该应用程序。Expo使咱们可能公布我的项目,该我的项目将应用程序上传到 Expo CDN 并为咱们提供可公开拜访的 URL。这样,任何人都能够通过Expo Client 利用程序运行咱们的应用程序。这对于测试或疾速公布应用程序很有用。

要公布咱们的我的项目,咱们能够单击浏览器的 Expo Dev Tools 中的“公布或从新公布我的项目”链接(请参见图25-2),或在咱们的终端输出expo publish

25-2。咱们能够间接从Expo Dev Tools 公布咱们的应用程序

打包实现后,任何人都能够拜访 https://exp.host/@/ 通过Expo Client App 拜访该应用程序。

创立本机版本

尽管间接通过 Expo 公布是测试或疾速应用的绝佳抉择,但很可能咱们心愿通过 Apple App StoreGoogle Play Store公布咱们的应用程序。为此,咱们将构建包上传到各自商店中。

Windows 用户

依据 Expo 文档,Windows用户须要启用 LinuxWindows子系统(WSL)。为此,请依照 Microsoft 提供的 Windows 10 装置指南。

iOS

生成 iOS 版本须要具备 Apple Developer Program,每年免费99 美元。应用该帐户,咱们能够在 app.json 文件中为 iOS 增加一个bundleIdentifier

此标识符应遵循反向 DNS 表示法:

"expo": {
"ios": {"bundleIdentifier": "com.yourdomain.notedly"}
}

随着 app.json 文件的更新,咱们能够生成构建。在终端应用程序中,从我的项目目录的根目录中输出:

$ expo build:ios

运行构建后,零碎将提醒你应用 Apple ID 登录。登录后,零碎将询问你几个无关如何解决凭据的问题。Expo可能为咱们治理所有凭据和证书,你能够通过在以下每个提示符下抉择第一个选项来容许它们:

? How would you like to upload your credentials? (Use arrow keys)
❯ Expo handles all credentials, you can still provide overrides
I will provide all the credentials and files needed, Expo does limited validat
ion
? Will you provide your own Apple Distribution Certificate? (Use arrow keys)
❯ Let Expo handle the process
I want to upload my own file
? Will you provide your own Apple Push Notifications service key? (Use arrow keys)
❯ Let Expo handle the process
I want to upload my own file

如果你领有无效的 Apple Developer Program 帐户,Expo将生成文件,该文件能够提交给Apple App Store

安卓零碎

对于 Android,咱们能够生成Android 打包文件(APK)或 Android 应用程序捆绑包(AAB)文件。Android App Bundles是更古代的格局,所以让咱们走这条路。

如果你有趣味,Android开发人员文档详细描述了 App Bundle 的益处。

在生成捆绑包之前,让咱们更新 app.json 文件蕴含一个 Android 标识符。与 iOS 相似,这应该采纳反向 DNS 表示法:

"android": {"package": "com.yourdomain.notedly"}

这样,咱们可用于从终端应用程序生成利用程序包。确保进入我的项目的根目录并运行以下命令:cd

$ build:android -t app-bundle

必须对利用捆绑包进行签名。只管咱们能够本人生成签名,但 Expo 能够为咱们治理密钥库。运行命令生成捆绑包后,你将看到以下提醒:

? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
1) Let Expo handle the process!
2) I want to upload my own keystore!

如果抉择 1Expo 将为你生成应用程序捆绑包。在该过程完结时,你能够下载文件,该文件能够上传到 Google Play 商店。

公布到 App Store

因为审查指南的变动和相干费用,我将不会介绍将应用程序提交到 Apple App StoreGoogle Play商店的具体过程。Eopo文档很好地会集了资源和指南,并且是无关如何将利用公布到商店的过程的有用且最新的指南。

论断

在本章中,咱们钻研了如何公布和公布 React Native 应用程序。

Expo的工具使咱们可能疾速公布用于测试的应用程序,并生成能够上传到应用程序仓库的生产版本。Expo还为咱们提供了用于管制证书和依赖项的选项。

这样,咱们就胜利编写并公布了有后端数据的 API,一个Web 应用程序,一个桌面应用程序和跨平台挪动应用程序!

如果有了解不到位的中央,欢送大家纠错。如果感觉还能够,麻烦您点赞珍藏或者分享一下,心愿能够帮到更多人。

正文完
 0