ionic1 v1 开发小经验 小方法

基于ionic1.7.16 & cordova 6.3.1

对应的ionic cli版本官方参考文档可以自己查找到
在npm安装的目录下ionic/README.md
C:\Users\Administrator\AppData\Roaming\npm\node_modules\ionic\README.md

---

发布签名版本

• 1.生成未签名版的apk -> android-release-unsigned.apk

ionic build --release android

• 2.生成签名文件 myapp.keystore

cd platforms\android\build\outputs\apk

keytool -genkey -v -keystore myapp.keystore -alias myapp.keystore -keyalg RSA -validity 20000

填写信息即可

• 3.使用签名文件给未签名的apk签名
  myapp.keystore&生成未签名版的apk -> 生成签名的api

jarsigner -verbose -keystore myapp.keystore -signedjar android-release.apk android-release-unsigned.apk myapp.keystore

获取MD5签名

查看签名的MD5 （解压android-release.apk 取出META-INF 下的.RSA文件）

keytool -printcert -file MYAPP.RSA

证书指纹:
MD5: 6B:2B:83:81:18:E3:......
md5 小写 6b2b838118e3.....（秘钥需要转成小写去":",做微信cordova插件功能时需要配置）

---

自定义ionic默认css样式

安装编译scss所需依赖
npm install

ionic会添加gulp-sass等gulp插件
ionic setup sass

启动的时候会增加gulp任务,sass和watch
ionic serve

修改lib\ionic\scss_variables.scss
$calm: #11c1f3 !default;
再修改myapp/scss/ionic.app.scss
$calm: #11c1f3 !default;
----- save ok------
sass代码构建过程 参考作者：大猫Calvin

顺便扩展gulp任务 自定义style.scss

gulp.task('sass', function(done) {
// 再添加一个style.scss的配置
})；

  gulp.src('./scss/style.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);

---

自定义tabs 图标

以css background-image的方式实现

// tabs
.cc_tab_pic {
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  &.cc_tab_off_1 {
    background-image: url(../img/tabs/1.png);
  }
  &.cc_tab_on_1 {
    background-image: url(../img/tabs/2.png);
  }
  &.cc_tab_off_2 {
    background-image: url(../img/tabs/3.png);
  }
  &.cc_tab_on_2 {
    background-image: url(../img/tabs/4.png);
  }
  &.cc_tab_off_3 {
    background-image: url(../img/tabs/5.png);
  }
  &.cc_tab_on_3 {
    background-image: url(../img/tabs/6.png);
  }
}

---

登陆的做法

你要是愿意的话，可以在每个需要登录的页面中做未登录情况的处理，比如展示一些默认背景图片，登录提示等等，又由于ionic的路由会缓存曾经访问过的页面，所以当你登录成功后，需要去刷新这些被缓存的页面。可以使用如下代码
javascript 代码效果预览

1.每次进入页面前判断是否登录

$scope.$on("$ionicView.beforeEnter",function(){//每次进入页面前判断是否登录
        //判断登录代码
    });

监听页面进入事件，每次页面进入都判断当前是否已登录，来判断是否加载数据。或者用$ionicHistory.clearCache() 直接清除所有缓存。

2.每次进入页面前判断是否登录

最方便简单的方法，在.run 或者 .config 中监听state的变更事件，也就是在路由去加载每个页面之前就判断登录状态，来决定要不要加载该页面，还是跳转到登录页去。
javascript 代码效果预览

.run(function($ionicPlatform, $rootScope, $ionicHistory,$state) {
    var needLoginView = ["myclass","mycomment","myfavorite","myquestion","orderlist"];//需要登录的页面state
    $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams, options){ 
        if(needLoginView.indexOf(toState.name)>=0&&!$rootScope.isLogin){//判断当前是否登录
            $state.go("login");//跳转到登录页
            event.preventDefault(); //阻止默认事件，即原本页面的加载
        }
    })});

这样只需要把所有需要登录的页面state名写入needLoginView 数组中，每次切换页面，就会自动判断是否要跳转到登录页面，并且登录页返回直接到当前页，减少很多麻烦。

---

$ionicModal 向左css动画 & 返回关闭Modal

官方的modal只有向上(slide-in-up)的动画
所以自己添加一个向左的slide-in-left

// ionic model ----增加slide-in-right 动画效果
.slide-in-right {
    -webkit-transform: translateX(-100%);
    transform: translateX(100%);
}
.slide-in-right.ng-enter,.slide-in-right > .ng-enter {
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-right.ng-enter-active,.slide-in-right > .ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.slide-in-right.ng-leave,.slide-in-right > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}
.slide-in-left {
    -webkit-transform: translateX(-100%);
    transform: translateX(100%);
}
.slide-in-left.ng-enter,.slide-in-left > .ng-enter {
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-left.ng-enter-active,.slide-in-left > .ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.slide-in-left.ng-leave,.slide-in-left > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}

$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-left'
  }).then(function(modal) {
    $scope.modal = modal;
  });

如果用户进入Model页面后 点击了返回按钮 这是需要关闭Model

    //监听离开页面时关闭modal
    $scope.$on("$ionicParentView.beforeLeave", function() {
        console.info("yourPageCtrl--$ionicView.beforeLeave ");
        $scope.modal.hide();
    });

---

$http 请求格式问题

如果服务器拿不到请求的数据 应该是格式不对
配置$http参数，以表单形式 提交数据

var app = angular.module('myApp');
app.config(function ($httpProvider) {
    // 配置$http请求
    // 以表单形式 提交数据
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    $httpProvider.defaults.transformRequest = function(data) {
      if (data === undefined) return data;
      return $.param(data);
    };
});

---

阻止事件冒泡

元素的父元素也有点击事件 点击子元素后子元素事件执行完父元素事件也执行了

    呵呵

---

ionic使用iframe时在iOS上无法显示网页问题处理

近期在ionic项目中使用了iframe标签使用src属性展示一个网页,在Android设备上运行完全正常.
但是在iOS模拟器上去运行时却不显示网页.经查阅资料发现以下处理方法

• 在ionic项目根目录下,打开config.xml文件,在后添加即可

---

ionic禁止手机自动旋转下横屏

1.安装cordova插件
ionic plugin add cordova-plugin-screen-orientation

2.添加屏幕配置（Config.xml文件)

• orientation设置可以让你锁定应用程序屏幕方向以阻止屏幕自动翻转。可选的值有：default，landscape(横屏)，portrait(竖屏)。