基于ionic1.7.16 & cordova 6.3.1

對應(yīng)的ionic cli版本官方參考文檔可以自己查找到
在npm安裝的目錄下ionic/README.md
C:\Users\Administrator\AppData\Roaming\npm\node_modules\ionic\README.md

發(fā)布簽名版本

• 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.....（秘鑰需要轉(zhuǎn)成小寫去":",做微信cordova插件功能時需要配置）

自定義ionic默認(rèn)css樣式

安裝編譯scss所需依賴
npm install

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

啟動的時候會增加gulp任務(wù),sass和watch
ionic serve

修改lib\ionic\scss_variables.scss
$calm: #11c1f3 !default;
再修改myapp/scss/ionic.app.scss
$calm: #11c1f3 !default;
----- save ok------
sass代碼構(gòu)建過程 參考作者：大貓Calvin

順便擴(kuò)展gulp任務(wù) 自定義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 圖標(biāo)

以css background-image的方式實現(xiàn)

<ion-tabs class="tabs-icon-top tabs-color-active-calm">

  <ion-tab title="首頁" icon-off="cc_tab_pic cc_tab_off_1" icon-on="cc_tab_pic cc_tab_on_1" href="#/tab/home" style="">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="向?qū)? icon-off="cc_tab_pic cc_tab_off_2" icon-on="cc_tab_pic cc_tab_on_2" href="#/tab/guide">
    <ion-nav-view name="tab-guide"></ion-nav-view>
  </ion-tab>

  <ion-tab title="我的" icon-off="cc_tab_pic cc_tab_off_3" icon-on="cc_tab_pic cc_tab_on_3" href="#/tab/user">
    <ion-nav-view name="tab-user"></ion-nav-view>
  </ion-tab>

</ion-tabs>

// 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);
  }
}

登陸的做法

你要是愿意的話，可以在每個需要登錄的頁面中做未登錄情況的處理，比如展示一些默認(rèn)背景圖片余寥，登錄提示等等舵盈，又由于ionic的路由會緩存曾經(jīng)訪問過的頁面卿泽，所以當(dāng)你登錄成功后赃梧，需要去刷新這些被緩存的頁面「逭蓿可以使用如下代碼
javascript 代碼效果預(yù)覽

1.每次進(jìn)入頁面前判斷是否登錄

$scope.$on("$ionicView.beforeEnter",function(){//每次進(jìn)入頁面前判斷是否登錄
        //判斷登錄代碼
    });

監(jiān)聽頁面進(jìn)入事件，每次頁面進(jìn)入都判斷當(dāng)前是否已登錄气忠，來判斷是否加載數(shù)據(jù)邻储「逞剩或者用$ionicHistory.clearCache() 直接清除所有緩存。

2.每次進(jìn)入頁面前判斷是否登錄

最方便簡單的方法芥备，在.run 或者 .config 中監(jiān)聽state的變更事件冬耿，也就是在路由去加載每個頁面之前就判斷登錄狀態(tài)，來決定要不要加載該頁面萌壳，還是跳轉(zhuǎn)到登錄頁去亦镶。
javascript 代碼效果預(yù)覽

.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){//判斷當(dāng)前是否登錄
            $state.go("login");//跳轉(zhuǎn)到登錄頁
            event.preventDefault(); //阻止默認(rèn)事件，即原本頁面的加載
        }
    })});

這樣只需要把所有需要登錄的頁面state名寫入needLoginView 數(shù)組中袱瓮，每次切換頁面缤骨，就會自動判斷是否要跳轉(zhuǎn)到登錄頁面，并且登錄頁返回直接到當(dāng)前頁尺借，減少很多麻煩绊起。

$ionicModal 向左css動畫 & 返回關(guān)閉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;
  });

如果用戶進(jìn)入Model頁面后 點(diǎn)擊了返回按鈕 這是需要關(guān)閉Model

    //監(jiān)聽離開頁面時關(guān)閉modal
    $scope.$on("$ionicParentView.beforeLeave", function() {
        console.info("yourPageCtrl--$ionicView.beforeLeave ");
        $scope.modal.hide();
    });

$http 請求格式問題

如果服務(wù)器拿不到請求的數(shù)據(jù) 應(yīng)該是格式不對
配置$http參數(shù)，以表單形式 提交數(shù)據(jù)

var app = angular.module('myApp');
app.config(function ($httpProvider) {
    // 配置$http請求
    // 以表單形式 提交數(shù)據(jù)
    $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);
    };
});

阻止事件冒泡

元素的父元素也有點(diǎn)擊事件 點(diǎn)擊子元素后子元素事件執(zhí)行完父元素事件也執(zhí)行了

<div ng-click="gohome()" >
    <button ng-click="myalert('gg');$event.stopPropagation();">呵呵</button>
</div>

ionic使用iframe時在iOS上無法顯示網(wǎng)頁問題處理

近期在ionic項目中使用了iframe標(biāo)簽使用src屬性展示一個網(wǎng)頁,在Android設(shè)備上運(yùn)行完全正常.
但是在iOS模擬器上去運(yùn)行時卻不顯示網(wǎng)頁.經(jīng)查閱資料發(fā)現(xiàn)以下處理方法

• 在ionic項目根目錄下,打開config.xml文件,在<access origin="" />后添加<allow-navigation href="" />即可

<allow-navigation href="*" />

ionic禁止手機(jī)自動旋轉(zhuǎn)下橫屏

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

2.添加屏幕配置（Config.xml文件)
<preference name="orientation" value="portrait" />

• orientation設(shè)置可以讓你鎖定應(yīng)用程序屏幕方向以阻止屏幕自動翻轉(zhuǎn)燎斩∈幔可選的值有：default，landscape(橫屏)栅表，portrait(豎屏)笋鄙。