IBM Worklight 6.1 - 如何集成 Ionic 框架？

Posted 2023-03-16

技术标签:

【中文标题】IBM Worklight 6.1 - 如何集成 Ionic 框架？【英文标题】：IBM Worklight 6.1 - How to integrate Ionic framework? 【发布时间】：2014-03-31 09:14:41 【问题描述】：

我正在尝试将ionic framework 添加到我的应用中。

为此，我从 ionic 网站下载了“入门模板”。该应用程序的 index.html 文件似乎在浏览器上正确运行并且没有任何问题。但是在为 android 环境构建之后，该应用程序只显示一个白屏，其中没有任何内容。

以下是 Worklight 项目：https://dl.dropboxusercontent.com/u/54761340/angulartest.zip

【问题讨论】：

使用以下内容编辑您的问题：Worklight 版本、运行应用程序时来自 LogCat 的日志、您为集成框架所采取的步骤、到框架网站的链接，以及您没有告诉我们的任何其他内容。跨度> 同时上传 Worklight 项目，而不是生成的 Android 项目。上传的 zip 文件是 worklight 项目而不是 generate android 项目。 ionic frameworks网站如下，...... 此 zip 中缺少某些内容，当导入 Eclipse 时，它不会导入任何内容，而是导入 android 项目。为了制作 zip 文件，我刚刚将 worklight 项目导出为 zip 文件。这是正确的做法吗？？ 【参考方案1】：

我不太明白它是如何在任何地方运行的，因为 HTML 很糟糕：

重复 HTML 和 BODY 元素 .css 和 .js 文件的引用位置不正确...

执行以下操作：

打开angulartest\apps\angulartestapp\common\index.html 并将其内容替换为以下内容：

<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
      <meta charset="UTF-8">
      <title>Ionic</title>
      <link rel="shortcut icon" href="images/favicon.png">
      <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/ionic.min.css">
      <script src="js/ionic.bundle.min.js"></script>
      <script>
          window.$ = window.jQuery = WLJQ;
      </script>
  </head>

  <body ng-controller="MyCtrl">
      <ion-header-bar title="myTitle"></ion-header-bar>
      <ion-content has-header="true" padding="true">
          <h2>Content</h2>
      </ion-content>

      <script src="js/index.js"></script>
      <script src="js/initOptions.js"></script>
      <script src="js/main.js"></script>
      <script src="js/messages.js"></script>
  </body>
</html>

右键单击 angulartestapp 文件夹并选择 Run As > Run on Worklight Development Server

我已经在 Worklight Console 的 MBS 以及 Android Emulator 中对其进行了测试。似乎正在工作，不管它是什么......

【讨论】：

【参考方案2】：