前言

Ionic是目前較爲流行的Hybird App解決方案,在Ionic開發過程當中會遇到不少常見的開發問題，本文嘗試對這些問題給出解決方案。javascript

一些常識與技巧

list 有延遲，能夠在ion-content處使用 overflow-scroll="true"嘗試
在<i>上用ng-click上是沒效果的
<label>標籤內的事件會在整個label內被觸發，點哪都觸發
快捷修改背景色style=""
能用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

問題列表

如何在某個界面中去掉導航欄?

若是某個界面上不想要導航欄，能夠簡單地在最頂端的標籤中添加hide-nav-bar="true"css

如何在ionic中加載本地圖片?

對於css文件夾中的樣式文件中若是要調用本地的圖片的話,從該css文件所在的文件夾開始算,例如www/css/style.css要加../,不然在瀏覽器中能夠正常顯示，在設備上不行，結構以下所示：html

.login-page {
  background:url(../img/signup_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

可是對於在頁面中定義的圖片路徑，從www路徑開始算,不然瀏覽器中可顯示，但設備上不行,img文件夾和index.html在一級,如：java

<img src="img/commander.jpg">

如何在ionic中嵌入網頁代碼?

使用ng-bind-html這個類,不過它會過濾原始html的標籤，咱們能夠引入$sce模塊，用$sce.trustAsHtml()方法信任咱們獲取的網頁android

如何將template加載到某個tab或某個sidemenu項目下?

<ion-nav-view name="menuContent"> 能夠指定name，而後在子狀態中使用該name，ionic就知道該把該狀態的template渲染到哪邊了。例如：ios

 // signup page
 .state('auth.signup', {
   url: '/signup',
   views: {
       'auth-signup': {
           templateUrl: 'templates/auth-signup.html',
           controller: 'SignUpCtrl'
       }
   }
 })

 另有一個tabs中聲明該auth-signup:
 <ion-tab title="Sign Up" icon-on="ion-ios-personadd"
   icon-off="ion-ios-personadd-outline" href="#/auth/signup">
   <ion-nav-view name="auth-signup"></ion-nav-view>
</ion-tab>

運行serve命令時ionic報錯?

ionic $ An uncaught exception occured and has been reported to Ionic

看看你是不還有一個終端在運行着serve呢？

用docker跑ionic的時候，不能把地址綁定到0.0.0.0怎麼處理?

能夠用ionic serve -all的方法解決git

加載頁面的時候會看到雙括號一閃而過？

angularjs 在使用雙括號的時候，第一個加載的頁面，也就是應用中的index.html,其未被渲染好的模版可能會被用戶看到。用ng-bind就不會遇到這個問題。形成這種現象的緣由是，瀏覽器須要首先加載HTML頁面，渲染它，而後Angular纔有機會把它解釋成你指望看到的內容。不過好消息是，在大多數的模版中你依然可使用雙括號.可是對於index.html頁面中的數據綁定操做，建議使用ng-bind。angularjs

ng-bind使用方式以下: <p ng-bind="greeting"></p>github

更新了數據，如何讓界面更新呢？

能夠用廣播，注意$broadcast 和 $emit的區別docker

如何實現IonicView中card上面有一列分割線的效果?

在css裏定義

#info-up {
  border-top: 4px solid #f06336;
}

controller.js和service.js文件愈來愈大怎麼辦?

全部的控制器沒必要都放在controllers.js這一個文件中，能夠新建controllers文件夾，
而後把每一個controller都建一個.js文件，同理services和utils等都是.但注意要在index.html中head部分聲明.可是爲了不他們相互覆蓋，第一個加載的js中模塊中要加[…],其餘都不須要。如：

// File : /js/directives/mainDirective.js
angular.module('app.directives',[]);

// File : /js/directives/myGreatDirective.js
angular.module('app.directives')  
    .directive('myGreatDirective', function(){
        return {
            //...
        }
    });

// File : /js/directives/myBetterDirective.js
angular.module('app.directives')  
    .directive('myBetterDirective', function(){
        return {
            //...
        }
    });

...

看angularjs-code-organization瞭解更多,嗯這篇文章寫的還不是best practice，由於你還得記着本身把[]寫到那個模塊裏了，統一地寫在app.js中便可，在app.js最下面加上相似：

angular.module('fcws.controllers',['ionic', 'fcws.services']);
angular.module('fcws.services', []);

能夠達到和上面同樣的效果，並且能夠統一管理.

如何尋找優秀的範例代碼?

目前有些ionic 的app沒有進行代碼混淆，至少ionic官方的ionic view沒有進行代碼混淆，下載他們的app，文件名改爲zip，解壓，全部的 www文件都在assets文件夾中，至關於開源了有木有，看看那些最優秀的practice。看中哪些優秀的app，下下來,如何在googleplay上下載？把googleplay應用的地址貼到apps.evozi中。

如何顯示相對時間？

如幾分鐘前，幾天前等,能夠用momentjs，看這篇教程

發佈應用的時候若是遇到翻譯錯誤即MissingTranslation怎麼辦?

暫時的解決方法是，不進行翻譯校訂, 在 /platforms/android/build.gradle 中的android {}節中加入:

lintOptions {
						 disable 'MissingTranslation'
							disable 'ExtraTranslation'
}

如何在列表右下方添加時間等信息?

span 能夠用來將時間之類的附加信息顯示到列表右邊,以下面會將建立時間顯示在name的右邊:

<ion-item class="item item-avatar-left " ng-repeat="message in messages">
	<img src="../../img/commander.jpg">
	<span class="item-note">{{message.create_at}}</span>
	<h2 >{{message.name}}</h2>
	<p >  {{message.content}}</p>
</ion-item >

如何回到上一頁面?

用$ionicHistory這個模塊,引入該模塊後使用goBack([backCount])，backCount指定回去多少個頁面（-1表明回去一個頁面），默認爲-1

如何關閉應用?

ionic.Platform.exitApp();

在安卓設備上如何讓title居中?

在headerbar中添加align-title="center",如:

<ion-header-bar class="bar-positive" align-title="center">
	 <h1 class="title">{{username}}</h1>
</ion-header-bar>

不過這個設置對ion-view無效，親測，若是要統一讓全部navbar上的title居中(包括上面的headerbar)，能夠在config裏設置,如:

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
  $ionicConfigProvider.navBar.alignTitle('center');
  ...

若是要讓某一個view title居中，能夠用$ionicNavBarDelegate，參考ionic官方文檔

如何讓在sidemenu中的headerbar可以顯示頭像等其餘信息?

解決方案是去掉headerbar,添加一個avatar到sidemenu content中，如:

<ion-side-menu side="left">
	<ion-content class="bar-positive">
		<ion-list>
			<ion-item class="item item-avatar item-positive" href="#">
				<img src="img/commander.jpg">
				<h2 class=" light">
					<i class="icon ion-ios-star"></i>{{title}}
				</h2>
				<a>{{username}}</a>
			</ion-item>

ionic的subheader擋住了內容區域怎麼辦?

解決方案是給<ion-content>加類has-subheader,同理也能夠加has-header。以下:

<ion-content class="has-header has-subheader">

對於須要添加數據的list，在添加數據後頁面不能及時刷新形成卡頓怎麼辦?

可使用$ionicScrollDelegate.resize();在添加數據後手動進行從新刷新,記得添加依賴

ionic如何處理回退按鈕？例如詢問用戶是否真的要退出應用

能夠在app.js的.run方法中增長對硬件回退按鈕的註冊處理,這裏我在大部分頁面都想註冊該事件，除去有二級歷史頁面的我單獨判斷了下，注意增長依賴。

$ionicPlatform.registerBackButtonAction(function(e) {
    var current_state_name = $state.current.name;
    if(current_state_name !== 'sidemenu.post'
     && current_state_name !== 'sidemenu.contact_town' &&
    current_state_name !== 'sidemenu.contact_people'){
        $ionicPopup.confirm({
            title: '退出應用',
            template: '您肯定要退出xxxx嗎?'
        }).then(function (res) {
            if (res) {
                //ionic.Platform.exitApp();
                navigator.app.exitApp();
            } else {
                console.log('You are not sure');
            }
        });
        e.preventDefault();
        return false;
    }else{
        navigator.app.backHistory();
    }
},100);

ionic如何實現對每一個請求都添加認證信息或認證失敗自動從新登陸?

在應用的註冊或者登陸部分，不記名token響應了這個請求而且這個token被存儲到本地存儲中。當你向後端請求一個服務時，你須要把這個token放在頭部中。你能夠在app.js的.config方法中使用AngularJS的攔截器實現這個。每次請求都會被攔截而且會把認證頭部和值放到頭部中,同理若是服務器端響應401或403，跳轉到從新登陸頁面.

$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
    return {
        'request': function (config) {
            config.headers = config.headers || {};
            if (User.getToken()) {
                config.headers.Authorization = 'Bearer ' + User.getToken();
            }
            return config;
        },
        'responseError': function (response) {
            if (response.status === 401 || response.status === 403) {
                //若是以前登錄過
                if (User.getToken()) {
                    $rootScope.$broadcast('unAuthenticed');
                }
            }
            return $q.reject(response);
        }
    };
});

ionic如何實現搜索框內的所有清除按鈕?

在label中的input不能嵌入按鈕，由於ionic對於label中的tap事件會進行重定向到input上。解決方案是將label替換成span或div。以下面的搜索框，注意ng-model須要是一個對象才能置空,變量不行:

<span class="item-input-wrapper">
     <i class="icon ion-ios-search placeholder-icon"></i>
     <input type="search" placeholder="請輸入姓名前綴" ng-model="search.key">
         <i class="icon ion-close-circled placeholder-icon" style="vertical-align: middle;"
            on-tap="clearSearch()" ng-if="search.key.length"></i>
 </span>

ps: 附上博客的原文地址

Ionic 常見問題及解決方案

前言