填一填用了半个月 ionic 遇到的坑

这篇没什么东西可扯，基本是 Q&A 形式。不定时更新，不用 Ionic 了就不更新。。。

Q: 在 iOS 下使用 cordova-plugin-file-transfer 下载中文名文件失败，提示 Could not create target file

A: encodeURI("包含霸气的中文文件名的 URI")

Q: 应用需要存储较大量数据，原始格式是 json ，存 sqlite 数据库嫌麻烦。

A: lokiJS ，类 mongodb 的 js 内存数据库，配合为 ionic 打造的插件做持久化存储。

Q: 不同 Android 手机上出现字体错位之类的奇怪问题。

A: 使用 Crosswalk 消除不同安卓机上 WebView 的差别，顺便还能提升应用性能。

Q: 在实机上使用 livereload 功能时出现空白、连接失败等情况。

A: 实机上的 livereload 本质是用手机访问电脑上的网站，检查手机和电脑之间的网络连接是否通畅。

Q: gitignore 默认排除了 plugins 文件夹，团队其他人 clone 了项目后缺少插件，一个一个装太麻烦。

A: ionic platform add/remove xxx 以及 ionic plugin add/remove xxx 的时候，Ionic CLI 都在 package.json 中保存了项目的状态。clone 完后可以使用 ionic state restore 命令快速恢复

Q: 在 Ionic(AngularJS) 中使用 Cordova 插件有那么点点不方便。

A: Ionic 的 ngCordova 项目为70多个流行的 Cordova 插件提供了 AngularJS 包装，足以应付绝大多数需求。

Q: 在哪里查看 Ionic 带的所有图标？

A: http://ionicons.com

Q: 在 ionic platform add xxx 时卡住

A: 挂 V** ，或者丢着睡一觉（不确定是不是网络原因，就遇过两次没深究）

Q: tel:xxxxx sms:xxxxxx mailto:xxxxxx geo:xxxxxx 一类的链接不能唤起其他应用。

A: 在 config.xml 中加入：

<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>

Q: 跟上 Q 一样，加了还 TM 不行！

A: 再在 config.xml 中加入：

<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>

Q: Android 中调用其他应用打开 applicationDirectory 下的文件时提示路径不存在， iOS 可以。

A: 两个系统策略不一样， Android 中有这个需求简单的办法是参考该页中的 Android 文件系统布局，把文件从 Private 目录复制到 Public 目录下再做操作。

Q: 对 Android 进行远程调试。

A: 打开 Chrome ，地址栏输入 chrome://inspect

Q: 对 iOS 进行远程调试

A: 打开 Safari -> 开发 -> 手机名 -> 应用名

Q: Ionic 的 Modal 是什么鬼？不能给它设定状态么？！

A: 超级弱逼的模态框，因为 uirouter 的限制，给它转状态非常不方便。确定只需要一个页面就能完成的操作才用他。下一 Q 提供个解决办法。

Q: 替代 Modal 的方案

A: 在 $state.go 前记录下当前的 view ，然后禁止下一个 view 记录 backView ，就不会显示后退按钮（ Android 硬件后退也不行 ）。在需要关闭时，后来加入导航栈的任意 view 中设置 backView 为记录下来的 view ，然后 back 。

// go 的时候
var backHistoryId = $ionicHistory.currentHistoryId();
var backViewId = $ionicHistory.currentView().viewId;
$ionicHistory.nextViewOptions({
  disableBack: true,
  disableAnimate: true
});
$state.go('my-awesome-modal', {backViewId: backViewId});


// back 的时候
var backHistoryId = $ionicHistory.currentHistoryId();
var backView = $ionicHistory.viewHistory().histories[backHistoryId].stack.filter(function (v) {
  return v.stateId === $stateParams.backViewId;
})[0];
$ionicHistory.backView(backView);
$ionicHistory.goBack();

Q: ionic serve 或在实机调试时开启了 livereload 功能时的跨域问题

A:

道理还是因为这两种状态下， APP 实际是在访问电脑上的一个网站，任何指向其他地方的链接都是跨域。实机不开 livereload 则不存在这个问题。

简单的方法就是用实机调试且不开 livereload 。

复杂点的比如设置 Ionic 自带的代理服务器，参考链接。需要详细了解这个问题也可以看一遍。