通过Oracle JET进行移动

您选择Oracle JET而不是其他javascript框架的部分原因是，移动变得如此容易。

我的意思是将您的Web应用程序转换为本机移动应用程序，您可以在其中真正地对其进行调整以使用目标设备的功能。

我偶然发现了一些陷阱，花了一些时间才能弄清问题所在以及随后的解决方法。 希望这篇文章也会对您有所帮助。

这篇文章将带您逐步了解使用JET navdrawer模板中架设的Web应用程序，并针对我相当老的iPhone，而不用支付开发人员许可。 您将无法部署到应用程序商店，但至少以这种方式，您可以“在购买前尝试”。

Apple开发人员先决条件

开发Apple意味着注册Apple Developer Program。 在我的调查/测试中，我并不想花这99美元，而是发现您实际上可以创建一个临时文件夹（在创建后的7天内过期）。

首先，启动Xcode并导航到

  Xcode>首选项>帐户选项卡 

在这里，您可以通过单击+图标并从弹出菜单中选择“ Apple ID”来添加Apple ID。

添加后，您的Apple ID将显示您为个人团队的成员：

单击“管理证书…”，将弹出一个弹出窗口。

单击此窗口上的+，然后给自己授予“ iOS开发”证书。

不幸的是，这并没有总结我们为配置文件所做的一切。 在搜索了几个博客之后，我发现有用的一种方法是创建一个新的Xcode项目。

我们将不会使用该项目，而只是设置一个以初始化我们需要签署应用程序的配置文件。

• 打开Xcode，然后转到文件>新建>项目。
• 选择“ Single View App”。
• 在下一个屏幕中，我们需要提供一些值

产品名称需要与您的项目名称相匹配，并删除破折号。 例如，我的目录/项目名为“ web-to-mobile”，它解析为webtomobile。 将Team设置为您刚刚通过Xcode首选项添加的帐户，然后输入“ org.oraclejet”。

如上面的屏幕截图所示， 产品名称和组织标识符值构成了捆绑包标识符 。 捆绑标识符必须与$ project / hybrid / config.xml中的widget id属性相同：

在窗口上单击“下一步”。

系统将询问您将新项目存储在何处，以及是否要“创建Git存储库”。 对于Git，我们可以取消选中该框，然后您可以选择创建未使用项目的位置：

项目完成后，我们将创建一个配置文件。 您可以检查是否已使用终端创建了该目录，并使用以下命令更改了目录并查看文件夹的内容：

  cd〜/ Library / MobileDevice / Provisioning \ Profiles 
  ls -altr 

如果您打开.mobileprovision文件，则会找到您的TeamIdentifier ID：

连同文件名中的ID，您需要使用TeamIdentifier对您的应用程序进行签名。 下一步，我们将在build-config文件中使用这两个值。

添加混合源

  ojet添加混合动力 

是的 这就是您在JET项目中运行所需的一切，从而可以为移动设备架设项目。

旁注 ：您可以添加一些额外的参数来使事情变得更容易，例如--appName=”My New Cool App” ，这是模拟器/设备上的应用程序名称

配置文件包含您的iOS签名详细信息。 如开发人员指南中所述，Windows / Android开发不需要此功能。

下面是此配置文件的示例。 注意，我已将预配置文件的文件名放入“ provisioningProfile”，并将该文件中的值放入“ developmentTeam”：

 { 
 "ios": { 
 "debug": { 
 "codeSignIdentity": "iPhone Developer", 
 "provisioningProfile": "  { 
 "ios": { 
 "debug": { 
 "codeSignIdentity": "iPhone Developer", 
 "provisioningProfile": " c8dc2d39-5de2-4bb3-bc26-c83ed6d119ac ", 
 "developmentTeam": " ", 
 "developmentTeam": "  ", 
 "developmentTeam": " R5CXVFCSDJ ", 
 "packageType": "development" 
 }, 
 "release": { 
 "codeSignIdentity": "iPhone Distribution", 
 "provisioningProfile": "70f699ad-faf1-4adE-8fea-9d84738fb306", 
 "developmentTeam": "FG35JLLMXX4A", 
 "packageType": "app-store" 
 } 
 } 
 } ", 
 "packageType": "development" 
 }, 
 "release": { 
 "codeSignIdentity": "iPhone Distribution", 
 "provisioningProfile": "70f699ad-faf1-4adE-8fea-9d84738fb306", 
 "developmentTeam": "FG35JLLMXX4A", 
 "packageType": "app-store" 
 } 
 } 
 } 

有关更多信息，请访问：http://cordova.apache.org/docs/en/6.x/guide/platforms/ios/index.html#signing-an-app

注意：如果您尚未安装Cordova，则在运行该程序时将收到以下消息

Gotcha Alert：运行上述命令时，我没有正确访问目录的权限。 正如我发现的危险一样，如果这不起作用，那么您将面临进一步的问题。 因此，我在这里的提示不是退回到使用sudo，而是整理目录并确保其在Mac用户权限下。

运行此命令时，您将获得选择目标的选项。 对于Mac，如果已安装，则仅为iOS

完成后，您将收到“添加混合完成”消息：

当查看项目目录发生了什么时，您会注意到您现在拥有了混合 ， src-hybrid和src-web ：

起初，如此众多的目录看起来有些令人生畏，因此让我们依次回顾一下这些目录：

• 混合—这等效于您的“网络”文件夹。 它是现在包含您的xcode项目（hybrid / platforms / ios）的文件夹。 它包含已编译的“ web”文件夹以及src-hybrid的所有替代内容，而src-hybrid现在是设备的构建输出（hybrid / www）。
• src-hybrid-将此文件夹视为您的移动应用程序的替代目录。 例如，如果您希望某些视图使用不同的html或viewModel逻辑使用不同的HTML，则可以将其放入其中。 该目录中的文件将完全覆盖您的主“ src”目录中的文件
• src-web —如果您来自开发纯Web应用程序，那么您将完全了解“ src”和“ web”目录。 要了解“ src-web”文件夹，在考虑项目结构时需要进行一些范式转换。 您现在正在使用2种来源集。 并不是说所有东西都是重复的，这就是JET试图为您处理的伟大事情。 现在查看项目的方式是原始“ src”目录是您的主代码行，src-hybrid允许覆盖您的移动设备，而src-web则允许从您的主代码行进一步覆盖Web。 同样，如果您来自纯Web应用程序，则无需执行任何操作，但在必要时/必要时，JET会将此文件夹用作扩展点

编译到模拟器

如果您CD到$ JET_PROJ / hybrid，则可以根据需要运行cordova命令。 您不需要直接对cordova进行任何操作，但是了解它很有用。

例如，当您将模拟器瞄准特定设备时，您可以检查安装了哪些模拟器（我们将在以后使用）：

 cd hybrid 
 cordova run ios --list 

回到我们为什么在这里，您可以通过简单地运行以下命令在模拟器上运行Web应用程序：

  Ojet服务iOS 

ios平台的默认目标是模拟器，因此您无需提供该参数。 您也不需要提供build-config，这意味着让您的应用程序在模拟器上运行非常容易。

默认情况下，我的目标似乎是“ iPhone X”，我不太喜欢。

在对JET构建代码进行了一些调试之后，我发现您可以通过在仿真器后加半冒号后将其作为destination标志的一部分来将其定位到仿真器上的不同设备：

重要说明： JET不会将这种调试工作留给您解决。 我很好奇如何扩展我对构建工具的了解。 有命令ojet help 。 例如，可以运行有关服务应用程序的ojet help serve ： ojet help serve

运行以下命令意味着我可以使用前面提到的cordova list命令列出的设备之一来更改仿真器设备：

  ojet serve ios --destination =“模拟器：iPhone-5s” 
 要么 
  ojet serve ios --destination =“模拟器：iPhone-SE” 
 要么 
  ojet服务ios --emulator =“ iPhone-SE” 

在模拟器中运行后，您将看到您的应用程序：

部署到设备

如果您拥有“付费”开发人员条款，那么从这一点开始就很麻烦了，您只需要运行：

  ojet serve ios --destination =“ device” --build-config = mobileConfig.json 

Gotcha Alert ：但是使用自我创建的设置，由于配置文件是Xcode管理的，因此通过命令行运行上述命令会出现错误：

尽我所能，并且在没有真正理解Apple应用程序部署过程的情况下，我发现一些博客说它不再支持使用cordova和自定义功能对您的应用程序进行签名。

但是，并不是所有的东西都丢失了； 我们可以使用Xcode在这里完成工作。

要重申，仅在创建免费提供后才需要遵循此方法。

导航到您的xcode项目文件$JET_PROJ/hybrid/platforms/iOS/$your_project_name.xcode

并双击它以Xcode打开它：

将Xcode与您的项目一起打开后，单击左上角的项目名称，以打开您的项目选项。 您可以看到默认情况下存在错误。 这是因为没有选择团队 。

更换团队时，这些错误会消失：

现在，我们可以运行构建，并将应用程序部署到设备上。

但是，在应用程序加载后，我出现了稳定的白屏，并且Xcode日志中出现错误：

所以这不起作用，但是这里发生的是它为我们设置了自动配置文件。 现在，我们可以使用cordova启动该应用了。

因此，我现在建议您更改团队配置文件，关闭Xcode并运行JET脚本以最终部署：

  ojet服务ios-目标=“设备” 

Gotcha Alert ：第一次将您的应用程序安装到设备上时，您将收到一条类似于以下内容的消息：

这是因为您的自签名条款不受信任。 您可以通过在设备上导航至以下内容来信任此设备：

 设置>常规>设备管理>用户>信任用户 

现在，您可以重新运行命令，也可以尝试在设备上运行该应用程序。

有了我们，应用程序终于在设备上：

Gotcha Alert：我的Web应用程序在设备上的移动应用程序中运行时遇到问题。 该应用程序在模拟器中运行良好，但该应用程序未加载中心ViewModel。

最后，我将问题归结为main.js中的applyBindings剔除。 它掉下来的原因是……。我使用的是URLPathAdapter而不是URLParamAdapter（注意：如果未定义，则默认使用urlPathAdapter）。 在移动设备上加载的应用中添加此行后

  oj.Router.defaults ['urlAdapter'] =新的oj.Router.urlParamAdapter（）; 

我在Mac上使用Safari连接到设备并进行了调试。 奇怪的是，淘汰赛实际上并没有抛出任何错误消息，但是当我缩小尝试范围时，.catch帮助了我：

 尝试{ 
  ko.applyBindings（app，document.getElementById（'globalBody'））; 
  }抓住{e} { 
  console.info（e） 
  } 

这会向safari控制台输出真正的错误，并且我能够解决核心问题。

注意 ：之所以出现此错误，是因为我来自一个将路径适配器用于SEO的Web应用程序。 然后快速注意：如果您在移动设备上，请使用urlParamAdapter。

状态栏修复

注意：您可能已经注意到该应用程序占据了整个屏幕，这意味着将接管顶部的状态栏，其中强度栏，时间等都位于该状态栏中。

这不是很理想，因为它重叠并且看起来很丑。 但是，来自Graeme Mawson @ Oracle的提示解决了这个问题：

• 添加Cordova插件
• 将配置添加到部分中的$PROJ/hybrid/config.xml文件中

因此，首先要安装插件：

ojet add plugin cordova-plugin-statusbar

然后$PROJ/hybrid/config.xml:添加到$PROJ/hybrid/config.xml:

在这里，您可以看到我已将它们添加到预先存在的首选项下：

现在重新运行并部署应用程序，瞧，所有问题都已修复：

最后的想法

使用Apple设备获取应用程序极其复杂。 尝试使用免费的配置文件会使这种复杂化变得更加困难，这意味着您要跳过障碍才能正常工作。

希望您可以将此博客作为参考，以在尝试获得Apple许可之前免费在Apple设备上测试您的应用程序以将其检出。

我花了很多时间尝试避免使用Xcode，因为所有脚本编写的想法都很酷。 但是，现实是免费提供意味着这是不可能的。

但是，Oracle JET使得从Web应用程序移动到移动应用程序变得非常容易，并且希望通过遵循此方法，可以使其比我更快地工作。

祝好运！