在手机上查看Flutter网页

y53ybaqx  于 2022-11-30  发布在  Flutter
关注(0)|答案(5)|浏览(209)

我正在构建一个flutter Web应用程序,但我希望它在移动设备和桌面上的行为有所不同。为了测试它,是否可以在手机浏览器或模拟器的浏览器中运行该Web应用程序?谢谢

4zcjmb1e

4zcjmb1e1#

是的,在生产中可以在Web浏览器中测试您的代码。为此,请在打开的项目的终端中运行以下代码

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

然后,进入手机浏览器并输入

HTTP://<your IP address>:8080

093gszye

093gszye2#

上面的答案是不正确的。我在模拟器中测试了我所有的flutter web开发在手机浏览器中。我使用的是VS代码。你的环境可能会有所不同。
1.运行Chrome(web)项目。这将启动本地服务器和Chrome浏览器。从浏览器复制URL。在我的示例中,我将其始终设置为http://localhost:8686/#/
1.启动模拟器。
1.在模拟器上启动Safari或任何其他浏览器。将URL粘贴到浏览器中。
您甚至可以从一个真正的电话访问项目,如果它与您的开发机器在同一个本地网络上。只需将localhost替换为您的开发机器的IP地址。

xqkwcwgp

xqkwcwgp3#

1.您需要在特定端口上启动Flutter Web应用程序
flutter run -d web-server --web-port 5011
1.连接设备并验证设备连接是否正确
adb devices

  1. adb端口转发
    adb reverse tcp:5011 tcp:5011
    之后,您就可以在移动浏览器上访问该端口。
yk9xbfzb

yk9xbfzb4#

我在MacBook上工作,上面的答案都没有帮助,但我找到了一个相当简单的解决方案来测试我的网页。
1.您需要做的第一件事是使用以下命令构建您的项目:Flutter生成腹板
1.然后,进入build/web文件夹并运行以下命令:python3 -m http.server 8000(为此,您将需要python3。)
也就是说,现在你可以在两个平台上看到你的网页。在移动平台上,你只能看到你的托管平台的IP地址。在Mac上,你可以使用以下命令:ipconfig获取地址en 0
因此,在您的手机上,您可以使用以下网页:您的IP地址:8000示例:192.10.42.14:八千。
在您的托管平台上,它将是:0.0.0.0:8000(但这只适用于您的托管平台
我知道,这只是一个变通办法,但对我的情况很有帮助

xoefb8l8

xoefb8l85#

不,您不能在本地移动浏览器中运行Flutter Web应用程序,如果您想使用移动格式测试您的应用程序,您可以通过从开发者工具Ctrl+Shift+M启用设备工具栏,从Google Chrome浏览器模拟它。

相关问题