翻譯 | 《JavaScript Everywhere》第25章 移動(dòng)應(yīng)用程序發(fā)布

寫(xiě)在最前面

大家好呀，我是毛小悠，是一位前端開(kāi)發(fā)工程師。正在翻譯一本英文技術(shù)書(shū)籍。

為了提高大家的閱讀體驗(yàn)，對(duì)語(yǔ)句的結(jié)構(gòu)和內(nèi)容略有調(diào)整。如果發(fā)現(xiàn)本文中有存在瑕疵的地方，或者你有任何意見(jiàn)或者建議，可以在評(píng)論區(qū)留言，或者加我的微信：code_maomao，歡迎相互溝通交流學(xué)習(xí)。

(σﾟ?ﾟ)σ…:*☆哎喲不錯(cuò)哦

第25章 移動(dòng)應(yīng)用程序發(fā)布

在我上世紀(jì)90年代中期的高中，為你的TI-81圖形計(jì)算器下載游戲是一種風(fēng)潮。

有人會(huì)得到一個(gè)游戲的拷貝件，然后它會(huì)像野火一樣蔓延開(kāi)來(lái)，我們每個(gè)人輪流用一根數(shù)據(jù)線把計(jì)算器連接到另一個(gè)計(jì)算器上，以便加載游戲。在你的計(jì)算器上玩游戲是一種既能讓你在課后或自習(xí)室里完成課余時(shí)間的方法，又能保持做作業(yè)的樣子。然而，正如你所想象的，這種分配方法很慢，需要兩個(gè)學(xué)生保持連接幾分鐘，而其他學(xué)生則只能等待著。今天，我們的數(shù)字袖珍計(jì)算機(jī)比我那簡(jiǎn)陋的繪圖計(jì)算器功能強(qiáng)大得多，部分原因是我們可以通過(guò)可安裝的第三方應(yīng)用程序輕松擴(kuò)展其功能。

隨著我們最初的應(yīng)用程序開(kāi)發(fā)完成，我們現(xiàn)在可以發(fā)布我們的應(yīng)用程序，這樣其他人可以訪問(wèn)它。在本章中，我們將了解如何配置我們的應(yīng)用程序。

然后我們將在Expo上公開(kāi)發(fā)布我們的應(yīng)用。

最后，我們將生成可以提交到蘋(píng)果或谷歌Play倉(cāng)庫(kù)的應(yīng)用程序包。

app.json配置

Expo應(yīng)用程序包括一個(gè)app.json文件，該文件用于配置特定于應(yīng)用程序的設(shè)置。

當(dāng)我們生成一個(gè)新的Expo應(yīng)用程序時(shí)，會(huì)自動(dòng)為我們創(chuàng)建一個(gè)app.json文件。讓我們看一下為我們的應(yīng)用程序生成的文件：

{"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": {}} }

其中大多數(shù)配置是不言自明的，但讓我們回顧一下它們的目的：

• name

  我們的應(yīng)用程序的名稱(chēng)。

• slug

  用于發(fā)布Expo應(yīng)用程序的URL名稱(chēng)，位于expo.io/project-owner/slug。

• description

  對(duì)我們項(xiàng)目的描述，將在通過(guò)Expo發(fā)布應(yīng)用程序時(shí)使用。

• privacy

  Expo項(xiàng)目的公共可用性。可以將其設(shè)置為public或unlisted。

• sdkVersion

  Expo SDK版本號(hào)。

• platforms我們的目標(biāo)平臺(tái)，包括ios, android, and web.

• version

  我們應(yīng)用程序的版本號(hào)，應(yīng)遵循語(yǔ)義版本標(biāo)準(zhǔn)。

• orientation方向

  我們應(yīng)用程序的默認(rèn)方向，可以使用縱向或橫向值鎖定，也可以將用戶(hù)設(shè)備的旋轉(zhuǎn)方向與默認(rèn)方向匹配。

• icon

  應(yīng)用程序圖標(biāo)的路徑，將同時(shí)用于iOS和Android。

• splash

  應(yīng)用程序加載屏幕的圖像位置和設(shè)置。

• updates

  加載應(yīng)用后，我們的應(yīng)用應(yīng)如何通過(guò)空中（OTA）更新進(jìn)行檢查的配置。該fallbackToCacheTimeout參數(shù)允許我們指定時(shí)間長(zhǎng)度（以毫秒為單位）。

• assetBundlePatterns

  允許我們指定應(yīng)與我們的應(yīng)用程序捆綁在一起的資源的位置。

• ios和android

  啟用特定于平臺(tái)的設(shè)置。

此默認(rèn)配置為我們的應(yīng)用程序提供了堅(jiān)實(shí)的基礎(chǔ)。在Expo文檔中可以找到許多其他設(shè)置。

圖標(biāo)和應(yīng)用程序加載屏幕

我們?cè)O(shè)備上的小方形圖標(biāo)已成為現(xiàn)代社會(huì)中最知名的設(shè)計(jì)之一。閉上你的眼睛，我相信你可以想象到數(shù)十個(gè)圖標(biāo)，包括徽標(biāo)或特定的背景顏色。此外，當(dāng)用戶(hù)點(diǎn)擊圖標(biāo)時(shí)，會(huì)出現(xiàn)一個(gè)初始的靜態(tài)“啟動(dòng)屏幕”，該初始屏幕在應(yīng)用程序加載時(shí)顯示。到目前為止，我們已經(jīng)使用了默認(rèn)的空白Expo圖標(biāo)和啟動(dòng)屏幕。我們可以在應(yīng)用程序中將其替換為自定義的設(shè)計(jì)。

我在assets/custom文件夾中包含一個(gè)“值得注意的”圖標(biāo)和啟動(dòng)屏幕。我們可以通過(guò)將它們替換為assets目錄中的圖像或更新我們的app.json配置以指向自定義子目錄中的文件來(lái)利用它們。

App圖標(biāo)

icon.png文件是一個(gè)正方形1024×1024像素PNG文件。如果我們使用app.json中的屬性指向該文件，Expo將為各種平臺(tái)和設(shè)備生成適當(dāng)?shù)膱D標(biāo)大小。圖標(biāo)應(yīng)完全是正方形，沒(méi)有任何透明像素。這是包括應(yīng)用程序圖標(biāo)的最簡(jiǎn)單、最直接的方法：

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

除了單個(gè)跨平臺(tái)圖標(biāo)，我們還可以選擇包含特定于平臺(tái)的圖標(biāo)。這種方法的主要優(yōu)點(diǎn)是包括適用于Android和iOS的單獨(dú)圖標(biāo)樣式，尤其是如果你有興趣使用Android的圖標(biāo)樣式時(shí)。

自適應(yīng)圖標(biāo)。

對(duì)于iOS，我們將繼續(xù)使用單個(gè)1024×1024 png。在app.json文件中：

"ios": {"icon": IMAGE_PATH }

要使用Android的自適應(yīng)圖標(biāo)，我們需要指定一個(gè)前臺(tái)圖像，一個(gè)背景顏色（或backgroundImage）和一個(gè)后備靜態(tài)圖標(biāo)：

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

對(duì)于我們的用例，我們可以繼續(xù)使用單個(gè)靜態(tài)圖標(biāo)。

開(kāi)機(jī)畫(huà)面

初始屏幕是在我們的應(yīng)用程序在設(shè)備上啟動(dòng)時(shí)短暫顯示的全屏圖像。我們可以使用在assets/custom中找到的默認(rèn)圖片替換默認(rèn)的Expo圖片。盡管設(shè)備的大小在平臺(tái)內(nèi)和平臺(tái)之間會(huì)有所不同，但我還是選擇使用1242×2436的大小的

Expo文件。然后，Expo將調(diào)整圖像的大小，以跨設(shè)備屏幕和寬高比工作。

我們可以在app.json文件中配置初始屏幕，如下所示：

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

默認(rèn)情況下，我們?cè)O(shè)置的是白色背景色，當(dāng)圖像加載時(shí)，該顏色可能可見(jiàn)；或者，取決于我們選擇的顏色。

resizeMode，作為初始屏幕圖像周?chē)倪吙颉Ｎ覀兛梢愿滤云ヅ淦聊坏念伾?#xff1a;

"backgroundColor": "#4A90E2",

resizeMode指示如何針對(duì)各種屏幕尺寸調(diào)整圖像大小。

通過(guò)設(shè)置為contain時(shí)，我們保留了原始圖像的長(zhǎng)寬比。

當(dāng)你使用contain時(shí)，某些屏幕尺寸或分辨率將把backgroundColor作為初始屏幕圖像周?chē)倪吙颉?/p>

或者，我們可以將resizeMode設(shè)置為cover，這將擴(kuò)展圖像以填充整個(gè)屏幕。

由于我們的應(yīng)用程序具有細(xì)微的漸變，因此我們將resizeMode設(shè)置為涵蓋：

"resizeMode": "cover"

圖25-1。我們的應(yīng)用程序啟動(dòng)畫(huà)面

以此配置了我們的圖標(biāo)和初始屏幕圖像（請(qǐng)參見(jiàn)圖25-1）。現(xiàn)在，我們準(zhǔn)備研究如何發(fā)布我們的應(yīng)用程序，以使其他人可以訪問(wèn)它。

Expo發(fā)布

在開(kāi)發(fā)過(guò)程中，我們的應(yīng)用程序可通過(guò)局域網(wǎng)在手機(jī)上的Expo Client應(yīng)用程序中訪問(wèn)。這意味著只要我們的開(kāi)發(fā)電腦和手機(jī)在同一網(wǎng)絡(luò)上，我們就可以訪問(wèn)該應(yīng)用程序。Expo使我們能夠發(fā)布項(xiàng)目，該項(xiàng)目將應(yīng)用程序上傳到Expo CDN并為我們提供可公開(kāi)訪問(wèn)的URL。這樣，任何人都可以通過(guò)Expo Client應(yīng)用程序運(yùn)行我們的應(yīng)用程序。這對(duì)于測(cè)試或快速發(fā)布應(yīng)用程序很有用。

要發(fā)布我們的項(xiàng)目，我們可以單擊瀏覽器的Expo Dev Tools中的“發(fā)布或重新發(fā)布項(xiàng)目”鏈接（請(qǐng)參見(jiàn)圖25-2），或在我們的終端輸入expo publish。

圖25-2。我們可以直接從Expo Dev Tools發(fā)布我們的應(yīng)用程序

打包完成后，任何人都可以訪問(wèn)https://exp.host/@/通過(guò)Expo Client App訪問(wèn)該應(yīng)用程序。

創(chuàng)建本機(jī)版本

雖然直接通過(guò)Expo發(fā)布是測(cè)試或快速使用的絕佳選擇，但很可能我們希望通過(guò)Apple App Store或Google Play Store發(fā)布我們的應(yīng)用程序。為此，我們將構(gòu)建包上傳到各自商店中。

Windows用戶(hù)

根據(jù)Expo文檔，Windows用戶(hù)需要啟用Linux的Windows子系統(tǒng)（WSL）。為此，請(qǐng)按照Microsoft提供的Windows 10安裝指南。

iOS

生成iOS版本需要具有Apple Developer Program，每年收費(fèi)99美元。使用該帳戶(hù)，我們可以在app.json文件中為iOS添加一個(gè)bundleIdentifier。

此標(biāo)識(shí)符應(yīng)遵循反向DNS表示法：

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

隨著app.json文件的更新，我們可以生成構(gòu)建。在終端應(yīng)用程序中，從項(xiàng)目目錄的根目錄中輸入：

$ expo build:ios

運(yùn)行構(gòu)建后，系統(tǒng)將提示你使用Apple ID登錄。登錄后，系統(tǒng)將詢(xún)問(wèn)你幾個(gè)有關(guān)如何處理憑據(jù)的問(wèn)題。Expo能夠?yàn)槲覀児芾硭袘{據(jù)和證書(shū)，你可以通過(guò)在以下每個(gè)提示符下選擇第一個(gè)選項(xiàng)來(lái)允許它們：

? How would you like to upload your credentials? (Use arrow keys) ? Expo handles all credentials, you can still provide overridesI 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 processI want to upload my own file? Will you provide your own Apple Push Notifications service key? (Use arrow keys) ? Let Expo handle the processI want to upload my own file

如果你擁有有效的Apple Developer Program帳戶(hù)，Expo將生成文件，該文件可以提交給Apple App Store。

安卓系統(tǒng)

對(duì)于Android，我們可以生成Android打包文件（APK）或Android應(yīng)用程序捆綁包（AAB）文件。Android App Bundles是更現(xiàn)代的格式，所以讓我們走這條路。

如果你有興趣，Android開(kāi)發(fā)人員文檔詳細(xì)描述了App Bundle的好處。

在生成捆綁包之前，讓我們更新app.json文件包含一個(gè)Android標(biāo)識(shí)符。與iOS類(lèi)似，這應(yīng)該采用反向DNS表示法：

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

這樣，我們可用于從終端應(yīng)用程序生成應(yīng)用程序包。確保進(jìn)入項(xiàng)目的根目錄并運(yùn)行以下命令：cd

$ build:android -t app-bundle

必須對(duì)應(yīng)用捆綁包進(jìn)行簽名。盡管我們可以自己生成簽名，但Expo可以為我們管理密鑰庫(kù)。運(yùn)行命令生成捆綁包后，你將看到以下提示：

? 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!

如果選擇1，Expo將為你生成應(yīng)用程序捆綁包。在該過(guò)程結(jié)束時(shí)，你可以下載文件，該文件可以上傳到Google Play商店。

發(fā)布到App Store

由于審查指南的變化和相關(guān)費(fèi)用，我將不會(huì)介紹將應(yīng)用程序提交到Apple App Store或Google Play商店的具體過(guò)程。Eopo文檔很好地匯集了資源和指南，并且是有關(guān)如何將應(yīng)用發(fā)布到商店的過(guò)程的有用且最新的指南。

結(jié)論

在本章中，我們研究了如何發(fā)布和發(fā)布React Native應(yīng)用程序。

Expo的工具使我們能夠快速發(fā)布用于測(cè)試的應(yīng)用程序，并生成可以上傳到應(yīng)用程序倉(cāng)庫(kù)的生產(chǎn)版本。Expo還為我們提供了用于控制證書(shū)和依賴(lài)項(xiàng)的選項(xiàng)。

這樣，我們就成功編寫(xiě)并發(fā)布了有后端數(shù)據(jù)的API，一個(gè)Web應(yīng)用程序，一個(gè)桌面應(yīng)用程序和跨平臺(tái)移動(dòng)應(yīng)用程序！

如果有理解不到位的地方，歡迎大家糾錯(cuò)。如果覺(jué)得還可以，麻煩您點(diǎn)贊收藏或者分享一下，希望可以幫到更多人。

總結(jié)

以上是生活随笔為你收集整理的翻译 | 《JavaScript Everywhere》第25章 移动应用程序发布的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。