使用dart编辑器在手机上运行web app

在上篇文章中我们讲到了运行dart项目的web app有三种方式，Run in Dartium, Run as JavaScript, Run on Mobile。Run in Dartium，今天我就来讲讲如何Run on Mobile，在移动端运行。

移动端运行的原理是通过adb让手机和电脑链接，在安卓设备上配置chrome使安卓设备打开一个服务，实际上这个时候安卓相当于一个服务器了，而实现服务的是chrome浏览器。chrome本来是客户端程序，这时候摇身一变成服务器了。。。

首先你的安卓设备必须有chrome浏览器。

打开电脑上的chrome浏览器

在chrome的地址栏输入chrome://inspect/#devices

QQ图片20150508091818.png

注意Discover USB device需要被选中。

打开安卓上的chrome ，用usb线链接手机和电脑，链接之后应该是这样的：

QQ图片20150508103433.png

nexu7下面就会有一行字，显示的是已经链接上的安卓设备的chrome。

上面的操作完了之后手机中很可能弹出一个确认的对话框：

rsa-fingerprint (1).png

需要点击确认。

但是还没完，必须要为安卓上的chrome添加服务端端口。

点击Port forwarding，弹出一个Port forwarding settings对话框

如果你在对话框中没有看到8080，那么自己在port输入框中输入8080，在IP address and port输入框中输入localhost:8080。然后按回车。Enable port forwarding必须为选中状态。

the Port forward settings dialog

现在对话框应该是这样的。

点击done。

之后就可以在设备的名称旁边看到被打开的端口列表了。

QQ图片20150508104030.png

如果绿点和端口号没有，那么安卓设备中的chrome无法和电脑的chrome通信。

运行

现在可以在项目中运行app了，右键Dart编辑器中的html文件，然后会弹出下面的菜单：

The three run options from the context menu

点击Run on Mobile.

Dart编辑器会显示状态信息，

QQ图片20150508104716.png

过一段时间之后就可以在手机上看到一个弹出的网页，里面就是app的运行效果了。

但是

弹出了一个特殊的浏览器，可是只能在网页中看到一片空白。。。。

在dart编辑器中弹出了如下对话框：

QQ图片20150508104915.png

仔细检查发现我的手机上地址是http://localhost:8081/piratebadge.html

而我们设置的端口是8080啊

于是我再在Port forwarding settings对话框中添加一个8081的端口，看看行不行。

QQ图片20150508105252.png

这次可以了。

不知道为什么会出现上面的原因。