搞了一波 cordova 后，算是对 Hybrid 有了一点点微小的认知。为了快速开发，ionic无疑是更好的选择，它底层的打包和通信机制基于 cordova 实现，在上层实现了自己的 UI 组件，可以结合 Angular 或React使用，并且宣称将在未来支持Vue。
环境准备
如果已经安装了 cordova，则单独安装ionic 即可，否则需要一并安装。
npm install -g ionic cordova创建项目
通过 start 命令来新建一个 ionic 项目。
ionic start my-app并且可以支持传入模板，以及项目类型，具体参考 ionic start。
我们在这里创建一个基于 angular 的tabs导航的app。
ionic start myapp tabs --type=ionic-angular当然也可以直接从一个更完善的模板开始。
ionic start myapp super --type=ionic-angular这几种方式可以都试试看。
运行项目
在浏览器运行 web 版
在尝试 npm start 调用 ionic-app-scripts serve 启动项目时，发现报错找不到 @ionic/app-scripts 模块，尝试重新安装该模块，node-gyp模块又报了这个错：
Error: Can't find Python executable"python", you can set the PYTHON env variable.查询 node-gyp 后，官方提供了两种解决方案
我采用了第一种方案：
npm install --global --production windows-build-toolsps: 必须以系统管理员方式运行命令行。
接着重新安装一遍@ionic/app-scripts，然后重新运行项目，冇问题啦。
npm uninstall @ionic/app-scripts
npm install --save-dev @ionic/app-scripts
npm start
支持 android 和 ios
ionic cordova platform add ios
ionic cordova platform add androidandroid 调试
首先检查下设备连接是否正常
D:\robin\frontend\hybrid\ionic\ionic-blog> adb devices
List of devices attached
5fdba1e7 device使用 ionic cli 提供的命令运行app
// - l 是 --livereload 的简写
ionic cordova run android -l此时注意在手机上同意“继续安装”，否则是不会成功的。安装成功则可以看到成功的提示。
> cordova.cmd build android --device
[app-scripts] [16:05:33] lint finished in 3.95 s
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device --forward 8100:8100 --forward 35729:35729 --forward 53703:53703
[native-run] Selected hardware device 5fdba1e7
[native-run] Forwarded device port 35729 to host port 35729
[native-run] Forwarded device port 8100 to host port 8100
[native-run] Forwarded device port 53703 to host port 53703
[native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk...
[native-run] Starting application activity io.ionic.starter/io.ionic.starter.MainActivity...
[native-run] Run Successful
此时还可以在 Chrome 浏览器上输入 chrome://inspect 进行调试。
手机上的操作会同步到 Chrome 浏览器上。
并且还支持断点调试。
ios 调试
ios就先不试了，没设备。。。
首发链接
扫一扫下方小程序码或搜索Tusi 博客，即刻阅读最新文章！