ionic emulate实时调试修改

           我之前开发好了安卓版本,然后直接把代码迁移到mac上面直接开发ios版本,但是当我用模拟器调试的时候发现很多的样式出现了不兼容的地方,所以只能对其进行修改.我采用的方案是是利用 ionic emulate ios --target="iPhone-6,10.3" -c -l 来实现修改代码的同时模拟器也会自动刷新.以下是我操作的详细步骤说明:

          1.打开mac终端,然后切换到项目的目录,输入命令 ionic emulate ios --target="iPhone-6,10.3" -c -l ,此时会启动模拟器,然后选中终端,按快捷键command+n新打开一个终端窗口,启动你配置的gulp进程,这个gulp进程你只需保证当你修改开发环境下的代码时你生产环境下的www文件夹下的代码发生实时更新即可,至于gulp如何配置使用,网上有许多教程可供学习.

          2.当你以为大功告成之时,你会看到模拟器上显示的结果却和最最初的预想不一样.

                                      

那此时如何查看模拟器报了什么错误呢,打开safari->Simulator点击模拟器打开的页面

                                    

     

此时就可以根据这个界面来调整页面的样式和观察相应的js错误,点击控制台,会发现报的是跨域的错误.后来我用google搜了下,原来当ionic emulate ios后面加了-l的参数时它就会在本地启动一个服务器,所以才会出现跨域的问题. 那么解决这个问题的方式就是直接给ionic项目配置代理.如何配置代理呢?

         首先切换到项目根目录会发现有一个ionic.config.josn的文件,打开以后在里面填写代理

这个path就填写你的ajax访问的api接口地址,而这个proxyUrl填写的就是你最终要访问的远程服务器的api地址.做完之后还需要完成一个工作,就是修改项目js文件里使用ajax访问的地址.

          

我项目中所有ajax访问的接口主机地址都是用一个全局变量service_ip来代替,所以改起来很方便.在进行模拟器实时更新修改时这个service_ip要改成本机的ip地址,如果是进行真机调试或者打包上线还是要把这个地址改成远程服务器的地址.

3.此时ctrl+c先退出先前的模拟器,然后再输入ionic emulate ios --target="iPhone-6,10.3" -c -l 重新启动模拟器,就可以看到在sublime上面修改代码,模拟器上实时刷新的效果