在Ionic開發(fā)過程中會(huì)遇到很多常見的開發(fā)問題，分享一下筆者在開發(fā)過程中總結(jié)到的對(duì)這些問題的解決方案。也是接觸ionic沒多久，大家一起努力,有問題歡迎評(píng)論指出 :)
ps: 附上博客的原文地址
一些常識(shí)與技巧
-
list有延遲，可以在ion-content處使用overflow-scroll="true"嘗試 - 在
<i>上用ng-click上是沒效果的 -
<label>標(biāo)簽內(nèi)的事件會(huì)在整個(gè)label內(nèi)被觸發(fā)，點(diǎn)哪都觸發(fā) - 快捷修改背景色
style="background-color: #212326;" - 能用
ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高 - 直接在
ion-list中的ion-item中并不能觸發(fā)ng-click事件，可以在item中的元素上再套一層div - 可以用
ng-class="{'important': post.important}"配合css 根據(jù)列表元素顯示不同的效果 - 獲取日期用
$filter，var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss'); - 列表中的元素不能寫成
id : 4，應(yīng)寫成id : "4",注意在創(chuàng)建id變量的時(shí)候也需要轉(zhuǎn)成string,如var id = InfoListService.getListLength()+1+""; - 使用
$log進(jìn)行l(wèi)og輸出,為什么用$log而不是console.log呢？可以看看這個(gè) - 在安卓上的體驗(yàn)比較差，動(dòng)畫有延遲？可以試試ionic集成的crosswalk
-
controllers和services的文件名可能會(huì)重合，但是他們意義差不多，可以將controllers中的文件名小寫，對(duì)應(yīng)的services中的文件名大寫進(jìn)行區(qū)分,或者加后綴xxxControler,xxxService
問題列表
- [如何在某個(gè)界面中去掉導(dǎo)航欄?]
- [如何在ionic中加載本地圖片?]
- [如何在ionic中嵌入網(wǎng)頁代碼?]
- [如何將template加載到某個(gè)tab或某個(gè)sidemenu項(xiàng)目下?]
- [用docker跑ionic的時(shí)候，不能把地址綁定到0.0.0.0怎么處理?]
- [加載頁面的時(shí)候會(huì)看到雙括號(hào)一閃而過？]
- [更新了數(shù)據(jù)，如何讓界面更新呢？]
- [如何實(shí)現(xiàn)IonicView中card上面有一列分割線的效果?]
- [controller.js和service.js文件越來越大怎么辦?]
- [如何尋找優(yōu)秀的范例代碼?]
- [如何顯示相對(duì)時(shí)間？]
- [發(fā)布應(yīng)用的時(shí)候如果遇到翻譯錯(cuò)誤即MissingTranslation怎么辦?]
- [如何在列表右下方添加時(shí)間等信息?]
- [如何回到上一頁面?]
- [如何關(guān)閉應(yīng)用?]
- [在安卓設(shè)備上如何讓title居中?]
- [如何讓在sidemenu中的headerbar能夠顯示頭像等其他信息?]
- [ionic的subheader擋住了內(nèi)容區(qū)域怎么辦?]
- [對(duì)于需要添加數(shù)據(jù)的list，在添加數(shù)據(jù)后頁面不能及時(shí)刷新造成卡頓怎么辦?]
- [ionic如何處理回退按鈕？例如詢問用戶是否真的要退出應(yīng)用]
- [ionic如何實(shí)現(xiàn)對(duì)每個(gè)請(qǐng)求都添加認(rèn)證信息或認(rèn)證失敗自動(dòng)重新登錄?]
- [ionic如何實(shí)現(xiàn)搜索框內(nèi)的全部清除按鈕?]
如何在某個(gè)界面中去掉導(dǎo)航欄?
如果某個(gè)界面上不想要導(dǎo)航欄，可以簡(jiǎn)單地在最頂端的標(biāo)簽中添加hide-nav-bar="true"
如何在ionic中加載本地圖片?
對(duì)于css文件夾中的樣式文件中如果要調(diào)用本地的圖片的話,從該css文件所在的文件夾開始算,例如www/css/style.css要加../,否則在瀏覽器中可以正常顯示，在設(shè)備上不行，結(jié)構(gòu)如下所示：
.login-page {
background:url(../img/signup_bg.png);
background-size: cover;
background-repeat: no-repeat;
}
但是對(duì)于在頁面中定義的圖片路徑，從www路徑開始算,否則瀏覽器中可顯示，但設(shè)備上不行,img文件夾和index.html在一級(jí),如：
<img src="img/commander.jpg">
如何在ionic中嵌入網(wǎng)頁代碼?
使用ng-bind-html這個(gè)類,不過它會(huì)過濾原始html的標(biāo)簽，我們可以引入$sce模塊，用$sce.trustAsHtml()方法信任我們獲取的網(wǎng)頁
如何將template加載到某個(gè)tab或某個(gè)sidemenu項(xiàng)目下?
<ion-nav-view name="menuContent"> 可以指定name，然后在子狀態(tài)中使用該name，ionic就知道該把該狀態(tài)的template渲染到哪邊了。例如：
// signup page
.state('auth.signup', {
url: '/signup',
views: {
'auth-signup': {
templateUrl: 'templates/auth-signup.html',
controller: 'SignUpCtrl'
}
}
})
另有一個(gè)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>
運(yùn)行serve命令時(shí)ionic報(bào)錯(cuò)?
ionic $ An uncaught exception occured and has been reported to Ionic
看看你是不還有一個(gè)終端在運(yùn)行著serve呢？
用docker跑ionic的時(shí)候，不能把地址綁定到0.0.0.0怎么處理?
可以用ionic serve -all的方法解決
加載頁面的時(shí)候會(huì)看到雙括號(hào)一閃而過？
angularjs 在使用雙括號(hào)的時(shí)候，第一個(gè)加載的頁面，也就是應(yīng)用中的index.html,其未被渲染好的模版可能會(huì)被用戶看到。用ng-bind就不會(huì)遇到這個(gè)問題。造成這種現(xiàn)象的原因是，瀏覽器需要首先加載HTML頁面，渲染它，然后Angular才有機(jī)會(huì)把它解釋成你期望看到的內(nèi)容。不過好消息是，在大多數(shù)的模版中你依然可以使用雙括號(hào).但是對(duì)于index.html頁面中的數(shù)據(jù)綁定操作，建議使用ng-bind。
ng-bind使用方式如下: <p ng-bind="greeting"></p>
更新了數(shù)據(jù)，如何讓界面更新呢？
可以用廣播，注意$broadcast 和 $emit的區(qū)別
如何實(shí)現(xiàn)IonicView中card上面有一列分割線的效果?
在css里定義
#info-up {
border-top: 4px solid #f06336;
}
controller.js和service.js文件越來越大怎么辦?
所有的控制器不必都放在controllers.js這一個(gè)文件中，可以新建controllers文件夾，
然后把每個(gè)controller都建一個(gè)<controller>.js文件，同理services和utils等都是.但注意要在index.html中head部分聲明.但是為了避免他們相互覆蓋，第一個(gè)加載的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，因?yàn)槟氵€得記著自己把[]寫到那個(gè)模塊里了，統(tǒng)一地寫在app.js中即可，在app.js最下面加上類似：
angular.module('fcws.controllers',['ionic', 'fcws.services']);
angular.module('fcws.services', []);
可以達(dá)到和上面一樣的效果，而且可以統(tǒng)一管理.
如何尋找優(yōu)秀的范例代碼?
目前有些ionic 的app沒有進(jìn)行代碼混淆，至少ionic官方的ionic view沒有進(jìn)行代碼混淆，下載他們的app，文件名改成zip，解壓，所有的 www文件都在assets文件夾中，相當(dāng)于開源了有木有，看看那些最優(yōu)秀的practice。看中哪些優(yōu)秀的app，下下來,如何在googleplay上下載？把googleplay應(yīng)用的地址貼到apps.evozi中。
如何顯示相對(duì)時(shí)間？
如幾分鐘前，幾天前等,可以用momentjs，看這篇教程
發(fā)布應(yīng)用的時(shí)候如果遇到翻譯錯(cuò)誤即MissingTranslation怎么辦?
暫時(shí)的解決方法是，不進(jìn)行翻譯校正, 在 /platforms/android/build.gradle 中的android {}節(jié)中加入:
lintOptions {
disable 'MissingTranslation'
disable 'ExtraTranslation'
}
如何在列表右下方添加時(shí)間等信息?
span 可以用來將時(shí)間之類的附加信息顯示到列表右邊,如下面會(huì)將創(chuàng)建時(shí)間顯示在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這個(gè)模塊,引入該模塊后使用goBack([backCount])，backCount指定回去多少個(gè)頁面（-1代表回去一個(gè)頁面），默認(rèn)為-1
如何關(guān)閉應(yīng)用?
ionic.Platform.exitApp();
在安卓設(shè)備上如何讓title居中?
在headerbar中添加align-title="center",如:
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">{{username}}</h1>
</ion-header-bar>
不過這個(gè)設(shè)置對(duì)ion-view無效，親測(cè)，如果要統(tǒng)一讓所有navbar上的title居中(包括上面的headerbar)，可以在config里設(shè)置,如:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
...
如果要讓某一個(gè)view title居中，可以用$ionicNavBarDelegate，參考ionic官方文檔
如何讓在sidemenu中的headerbar能夠顯示頭像等其他信息?
解決方案是去掉headerbar,添加一個(gè)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擋住了內(nèi)容區(qū)域怎么辦?
解決方案是給<ion-content>加類has-subheader,同理也可以加has-header。如下:
<ion-content class="has-header has-subheader">
對(duì)于需要添加數(shù)據(jù)的list，在添加數(shù)據(jù)后頁面不能及時(shí)刷新造成卡頓怎么辦?
可以使用$ionicScrollDelegate.resize();在添加數(shù)據(jù)后手動(dòng)進(jìn)行重新刷新,記得添加依賴
ionic如何處理回退按鈕？例如詢問用戶是否真的要退出應(yīng)用
可以在app.js的.run方法中增加對(duì)硬件回退按鈕的注冊(cè)處理,這里我在大部分頁面都想注冊(cè)該事件，除去有二級(jí)歷史頁面的我單獨(dú)判斷了下，注意增加依賴。
$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: '退出應(yīng)用',
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如何實(shí)現(xiàn)對(duì)每個(gè)請(qǐng)求都添加認(rèn)證信息或認(rèn)證失敗自動(dòng)重新登錄?
在應(yīng)用的注冊(cè)或者登錄部分，不記名token響應(yīng)了這個(gè)請(qǐng)求并且這個(gè)token被存儲(chǔ)到本地存儲(chǔ)中。當(dāng)你向后端請(qǐng)求一個(gè)服務(wù)時(shí)，你需要把這個(gè)token放在頭部中。你可以在app.js的.config方法中使用AngularJS的攔截器實(shí)現(xiàn)這個(gè)。每次請(qǐng)求都會(huì)被攔截并且會(huì)把認(rèn)證頭部和值放到頭部中,同理如果服務(wù)器端響應(yīng)401或403，跳轉(zhuǎn)到重新登錄頁面.
$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如何實(shí)現(xiàn)搜索框內(nèi)的全部清除按鈕?
在label中的input不能嵌入按鈕，因?yàn)閕onic對(duì)于label中的tap事件會(huì)進(jìn)行重定向到input上。解決方案是將label替換成span或div。如下面的搜索框，注意ng-model需要是一個(gè)對(duì)象才能置空,變量不行:
<span class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="請(qǐng)輸入姓名前綴" 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>
