使用ionic开发移动app的过程中经验总结

最近在使用ionic开发几个移动端的模块，使用过程中积累一些经验，在此总结下，以供参考。后续开发过程中如果有其他问题，会随时补充。
这些问题经过归纳总结分为以下几大类：

• html
• angularJs
• ionic
• android
  

  ---

html类问题

• 在ios系统上，有些链接会被当作电话号码来处理，默认显示成蓝色可点击样式，添加以下meta可以解决此问题：

---

angularjs类问题

• 传递参数
  ionic的路由模块使用了angularjs的第三方模块ui-router,路由跳转传递参数的形式 如果参数只是一个id,使用以下代码传参:

ui-sref="stateName({id:id})"

config配置如下:

.state("stateName",{ url:"/xxx/:id" })

如果传递的是复杂参数，比如传递一个JSON对象：

ui-sref="stateName({obj:obj})"

config配置如下：

.state("stateName",
{
url:"/xxx",
params:{
obj:null
}
})

• 缓存
  默认ui-router对同一个url是做了缓存的，也可以不做缓存：

  .state("stateName",{ url:"/xxx", cache:false })

• 根据RestURI的思想设计路由，对于不同的对象尽量使用URL来区分，不要通过参数来区分 比如查看user对象的详情，传统的URL设计可能是这样：

/detail?id=1

使用REST-URI来设计就是这样：

/detail/1

• 启动
  一般情况下我们使用以下指令来启动angularjs

但是有时候我们要控制下angularjs的启动时机，比如判断用户是否已经登陆，这时候就要通过编码来控制angualrjs的启动:

angular.bootstrap(document,['app'])

IONIC类的问题

• 支持键盘事件（弹出软键盘不遮挡界面），配置代码如下：

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() { if (window.cordova &&
window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true); } }); })

另外在nav-footer指令内包含有输入框的时候，需要添加以下属性：

keyboard-attach

• 使ion-content支持滚动效果：

$ionicConfigProvider.scrolling.jsScrolling(true);

• 在ion-view指令内可以重定义导航栏的左侧按钮和右侧按钮
• 动画效果的添加
  如果通过ui-sref跳转，需要在ion-view指令上添加

nav-direction="forward/back"

forward和back分别表示前进的动画和返回的动画，如果是在代码中使用$state.go跳转的话，需要在跳转代码后添加动画代码：

$ionicViewSwitcher.nextDirection("back");//forward

android问题

• 如果在android上要支持键盘事件，android的布局fullScreen要设置为false

第一次使用markdown写文档，有些生疏，不过markdown确实很强大，非常适合程序员来写文档，以后写博客都会用它了。

现在正在看Ionic框架js和android的源码实现，后续有时间了，会把分析过程和结果分享给大家。