如何通過Heroku在瀏覽器中實時部署Ionic App

Question

我創建了一個Ionic App，現在我想在我的投資組合網站上展示它。 我知道可以在瀏覽器的iPhone框架中運行應用程序，例如https://ionic-stage.herokuapp.com/stage/?app=catalogue 。

從我收集的鏈接中，我必須將應用程序部署到Heroku。 但是我的主要問題是如何在iPhone框架中使用它。

Answer 1

實際上，這很容易做到。 您所要做的就是將www文件夾的內容復制到heroku。 然后，您必須在同一文件夾中創建一個文件（例如） mobile.html ， mobile.html其復制到Ionic www文件夾的內容，其中包含以下內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body style="text-align:center;">
    <img src="img/iphone6.png" style="  position: absolute; top: 50px; left: 20px;" />
    <iframe src="index.html" style="  position: absolute; top: 150px; left: 48px; width: 341px; height: 606px; border: none;"></iframe>
</body>
</html>

當然，您可以根據需要設置其樣式，我僅在以下位置復制了我的示例： http : //nikola-dev.com/IonicCalculator/mobile.html 。

因此，這里有兩件重要的事情：

img標簽，您將在其中放置手機圖像
加載應用程序的iframe標記（如果您尚未更改Ionic應用程序中的任何內容，即index.html ）。

希望這可以幫助。

如何通過Heroku在瀏覽器中實時部署Ionic App

問題描述

1 個解決方案

解決方案1
2 已采納 2016-01-13 06:33:23

如何通過Heroku在瀏覽器中實時部署Ionic App

問題描述

1 個解決方案

解決方案1 2 已采納 2016-01-13 06:33:23

解決方案1
2 已采納 2016-01-13 06:33:23