Ionic应用开发小结

由于项目需要，接触了一个多月的Ionic应用开发，碰到了一些问题，也有了一些收获。

真机调试

有时我们需要调试一些调用了Cordova插件的代码，这时浏览器已经无法满足我们的需求了。
那我们能不能让应用在真机上运行的时候，还可以打断点，查看代码的执行过程呢？
当然能，这就是所谓的远程调试，Android和iOS平台都提供了这种支持。

Android

首先执行ionic run android --device，将应用安装到Android设备上；
然后打开Chrome浏览器，在地址栏输入chrome://inspect/#devices；
最后点击新页面中对应设备的inspect链接，即可跳转到调试窗口。

iOS

首先在iOS设备的系统设置中找到Safari –> Advanced, 并打开页面中的Web Inspector开关。
然后在Mac电脑的Safari设置中找到Advanced，并打开页面中的Show Develop menu in menu bar开关。
安装应用到iOS设备后，在Safari的Develop菜单中找到对应的iOS设备，并点击子菜单项中的index.html即可跳转到调试窗口。

# 第一次执行ionic run ios --device前，必须先安装ios-deploy
npm install -g ios-sim ios-deploy
ionic run ios --device

打包发布

Android

# 构建发布版本
ionic build android --release
cp platforms/android/build/outputs/apk/android-armv7-release-unsigned.apk ~/Desktop && cd ~/Desktop
# 使用签名证书签名应用
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore yourkeystore.keystore android-armv7-release-unsigned.apk keystorealias
# 优化生成的apk文件
zipalign -v 4 android-armv7-release-unsigned.apk yourapp.apk

iOS

ionic build ios
open platforms/ios/yourapp.xcodeproj

由于iOS的打包签名过程比较繁琐，就不在本文中展开了，可参考IOS打包发布到FIR。

命令行小技巧

# 通过命令行安装apk文件到Android设备
adb install -r platforms/android/build/outputs/apk/android-armv7-debug.apk

# 通过命令行安装ipa文件到iOS设备
brew install ideviceinstalle
ideviceinstaller -i yourapp.ipa

# 通过命令行截取iOS设备的屏幕
brew install libimobiledevice
idevicescreenshot

碰到的一些问题

1. 低版本NPM无法在最新版本的Node中使用

由于Node社区的发展很快，有时会出现低版本的库无法在最新版本Node中编译的问题。
所以无论是安装Node和NPM库，还是添加Cordova平台和插件，都应该尽量指定版本号。

# 使用NVM安装指定版本的Node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash
source ~/.nvm/nvm.sh
nvm install 6.2.0
nvm use 6.2.0
nvm alias default node

npm view gulp-sass versions             # 查看NPM的库的所有版本号
npm install --save-dev gulp-sass@2      # 安装指定版本的NPM库

ionic platform list                     # 查看Cordova平台的所有可用版本
ionic platform add android@5.1.1        # 安装指定版本的Cordova平台

# 安装指定版本的Cordova插件
ionic plugin cordova-plugin-crosswalk-webview@1.7.0

2. 菜单按钮的事件处理函数没有被调用

由于Android平台已经不再提倡使用菜单按钮，Cordova因此也对菜单按钮的事件处理不再提供显式支持。
如有必要，可通过如下方式使用：

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    var onHardwareMenuKeyDown = function(event) {
      event.preventDefault();
      event.stopPropagation();
      // ...
    };

    // 必须加上下一行代码，否则事件处理函数不会被调用
    navigator.app.overrideButton("menubutton", true);
    document.addEventListener("menubutton", onHardwareMenuKeyDown, false);
  }
}

3. Android应用启动后闪退，提示java.lang.IncompatibleClassChangeError

仔细查看异常信息，可以发现有java.lang.IncompatibleClassChangeError和android.support.v4等字眼。
这种情况通常是由于target版本跟v4支持库的版本不相符导致的，查看platforms/android/project.properties文件发现，
当前的target版本是23，但v4支持库的版本还是19。将文件中的内容改为如下形式后，重新编译就没问题了。

target=android-23
cordova.system.library.3=com.android.support:support-v4:23+

小结

总的来说，如果应用的业务需求比较简单，主要是一些展示性质的界面，对性能的要求也不是特别苛刻。
这种情况下，通过Ionic开发应用是绰绰有余的。即使需要用到一些原生特性（如Toast，Camera，ImagePicker等），
也可以通过Cordova插件解决。而Ionic提供的跨平台运行能力，可以大大我们的提高开发效率。
对于开发者来说，还是具有很强的吸引力。