Question

我创建了一个Ionic App，现在我想在我的投资组合网站上展示它。我知道可以在浏览器的iPhone框架中运行应用程序，如https://ionic-stage.herokuapp.com/stage/?app=catalogue。

从我收集的链接中，我必须将我的应用程序部署到Heroku。但我的主要问题是如何在iPhone框架中获取它。

Answer 1

实际上这很容易实现。您所要做的就是将www文件夹的内容复制到heroku。然后你必须在同一个文件夹中创建一个文件（例如）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 个答案: