Ionic 開發中遇到的常見問題及解決方案info-up {

前言

ionic是目前較為流行的hybird app解決方案,在ionic開發過程中會遇到很多常見的開發問題，本文嘗試對這些問題給出解決方案。

一些常識與技巧

list 有延遲，可以在ion-content處使用 overflow-scroll="true"嘗試

在上用ng-click上是沒效果的

标簽内的事件會在整個label内被觸發，點哪都觸發

快捷修改背景色style="background-color: #212326;"

能用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

安裝cordova插件的時候用ionic plugin add ...的方式添加，這樣會在package.json中添加這個插件的條目，如果有人clone了你的項目想在本地運作，可以用ionic state restore它會根據cordovaplugins條目安裝對應的插件。如果直接用cordova plugin add 安裝則不會更新package.json。



上傳base64編碼的時候如果提示413錯誤，是因為檔案過大導緻的，可以在nodejs中設定bodyparser的檔案限制:

var bodyparser = require('body-parser');

app.use(bodyparser.json({limit: '50mb'}));

app.use(bodyparser.urlencoded({limit: '50mb', extended: true}));

img 中 base64編碼的圖檔無法顯示？在源碼中發現angular添加了unsafe标簽？需要在白名單中添加data:image

$compileprovider.imgsrcsanitizationwhitelist(/^s*(https?|ftp|mailto|content|file|assets-library):|data:image//);

有時候pm2運作有問題，重新開機一下即可

在ios裝置上運作ionic run ios --device

問題清單

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

2.如何在ionic中加載本地圖檔?

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

4.如何将template加載到某個tab或某個sidemenu項目下?

5.運作serve指令時ionic報錯?

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

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

8.更新了資料，如何讓界面更新呢？

9.如何實作ionicview中card上面有一列分割線的效果?

10.controller.js和service.js檔案越來越大怎麼辦?

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

12.如何顯示相對時間？

13.釋出應用的時候如果遇到翻譯錯誤即missingtranslation怎麼辦?

14.如何在清單右下方添加時間等資訊?

15.如何回到上一頁面?

16.如何關閉應用?

17.在安卓裝置上如何讓title居中?

18.如何讓在sidemenu中的headerbar能夠顯示頭像等其他資訊?

19.ionic的subheader擋住了内容區域怎麼辦?

20.對于需要添加資料的list，在添加資料後頁面不能及時重新整理造成卡頓怎麼辦?

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

22.ionic如何實作對每個請求都添加認證資訊或認證失敗自動重新登入?

23.ionic如何實作搜尋框内的全部清除按鈕?

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

如果某個界面上不想要導航欄，可以簡單地在最頂端的标簽中添加hide-nav-bar="true"

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

對于css檔案夾中的樣式檔案中如果要調用本地的圖檔的話,從該css檔案所在的檔案夾開始算,例如www/css/style.css要加../,否則在浏覽器中可以正常顯示，在裝置上不行，結構如下所示：

.login-page {

background:url(../img/signup_bg.png);

background-size: cover;

background-repeat: no-repeat;

}

但是對于在頁面中定義的圖檔路徑，從www路徑開始算,否則浏覽器中可顯示，但裝置上不行,img檔案夾和index.html在一級,如：

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

使用ng-bind-html這個類,不過它會過濾原始html的标簽，我們可以引入$sce子產品，用$sce.trustashtml()方法信任我們擷取的網頁

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

 可以指定name，然後在子狀态中使用該name，ionic就知道該把該狀态的template渲染到哪邊了。例如：

// signup page

.state('auth.signup', {

url: '/signup',

views: {

})

另有一個tabs中聲明該auth-signup:

icon-off="ion-ios-personadd-outline" href="#/auth/signup">

運作serve指令時ionic報錯?

ionic $ an uncaught exception occured and has been reported to ionic

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

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

可以用ionic serve -all的方法解決

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

angularjs 在使用雙括号的時候，第一個加載的頁面，也就是應用中的index.html,其未被渲染好的模版可能會被使用者看到。用ng-bind就不會遇到這個問題。造成這種現象的原因是，浏覽器需要首先加載html頁面，渲染它，然後angular才有機會把它解釋成你期望看到的内容。不過好消息是，在大多數的模版中你依然可以使用雙括号.但是對于index.html頁面中的資料綁定操作，建議使用ng-bind。

ng-bind使用方式如下: 

更新了資料，如何讓界面更新呢？

可以用廣播，注意$broadcast 和 $emit的差別

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

在css裡定義

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')

// file : /js/directives/mybetterdirective.js

...

看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 {

如何在清單右下方添加時間等資訊?

span 可以用來将時間之類的附加資訊顯示到清單右邊,如下面會将建立時間顯示在name的右邊:

如何回到上一頁面?

用$ionichistory這個子產品,引入該子產品後使用goback([backcount])，backcount指定回去多少個頁面（-1代表回去一個頁面），預設為-1

如何關閉應用?

ionic.platform.exitapp();

在安卓裝置上如何讓title居中?

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

不過這個設定對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中，如:

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

解決方案是給加類has-subheader,同理也可以加has-header。如下:

對于需要添加資料的list，在添加資料後頁面不能及時重新整理造成卡頓怎麼辦?

可以使用$ionicscrolldelegate.resize();在添加資料後手動進行重新重新整理,記得添加依賴

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

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

$ionicplatform.registerbackbuttonaction(function(e) {

},100);

ionic如何實作對每個請求都添加認證資訊或認證失敗自動重新登入?

在應用的注冊或者登入部分，不記名token響應了這個請求并且這個token被存儲到本地存儲中。當你向後端請求一個服務時，你需要把這個token放在頭部中。你可以在app.js的.config方法中使用angularjs的攔截器實作這個。每次請求都會被攔截并且會把認證頭部和值放到頭部中,同理如果伺服器端響應401或403，跳轉到重新登入頁面.

$httpprovider.interceptors.push(function ($q, $location, user, $rootscope) {

});

ionic如何實作搜尋框内的全部清除按鈕?

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

中添加這個插件的條目，如果有人clone了你的項目想在本地運作，可以用ionic state restore它會根據cordovaplugins條目安裝對應的插件。如果直接用cordova plugin add 安裝則不會更新package.json。