腊月的季节

混合式APP破万卷总结(一)

发表于 | 分类于 | | 阅读次数

ionic路由问题

路由分母版路由和非母版路由

1
2
3
4
5
.state('tab',{
 url:'tab',
 abstract:true,
 templateUrl:'templates/tabs.html'
})

我们看tab的这个路由，url就是路由地址，abstract：true就是指设置这个界面为母版界面，可以这么理解，这是一个架子，所有的子界面都有这个统一的界面。
看另一个路由界面

1
2
3
4
5
6
7
8
9
.state('tab.dash',{
  url:'/dash',
  views:{
    'tab-dash':{
        templateUrl:'templates/tab-dash.html',
        controller:'DashCtrl'
}
}  
})

首先是这个路由的名字tab.dash这里的点和js中的点一样理解为对象的属性，这里表示一种从属关系。指dash这个视图是tab的一个子视图。
这个路由配置和tab的路由配置有个明显不同的地方就是多了一个views，可以简单理解为用来定义视图详情。格式是views:{name:{parms}}
这里最应该关注的就是‘tab-dash’这个视图名字。首先要指导这个视图名字是从哪来的，又是什么意思？

我们打开tabs.html文件

1
2
3
4
5
<ion-tabs>
<ion-tab title="Status">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
</ion-tabs>

可以看到在tabs地下定义的tab里面有一个ion-nav-view 它的名字定义为‘tab-dash’这个意思就是。tab.dash这个路由定义了，这个路由的视图是在‘tab-dash’这个tab的视图里面绘制的。
这个ion-nav-view我们在index.html中也有见过。那这里要怎么理解呢？
我们对代码做一点小改动。改动tab的配置。加入views属性。

1
2
3
4
5
6
7
8
9
.state('tab',{
    url:'/tab',
    views:{
        'main':{
        abstract:true,
        templateUrl:'templates/tabs.html'   
}
}
})

然后给index.html中的加入属性name=’main’。

1
<ion-nav-view name="main"></ion-nav-view>

然后运行项目，项目运行成功。给每一个视图定义了名字之后，理解起来就容易很多了。下面我画一个简单的图来说明这几个关系。

ion-list,ion-item

这个两个控件非常不好用，建议用ionic class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="list text">

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-ios-people-outline"></i>
    我的书友
    <i class="icon ion-ios-arrow-forward"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-ios-monitor-outline"></i>
    我的关注
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-ios-chatbubble-outline"></i>
   我的消息
    <span class="badge badge-assertive">10</span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-ios-cloud-outline"></i>
    动态
    <span class="badge badge-assertive">10</span>
  </a>

</div>

键盘有无监听并隐藏和显示tab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
angular.module('starter', ['ionic','starter.controllers','starter.routers','starter.directives'])

.run(function($ionicPlatform,$rootScope) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
  window.addEventListener('native.keyboardshow', function keyboardShowHandler(e){
      $rootScope.hideta = 'tabs-item-hide';
});
  window.addEventListener('native.keyboardhide', function keyboardHideHandler(e){
      $rootScope.hideta = '';
});
})
.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    ionic.Platform.isFullScreen = false;
    $ionicConfigProvider.platform.ios.tabs.style('standard'); 
    $ionicConfigProvider.platform.ios.tabs.position('bottom');
    $ionicConfigProvider.platform.android.tabs.style('standard');
    $ionicConfigProvider.platform.android.tabs.position('standard');
}])

侧栏和主界面的bar-header和bar-subheader

可以让侧栏和主界面融合在一起

好看的字体,圆形图片

1
2
3
4
5
6
7
8
9
10
11
.text {
	font-family: "Arial","Microsoft YaHei","黑体","宋体","sans-serif";
}
.set-img-login{
	width: 100px;
    height: 100px;
    border: 4px solid #ccc;
    border-radius: 50%;
    background: url('../img/ionic.png');
    margin:0 auto;
}

关于即用bar-header又用bar-subheader覆盖content内容解决办法

1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-header-bar align-title="left" class="bar-positive">  
      <div class="buttons">  
        <button class="button" ng-click="doSomething()">Left Button</button>  
      </div>  
      <h1 class="title">Header</h1>  
      <div class="buttons">  
        <button class="button">Right Button</button>  
      </div>  
    </ion-header-bar>  
  
    <ion-header-bar align-title="left" class="bar-subheader bar-positive">  
      <h1 class="title">Sub Header!</h1>  
    </ion-header-bar>

关于Error Initializing app: There was an error with the spawned command: npminstall

使用ionic start project blank –skip-npm开始项目

关于angularjs表单验证

涉及表单指令的有
最小长度：ng-minlength=”4”
最大长度：ng-maxlength=”16”
模式匹配：ng-pattern”/^[0-9]{11}\$/“
必填项：required
数字:number
邮箱:email
url：url
涉及内容修改与验证是否通过
\$pristine 没修改
\$dirty 修改过
\$invalid 验证失败
\$valid 验证成功
\$error 错误详情
举例：

1
2
3
4
5
myForm.pattern.\$pristine 未修改
myForm.pattern.\$dirty 修改
myForm.pattern.\$invalid 验证失败
myForm.pattern.\$valid 验证成功
myForm.pattern.\$error 错误详情

实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form name="login" novalidate>
  <div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="手机号" name="phone" ng-pattern="/^[0-9]{11}$/" ng-model="uphone" required>
    <i class="icon ion-android-close assertive ion" ng-show="login.phone.$dirty &&login.phone.$invalid"></i>
    <i class="icon ion-android-done balanced ion" ng-show="login.phone.$dirty&&login.phone.$valid" ></i>
  </label>
  <label class="item item-input">
    <input type="password" placeholder="密码" name="password" ng-model="upassword" ng-minlength="8" ng-maxlength="16" required>
    <i class="icon ion-android-close assertive ion" ng-show="login.password.$dirty &&login.password.$invalid"></i>
    <i class="icon ion-android-done balanced ion" ng-show="login.password.$dirty&&login.password.$valid" ></i>
  </label>
  <button class="button button-block button-calm" ng-disabled="login.password.$dirty &&login.password.$invalid || login.phone.$dirty &&login.phone.$invalid || login.password.$pristine || login.phone.$pristine" ng-click="login()">
  登录
</button>
<div class="row">
  <a class="button button-clear button-positive col" href="#/register">
  注册账号
</a>
  <a class="button button-clear button-positive col" href="#/forget">
  忘记密码
</a>
</div>
</div>
</form>

ng-show辅助显示，ng-disabled辅助禁止。

关于ionicView执行顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$scope.$on('$ionicView.loaded', function() {
  console.log("$ionicView.loaded");
});
$scope.$on('$ionicView.beforeEnter', function() {
  console.log("$ionicView.beforeEnter");
});
$scope.$on("$ionicView.enter", function() {
  console.log("$ionicView.enter");
});
$scope.$on('$ionicView.afterEnter', function() {
  console.log("$ionicView.afterEnter");
});
 
$scope.$on('$ionicView.beforeLeave', function() {
  console.log("$ionicView.beforeLeave");
});
$scope.$on('$ionicView.leave', function() {
  console.log("$ionicView.leave");
});
$scope.$on('$ionicView.afterLeave', function() {
  console.log("$ionicView.afterLeave");
});
$scope.$on('$ionicView.unloaded', function() {
  console.log("$ionicView.unloaded");
});

\$ionicView.loaded
视图已经被加载了。这事件只发生一次当视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个时间将不会被激活。Loaded事件是个好方式让你为这个视图设置你的代码； 然而，他并不是我们推荐的时间去监听视图被激活。
\$ionicView.enter
进入视图并被激活。这事件被激活来判断这个视图是第一个加载还是被缓存了的。
\$ionicView.leave
离开这个视图并且不是活动页面。调用这个事件判断应该被缓存还是摧毁。
\$ionicView.beforeEnter
视图即将被打开变成活动页面。
\$ionicView.beforeLeave
视图将被关闭并且不是活动页面。
\$ionicView.afterEnter
进入视图并是当前的活动页面
\$ionicView.afterLeave
已经离开视图，并成为非激活页面
\$ionicView.unloaded
视图的Controller已经被摧毁并且他的页面元素也从Dom中移除

热评文章