ionic-开发跨平台app的基本问题及解决方案

逗笑

生活本来就不易！每个人都会无意或者有意地将自己和身边的人对比，不觉忽的羡慕着周围的人，想着他们过得是多么快乐，物质上多么的丰富，就已经让自己时时刻刻都沉入憋屈或者不开心的心境中。

很多时候，我们没有办法像别人说的那样，什么都不去向，何必在乎别人，何必作比较呢？你做好你自己就可以了。说是这样子说，可是毕竟生活在同一个的圈子里的人，现实就是现实，环境，工作压力，甚至是人生各种的不期而至的事，让每一个人都会在生活中产生痛苦，甚至迷失生活的方向。人有时就会感叹不公平，自然感觉别人活得多么好，生活多么舒服。

其实每个人都有每一个人的痛苦，我们有时看到只是每个人的表面，即是生活再怎么不如意，我们生活中也要佯装不将就。

生活本来就不易，生活本来就不将就！

最近由于项目想要，用ionic开发一款跨平台的app，下面是总结的一些问题。

1、tab位置问题，android中显示在顶部，ios显示在底部，如何解决？

在config中设置
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
  // 解決在androi环境中tabs 在顶部的问题
  $ionicConfigProvider.platform.ios.tabs.style('standard'); 
  $ionicConfigProvider.platform.ios.tabs.position('bottom');
  $ionicConfigProvider.platform.android.tabs.style('standard');
  $ionicConfigProvider.platform.android.tabs.position('standard');

  //设置导标题居中
  $ionicConfigProvider.platform.ios.navBar.alignTitle('center');

  $ionicConfigProvider.platform.android.navBar.alignTitle('center');

  $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
  $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        

  $ionicConfigProvider.platform.ios.views.transition('ios'); 
  $ionicConfigProvider.platform.android.views.transition('android');

2、如何在在tab中使用侧边栏?


//tabs在里面




 
   
     




这样子的话，相当于设定了一个公共的侧边栏，在任何的其他页面都可以调用该侧边栏

那么如何体用触发该侧边栏呢？
.controller('ContentController',function($scope, $ionicSideMenuDelegate) {
  //   
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };

});

利用$ionicSideMenuDelegate这个句柄对象可以操作，$scope.toggleLeft是一个ng-click的函数，$ionicSideMenuDelegate.toggleLeft()是触发左侧边栏还有其他的函数，可以查看文档。

3、ion-item的一些主题？
在scss文件夹下的_items.scss中可以看到：
// Different themes for items
  &.item-light {
    @include item-style($item-light-bg, $item-light-border, $item-light-text);
  }
  &.item-stable {
    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
  }
  &.item-positive {
    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
  }
  &.item-calm {
    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
  }
  &.item-assertive {
    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
  }
  &.item-balanced {
    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
  }
  &.item-energized {
    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
  }
  &.item-royal {
    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
  }
  &.item-dark {
    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
  }

上面有不同颜色的主题，那么我们在用的时候,只需要选择加入到item的class中即可

如果没有设置主题的话，item在拖曳滚动的时候，会很容易触碰到点击选中的效果，感觉体验不爽。


4、如何在不同的页面重新定义导航头部？
一般我们会在主页面定义一个公共的头部，

    //公共头部
   
    //class="button-clear"将返回按钮的button清除，重新定义图标
     
      返回
     
   

    //内容区
   


那么如果通过tab来创建一个页面，
那么这个页面一般是这样子的：
view-title设置的就是导航条的标题

   //可以通过ion-nav-buttons在头部导航条上设置按钮
   
         
   
    //页面内容
        
   


现在有一个需求是要全部更改整个导航条，那么该如何实现的？
其实很简单，在ion-view 设置hide-nav-bar='true'，将原导航条隐藏删除
ion-header-bar再重新写html替换原来导航条即可


 

   
 

 

Title!

 

   
 

 
 
 


5、关于在ionic的应用内不能够复制内容的问题
http://www.jianshu.com/p/7b1e3854f283?mType=Group

6、一些常识与技巧
list 有延迟，可以在ion-content处使用 overflow-scroll="true"尝试
在上用ng-click上是没效果的
标签内的事件会在整个label内被触发，点哪都触发
快捷修改背景色style="background-color: #212326;"
能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高
直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div
可以用ng-class="{'important': post.important}"配合css 根据列表元素显示不同的效果
获取日期用$filter，var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
列表中的元素不能写成 id : 4，应写成 id : "4",注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+"";
使用$log进行log输出,为什么用$log而不是console.log呢？可以看看这个
在安卓上的体验比较差，动画有延迟？可以试试ionic集成的crosswalk
controllers和services 的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService
http://www.jianshu.com/p/b567cc657a49


7、相对时间的解决插件方案
https://scotch.io/tutorials/display-time-relatively-in-angular

https://github.com/urish/angular-moment

(1)引入js文件
   
   
    //中文语言版本文件

   

   
   
8、如何隐藏底部导航的tabs
(1)在标签ion-tabs中添加：ng-class="{'tabs-item-hide': $root.hideTabs}"，源码如下：


//tabs


tabs-item-hide这个类本身就是存在的，那么我们在一些场景中希望进入子级页面的时候，可以将子级页面的的底部的导航栏隐藏或者移除。
(2)自定义的指令hideTabs
.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$on('$ionicView.beforeEnter', function() {
                var watch =  scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                    //完成后销毁watch监听
                    watch();
                });
            });
            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };


hideTabs是我们需要在子级页面用到的隐藏指令。

(3)你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下：

 
   
   

      {{chat.lastText}}
   

 


下面说一下视图生命周期及事件集
$ionicView.loaded
视图已经被加载了。这事件只发生一次当视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个时间将不会被激活。Loaded事件是个好方式让你为这个视图设置你的代码； 然而，他并不是我们推荐的事件去监听视图被激活。

也就是说从A页面->B页面，B是需要隐藏底部导航的目标页面，也即是相当于$ionicView这个视图对象，经过路由跳转时，完成loaded的DOM元素记载，当然包括解释hideTabs这个自定义指令

$ionicView.beforeEnter B目标视图即将被打开变成活动页面。

$ionicView.enter 进入B目标视图并被激活。这事件被激活来判断这个视图是第一个加载还是被缓存了的。

$ionicView.afterEnter 进入视图并是当前的活动页面

$ionicView.beforeLeave 完成任务后点击跳转准备切换至其他页面，B目标视图将被关闭并且不是活动页面。

$ionicView.leave 离开这个视图并且不是活动页面。调用这个事件判断应该被缓存还是摧毁。

$ionicView.afterLeave 已经离开视图，B又并成为非激活页面

$ionicView.unloaded 视图的Controller已经被摧毁并且他的页面元素也从Dom中移除即是将缓存的B页面的DOM全部删除。


9、关于如何切换tab标签，显示不同页面
https://github.com/JKnorr91/ion-slide-box-tabs

10、ionic中的ion-content与ion-scroll的一些区别用法
ion-content形成上下结构，上面固定，下层可滑动
首先要设置ion-content不可滑动：

其次在ion-content中，使用ion-scroll，并加上css:

这样就可以实现滑动时ion-content里边的内容形成上下结构，不在ion-scroll标签里边的内容固定不动，ion-scroll里边的内容可以滚动，且不会遮挡上方元素。

ion-scroll水平滑动时在Android中无效
解决办法：在ion－scroll标签里加上overflow-scroll="false"；

11、ionic的css组件详解
http://www.haomou.net/2014/08/09/2014_ionic_api_css/

http://www.haomou.net/2014/10/09/2014_ionic_api_css1/