昨晚一个朋友的路由出问题了，过去帮他重新配置了下，刚好他最近换了家新公司，接触到了HBuilder，期间一直说很好用，虽然我不是做前端的，但看了demo之后也想着玩一把。
因为当前使用的是macbook，所以以下配置是在mac系统下进行。
###工欲善其事，必先利其器
- HBuilder编辑器，官网下载
- iOS模拟器，需要下载xcode，因为之前有了XcodeGhost风波，所以这里推荐上App Store下载
- Android模拟器（genymotion ），需要注册一个帐号（后面添加模拟器的时候需要用到），然后下载
以上的工具也可以从百度云下载
我这里是为了使用HBuilder打包然后安装到iOS系统和android系统上，所以需要两个模拟器，当然，如果你有一部iOS系统和一部android系统的手机，你完全可以只下载一个Hbuilder编辑器就开始Coding
genymotion配置 问题
出现以上问题是因为我们电脑缺少VirtualBox，所以我们需要下载VirtualBox
Just do it
好了，现在一个机会摆在我们面前，去拥有我们想要的android系统！
打开我们的genymotion，点击Add:
这时候，我们需要用到在genymotion官网注册的帐号登陆，然后，然后，然后我就可以拥有一系列专属android机：
ok，如果上面一切没问题的话，运行模拟器：
iOS模拟器比较简单，下载完xcode新建一个工程，选择需要的模拟器运行即可，可以参考这篇文章来启动模拟器
我使用的是iOS 9.3版本的6s
小试牛刀
打开HBuilder，新建一个移动app，选择mui登录模块:
如图，打开login.html，右上角选择边改边看模式:
ok，可以看到，我们的登录界面已经出现在右边了，接下来，我们要在iOS模拟器和android模拟器上安装我们的app
iOS模拟器
首先根据上面的教程，启动我们的iOS模拟器，然后：
可以看到我们当前已经启动的iPhone6s模拟器，也可以选择 iOS模拟器运行下面有其它版本的模拟器，安装成功后如下：
至此，我们并没有写到一句代码！接近原生的体验，但是，这里好像有点小问题，侧滑返回的时候，状态栏好像被分隔开了，让我觉得有点像android系统：
android模拟器
还是一样，先运行genymotion，不然我们在HBuilder找不到它，启动之后稍等一会：
HBuilder修改之后按下保存就可以刷新界面，无需重新运行，天哪，这是做原生app所不能做到的，虽然xcode也有动态调试，但是有时还是得重新运行一次才能看到效果，下面我们体验一下HBuilder的这个功能:
可以看到，第一次把登录改成我要登录，按下保存之后，界面已经自动刷新了，再次把我要登录改成拜拜，再次保存，在iOS模拟器上和android模拟器上也同步刷新了，这里因为gif录制软件有点问题，无法录制到两个模拟器的实时变化，抱歉，如果你有好用的gif录制软件，麻烦推荐一下，谢谢啦