从安装到部署的Cordova iOS应用开发说明

Hybrid Application development for Android is a breeze, be it for development or production configuration. But I personally find Cordova iOS setup, development, and deployment a bit complicated.

Android的混合应用程序开发轻而易举,无论是用于开发还是生产配置。 但是我个人发现Cordova iOS的设置,开发和部署有些复杂。

Most of the Hybrid Application Developers who are in the learning stages are not able to explore hybrid iOS app development process simply because they don't own a mac. And developing iOS apps requires the iOS SDK and XCode (unlike the Android SDK which runs on any Desktop OS).

处于学习阶段的大多数混合应用程序开发人员不能仅仅因为不拥有Mac而探索混合iOS应用程序开发过程。 开发iOS应用程序需要iOS SDK和XCode(不同于在任何桌面OS上运行的Android SDK)。

Therefore the aim of this guide is to show the basic workflow of hybrid iOS app development on a Mac. This way developers can see how it's done even if they can't develop the apps.

因此,本指南的目的是展示在Mac上进行混合iOS应用开发的基本工作流程。 这样,即使开发人员无法开发应用程序,他们也可以看到它是如何完成的。

创建一个cordova项目 (Creating a cordova project)

Begin by opening the terminal and creating a new cordova project (use sudo only if you have permission issues, ie. EACCESS errors):

首先打开终端并创建一个新的cordova项目(仅当您遇到权限问题(即EACCESS错误)时才使用sudo):

sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add ios

At the time of writing this guide the cordova iOS platform version is 4.3.1.

在撰写本指南时,cordova iOS平台版本为4.3.1。

We wont modify any source code of the app – rather, we'll simply continue with the default sample code that is added by cordova automatically when we run the create command. However it is assumed we will add plugins modify code in the www folder during normal development flow.

我们不会修改该应用程序的任何源代码-而是,我们将继续使用Cordova在运行create命令时自动添加的默认示例代码。 但是,假设在正常开发流程中,我们将在www文件夹中添加插件修改代码。

The next step is to run the cordova build command. This will convert our app code to an .xcodeproj file which we will use next.

下一步是运行cordova build命令。 这会将我们的应用程序代码转换为.xcodeproj文件,接下来我们将使用它。

sudo cordova build ios

The generated Xcode Project file will be here:

生成的Xcode项目文件将在此处:

[Your App Folder]/platforms/ios/[Your App Name].xcodeproj

Now in the case of Android the code signing is done using the Keystore file which is in .jks format. However in iOS it is required that you have a Apple developer account for distributing iOS apps. This is so that we can generate the Certificates and Provisioning Profiles required for distributing the app.

现在,对于Android而言,代码签名是使用.jks格式的Keystore文件完成的。 但是,在iOS中,必须具有Apple开发人员帐户才能分发iOS应用。 这样一来,我们便可以生成分发应用程序所需的证书配置文件

For pricing and other info about a Developer account refer to this page.

有关开发者帐户的价格和其他信息,请参阅此页面

创建开发证书 (Creating Development Certificates)

Once you have the account ready we can proceed further and login to your Apple developer account.

准备好帐户后,我们可以继续进行操作并登录到您的Apple开发人员帐户

The dashboard screen should look something like this:

仪表板屏幕应如下所示:

Click on Certificates, Identifiers & Profiles. This should take you to the following screen, which by default displays Certificates issued from your account:

单击Certificates, Identifiers & Profiles 。 这将带您进入以下屏幕,默认情况下,该屏幕显示从您的帐户颁发的证书:

iOS Certficates are of mainly two types: Development or Distribution. Click on the Plus (+) button in the top right corner of the list which will open the following page:

iOS证书主要有两种类型:开发或发行。 单击列表右上角的加号(+)按钮,将打开以下页面:

First let's create a development profile. Select iOS App Development and click continue.

首先,让我们创建一个开发配置文件。 选择“ iOS应用开发” ,然后单击“继续”。

This should bring you to the following screen, where you are asked to create and upload a Certificate Signing Request or CSR file.

这将带您到以下屏幕,在该屏幕上,系统将要求您创建和上传证书签名请求或CSR文件。

Follow the on-screen instructions to generate it, and continue. Once the certificate is ready, download it to your Mac, and double click it. This will add it to Keychain Access in the Mac.

按照屏幕上的说明进行生成,然后继续。 证书准备好后,将其下载到Mac,然后双击它。 这会将其添加到Mac中的“钥匙串访问”中。

创建发行证书 (Creating Distribution Certificates)

Creating distribution certificates is similar to the process for creating development certificates. However here we select App Store and Ad Hoc from Production section in the Add iOS Certifcate Page:

创建分发证书类似于创建开发证书的过程。 但是,在这里,我们在“ Add iOS Certifcate Page Production部分中选择“ App Store and Ad Hoc

创建应用ID (Creating the App ID)

Select App IDs from Identifiers section. This will open the list of existing app IDs. Next click on the Plus button on the top right (+). This will open the Register iOS App IDs page.

从“ Identifiers部分选择“ App IDs 。 这将打开现有应用程序ID的列表。 接下来,单击右上角的加号(+)。 这将打开“ 注册iOS应用ID”页面。

Select Explicit App ID. The App Description can be any related name – this is what will be displayed in the app id list against the particular app id.

选择“显式应用程序ID”。 “应用程序描述”可以是任何相关名称-这将显示在应用程序ID列表中与特定应用程序ID相对的名称。

An app id is a string in the format AB11A1ABCD.com.mycompany.myapp where AB11A1ABCD is the app id prefix which is by default the team ID and com.mycompany.myapp is the bundle ID which is unique to each app.

应用程序ID是格式为AB11A1ABCD.com.mycompany.myapp的字符串,其中AB11A1ABCD是应用程序ID前缀,默认情况下是团队ID,而com.mycompany.myapp是捆绑包ID,每个应用程序都是唯一的。

Its recommended that the bundle id must be in a reverse-domain name style string. For example, the company MYCOMPANY may have two apps (App1 and App2). So the HTTP URL for each app is usually app1.mycompany.com and app2.mycompany.com. Hence the bundle IDs for each app will be com.mycompany.app1 and com.mycompany.app2

建议捆绑软件ID必须使用反向域名样式字符串。 例如,公司MYCOMPANY可能有两个应用程序(App1和App2)。 因此,每个应用程序的HTTP URL通常是app1.mycompany.com和app2.mycompany.com。 因此,每个应用程序的捆绑包ID将为com.mycompany.app1和com.mycompany.app2

Next select any services from the checklist that you need to use in your app, such as Push Notifications, Wallet etc. Next click on continue and confirm the details and finally register the app id.

接下来,从清单中选择您需要在应用程序中使用的任何服务,例如“推送通知”,“钱包”等。下一步,单击“继续”并确认详细信息,最后注册应用程序ID。

将设备添加到您的开发者帐户 (Adding devices to your developer account)

Select All from the Devices section. This will open the list of already added devices to your Apple developer account. Only these devices are allowed to run the app during development.

Devices部分中选择All 。 这将打开已添加到您的Apple开发人员帐户的设备的列表。 在开发过程中,仅允许这些设备运行该应用程序。

To add a new device, click on the Plus button in the top right (+). The following screen will be displayed:

要添加新设备,请单击右上角(+)的加号按钮。 将显示以下屏幕:

Here the name can be any easily understandable name, for example iPhone 5s ABC Pvt Ltd. The device UDID is the unique ID associated with each Apple device.

这里的名称可以是任何易于理解的名称,例如iPhone 5s ABC PvtLtd。设备UDID是与每个Apple设备关联的唯一ID。

To find the UDID of a device follow these steps:

要查找设备的UDID,请按照下列步骤操作:

  1. Connect the device to your Mac.

    将设备连接到Mac。
  2. Open the System Information app located in the /Applications/Utilities folder.

    打开/ Applications / Utilities文件夹中的System Information应用程序。
  3. Select USB under Hardware in the left column.

    在左列的硬件下选择USB。
  4. On the right, select the connected device under USB Device Tree. The device ID, or “Serial Number”, appears below.

    在右侧的USB设备树下选择连接的设备。 设备ID或“序列号”出现在下面。

Once you have entered the device UDID and name click continue, then confirm the details and register.

输入设备的UDID和名称后,单击“继续”,然后确认详细信息并注册。

创建开发配置文件 (Creating a Development Provisioning Profile)

To create a development Provisioning Profile click on Provisioning Profiles -> All. This should show all the profiles, development as well as distribution. Next click on the Plus button on the top right (+) This should show the following page:

要创建开发的Provisioning Profile,请单击Provisioning Profiles-> All。 这应该显示所有配置文件,开发以及分布。 下一步,单击右上角的加号(+),这将显示以下页面:

Here select iOS App Development and click continue. In the dropdown that is displayed select the App ID we created previously and continue.

在这里选择iOS App Development ,然后单击继续。 在显示的下拉菜单中,选择我们之前创建的应用ID,然后继续。

Next A checklist of certificates is displayed from which we can select one or multiple. These are development certificates and not distribution ones. The generated provisioning profile will be linked to these certificates.

下一步显示证书清单,我们可以从中选择一个或多个。 这些是开发证书,而不是发行证书。 生成的供应配置文件将链接到这些证书。

When you click Continue, a checklist of devices is displayed. Select one, multiple, or all. Only selected devices will be allowed to run the app using this provisioning profile.

当您单击继续时,将显示设备清单。 选择一个,多个或全部。 使用此配置配置文件,仅允许选定的设备运行该应用程序。

Next, after clicking continue, enter the name for the provisioning profile, and download the generated .mobileprovision file.

接下来,单击“继续”后,输入配置文件的名称,然后下载生成的.mobileprovision文件。

Notes: it's the same process to create your Adhoc Distribution Provisioning Profile. It's also very similar to create your AppStore Distribution Provisioning Profile, except for that one we don't select devices, as the app will be available publicly through the AppStore.

注意 :创建Adhoc Distribution Provisioning Profile的过程与创建过程相同。 创建您的AppStore分配配置文件也非常相似,除了我们不选择设备外,因为该应用程序可以通过AppStore公开获得。

Now that we have all that we need we can continue generating the actual ipa using Xcode.

现在我们有了所需的一切,我们可以继续使用Xcode生成实际的ipa。

Cordova build command converts our app code to an xcode project. Using Xcode we create an .ipa file which is the actual app to be installed.

Cordova build命令将我们的应用程序代码转换为xcode项目。 使用Xcode,我们创建一个.ipa文件,这是要安装的实际应用程序。

Before moving forward double tap on both Certificates to add them to your keychain.

继续前进之前,双击两个证书将其添加到您的钥匙串中。

继续使用Xcode (Continuing in Xcode)

Next, double tap the .xcodeproj file which should open it in Xcode. (Please use the latest version of Xcode – I have used Xcode 8.3.2.)

接下来,双击.xcodeproj文件,该文件应在Xcode中打开。 (请使用最新版本的Xcode –我已经使用过Xcode 8.3.2。)

The Xcode screen should look something like the above.

Xcode屏幕应类似于上述内容。

Click on the App Name on the top left corner fo the window. This will open the detailed view on the right side.

单击窗口左上角的“应用程序名称”。 这将打开右侧的详细视图。

Then click on Targets-> App Name:

然后单击目标->应用程序名称:

This will display the following details tab:

这将显示以下详细信息选项卡:

Click on general, which should display this:

单击常规,应显示以下内容:

Uncheck the Automatically Manage Signing Checkbox.

取消选中“自动管理签名”复选框。

This should display the following error, stating AppNAme requires a provisioning profile:

这应该显示以下错误,表明AppNAme需要配置概要文件:

Next, under Signing (Debug), click the Provisioning Profile Dropdown and select the import profile option. In the file selection dialog that pops up, navigate to the path where the development provisioning profile is downloaded, and select it. It will have an extension of .mobileprovision.

接下来,在“签名(调试)”下,单击“ Provisioning Profile”下拉列表,然后选择“ 导入配置文件”选项。 在弹出的文件选择对话框中,导航到开发配置文件的下载路径,然后选择它。 它将具有.mobileprovision扩展名

After you select that, the error should be gone, and it should show Team as the Team Name in your Apple developer account and Signing Certificate Name.

选择该选项后,该错误应该消失了,它应该在Apple开发人员帐户和“签名证书名称”中显示“团队”作为“团队名称”。

Do the same thing for the Signing (Release) section – but in the file selection dialog select the Ad Hoc distribution Profile.

对“签名(发布)”部分执行相同的操作-但在文件选择对话框中,选择“临时分发配置文件”。

Now that the Code signing steps are done we either

现在,代码签名步骤已经完成,我们要么

  • run the app directly on device

    直接在设备上运行应用
  • run the app on a simulator

    在模拟器上运行应用
  • generate an ipa file for distribution

    生成一个IPA文件进行分发
  • upload app to appstore

    将应用上传到Appstore

直接在设备上运行应用 (Running the app directly on device)

To run the app on a device connect the device to the Mac via USB. Then in the top left corner in the list of devices select the connected device, and click the run or play button (black triangular button):

要在设备上运行该应用,请通过USB将设备连接到Mac。 然后在设备列表的左上角,选择已连接的设备,然后单击运行或播放按钮(黑色三角形按钮):

The build status will be displayed in the status bar on the top of the window. If all goes fine, the app should be installed on the device, and it should automatically load in a while.

构建状态将显示在窗口顶部的状态栏中。 如果一切正常,则应在设备上安装该应用程序,并在一段时间后自动加载。

Note: the steps are the same for running the app on a simulator. But instead of an actual device we use the available iPhone and iPad simulators from the device list.

注意 :步骤与在模拟器上运行应用程序的步骤相同。 但是,我们使用设备列表中可用的iPhone和iPad模拟器,而不是实际的设备。

生成一个IPA文件进行分发 (Generate an ipa file for distribution)

This approach can be done in case you need to distribute the app to the testing team, etc. However the device used by them must have a UDID present in the provisioning profile.

如果您需要将应用程序分发给测试团队等,可以采用这种方法。但是,他们使用的设备必须在配置文件中具有UDID。

From the Xcode menu select Product -> Clean, then Product -> Archive. The Archives organizer appears and displays the new archive.

从Xcode的菜单中选择Product - > Clean ,然后Product - > Archive 。 出现“档案”组织器,并显示新的档案。

In the righthand side panel select the Export option and a list of options will appear.

在右侧面板中,选择“导出”选项,然后将显示选项列表。

To distribute your app to users with designated devices, select “Save for Ad Hoc Deployment.” The app will be code signed with the distribution certificate.

要将您的应用分发给具有指定设备的用户,请选择“保存以进行临时部署”。 该应用程序将使用发行证书进行代码签名。

To distribute your app for internal testing, select “Save for Development Deployment.” The app will be code signed with your development certificate.

要分发您的应用程序以进行内部测试,请选择“保存以供开发部署”。 该应用程序将使用您的开发证书进行代码签名。

In the dialog that appears, choose a team from the pop-up menu and click Choose.

在出现的对话框中,从弹出菜单中选择一个团队,然后单击“选择”。

Next the device selection dialog pops up. Select either All devices or specific devices and click next.

接下来,弹出设备选择对话框。 选择所有设备特定设备 ,然后单击下一步。

Next the review dialog is displayed. Here it will show the signing certificate and provisioning profile used for generating the build. Review and click next. Finally the file save as a popup is displayed to select the location in the file system to store the exported app file.

接下来,显示查看对话框。 在这里它将显示用于生成构建的签名证书和供应配置文件。 查看并单击下一步。 最后,将显示另存为弹出窗口的文件,以选择文件系统中存储导出的应用程序文件的位置。

The app is exported as .ipa` file .

该应用程序将导出为.ipa`文件。

To run this file on device simply double tap it which will open it in iTunes.

要在设备上运行此文件,只需双击它即可在iTunes中将其打开。

Then connect your device (this should show a small device icon on the top left corner of the iTunes window). Tapping on it will show the device summary such as apps, music etc on the device. Select the apps tab, and in the left pane select the app to be installed and click install. Wait for the process to complete and click apply. This should install the ipa file on your device.

然后连接您的设备(这会在iTunes窗口的左上角显示一个小设备图标)。 轻触它会显示设备摘要,例如设备上的应用程序,音乐等。 选择“应用程序”选项卡,然后在左窗格中选择要安装的应用程序,然后单击“安装”。 等待该过程完成,然后单击“应用”。 这应该在您的设备上安装ipa文件。

To debug the app:

调试应用程序:

  1. open Safari

    打开Safari
  2. open the app on the device

    在设备上打开应用
  3. in the Safari menu bar select Develop --> Your Device Name --> Your App.

    在Safari菜单栏中,选择Develop --> Your Device Name --> Your App

那就是所有人! (Thats all folks!)

翻译自: https://www.freecodecamp.org/news/cordova-ios-application-development-setup-to-deployment/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值