關於ionic開發中遇到的坑與總結

此次是第二次使用ionic開發混合app，今天算是對這個框架作一個總結，基礎的我就再也不重複了，網上都有教程。我就說說本身的心得和碰見的各類坑， 以後會陸續補充，想到什麼說什麼吧。

1.關於ionic效率的問題，這個是我最關心的問題，畢竟用戶體驗纔是第一位啊。

a)Native transitions

這個是一個cordova插件，主要是讓頁面間的切換更貼近原生，能夠經過命令行安裝。

cnpm install ionic-native-transitions --save 

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.4.2

 至於不會的童鞋能夠下載這個js文件，引入以後就能夠了。不要忘了將ionic-native-transitions做爲依賴添加進去。

 以後可使用$ionicNativeTransitionsProvider.setDefaultOptions對這個插件進行基礎配置，具體配置項和使用方法能夠去看看這個

https://github.com/shprink/ionic-native-transitions

 b)Native Scrolling

ionic默認使用javascript滾動方式，在真機上會有點很差控制，尤爲在安卓機多圖頁面中問題最多。一般在配置中就全局禁用。

$ionicConfigProvider.scrolling.jsScrolling(false);

 固然也能夠在單獨控制，在<ion-content>標籤中添加overflow-scroll="true"就能夠了

c)Caching

關於緩存網上大多推薦angular-cache，我沒有用過，其實和localStorage原理是相同的，都是進入頁面後判斷一次，若是存在緩存中就直接取出來就行。有興趣的童鞋能夠去試試

d)crosswalk

這個插件經過替換安卓原生WebView爲Crosswalk WebView，極大的提升了安卓app的性能，記住是極大的，不是一點點。惟一的壞處就是讓app大了20m左右，不過和提升的性能比起來不值一提啊。下面是關於安裝crosswalk的方法

cordova plugin add cordova-plugin-crosswalk-webview

還須要在config.xml添加下面兩句話

<preference name="CrosswalkAnimatable" value="true" />

<gap:plugin name="org.crosswalk.engine" version="1.3.0" />

以後打包就會發現多了幾個包，一個armv7，一個是x86，根據安卓機類型不一樣安裝不一樣的apk就行。

 

2.關於ionic後退

　　ionic若是不是頂層視圖的話，會在<ion-nav-back-button>位置上自動生成一個返回按鈕，當這個標籤中沒有內容的時候默認是back字樣的無邊框按鈕，若是是隻有圖標也會顯示back字樣。

我是在配置中全局配置中解決的

$ionicConfigProvider.backButton.text('').previousTitleText(false);

可使用hide-back-button="true"來自定義隱藏返回按鈕。固然後退也可使用$ionicHistory.goback()方法來控制返回前幾個頁面，前提是那個頁面存在，否則會返回到第一個頁面。

 

3.關於ion-content標籤

　　第一次用ionic開發的時候，<ion-nav-bar>就擋住了個人<ion-view>裏面的內容，當時又沒有靜下心看看文檔，結果搞了很久，結果是由於沒有加<ion-content>標籤。若是發現尚未好，加上'has-header','has-subheader'兩個類再試試？這個標籤是最經常使用的內容容器，能根據設備跳整內容區域尺寸，能和頭部底部協同合做，能管理滾動，整體來講很牛逼，通常來講都須要這個標籤。除了某些特殊狀況，好比說在其中添加<ion-tabs>標籤，它倆在一塊兒會形成一些已知的css樣式錯誤。

 

4.上拉加載更多

　　這個其實很簡單，主要注意兩個地方，一是要加上ng-if判斷，在數據加載完成後必定要隱藏掉。二是加上immediate-check="false"這個屬性，由於無限滾動的機制限制，初始化的時候就會有兩次載入方法(控制器觸發一次，滾動組件觸發一下)，所以須要在初始化的時候禁用該組件。其次就是要在$http服務的finally方法塊中經過廣播告訴加載完成，否則動畫會一直播放。

 

5.重寫頭部的方法

　　你們都應該有這個需求吧，複用的ion-nav-bar或者ion-header-bar並不能知足需求。以前想過經過各類參數，判斷頁面而後改變$rootScope之類的。其實想太多。。只要用hide-nav-bar或者hide-header-bar隱藏以前的複用頭部，從新寫一個就是了。

 

6.ionic側邊欄

　　側邊欄實際上是一個比較簡單的結構，不過我遇到的這個項目須要在不一樣的頁面有不一樣的側邊欄內容，因此我把須要的內容存在$rootScope中，在頁面跳轉的時候給須要的$rootScope賦值。在點擊的時候調用的是$ionicSideMenuDelegate.toggleRight()方法，從右側打開側邊菜單。在回到首頁時用$ionicSideMenuDelegate.toggleRight(false)關閉側邊欄。

 

7.上拉菜單在安卓上樣式改變

　　這個就只有本身重寫樣式了，下面的代碼也是我從網上找到的，貼出來給你們看看。

.platform-android .action-sheet-backdrop {
    -webkit-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

.platform-android .action-sheet-backdrop.active {
    background-color: rgba(0, 0, 0, 0.4);
}

.platform-android .action-sheet-wrapper {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
    transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.platform-android .action-sheet-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.platform-android .action-sheet {
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    z-index: 11;
    overflow: hidden;
}

.platform-android .action-sheet .button {
    display: block;
    padding: 1px;
    width: 100%;
    border-radius: 0;
    border-color: #d1d3d6;
    background-color: transparent;
    color: #007aff;
    font-size: 21px;
}

.platform-android .action-sheet .button:hover {
    color: #007aff;
}

.platform-android .action-sheet .button.destructive {
    color: #ff3b30;
}

.platform-android .action-sheet .button.destructive:hover {
    color: #ff3b30;
}

.platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
    box-shadow: none;
    border-color: #d1d3d6;
    color: #007aff;
    background: #e4e5e7;
}

.platform-android .action-sheet-has-icons .icon {
    position: absolute;
    left: 16px;
}

.platform-android .action-sheet-title {
    padding: 16px;
    color: #8f8f8f;
    text-align: center;
    font-size: 13px;
}

.platform-android .action-sheet-group {
    margin-bottom: 8px;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.platform-android .action-sheet-group .button {
    border-width: 1px 0px 0px 0px;
}

.platform-android .action-sheet-group .button:first-child:last-child {
    border-width: 0;
}

.platform-android .action-sheet-options {
    background: #f1f2f3;
}

.platform-android .action-sheet-cancel .button {
    font-weight: 500;
}

.platform-android .action-sheet-open {
    pointer-events: none;
}

.platform-android .action-sheet-open.modal-open .modal {
    pointer-events: none;
}

.platform-android .action-sheet-open .action-sheet-backdrop {
    pointer-events: auto;
}

.platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
    text-align: center;
}

.platform-android .action-sheet-cancel {
    display: block;
}

 

 8.關於隱式聲明controller時遇到的問題

　　這個問題不該該算是ionic的問題，而是angular的問題，不過在這個項目裏遇到的就寫在這裏吧。

問題就在於我聲明路由的時候把controller也定義了，可是遇到那種ng-repeat,ng-if嵌套多的頁面，最深層的一些事件就沒法被控制，原理沒搞明白，可是解決方法很簡單，在<ion-content>標籤裏面，注意必定是裏面，若是寫在外面沒有效果，寫在標籤上事件卻是控制到了，可是頁面就不能滑動了。緣由大概是ng-repeat和ng-if這種指令自己會創立一個做用域，多層嵌套後就會失效，可是本身怎麼也想不明白，只要把controller寫在裏面，不管多少層都能控制的到，這個就搞不懂了。問題先放在這裏，到時候來補缺。

 

---------------2016/11/21 更新--------------------

今天review同事寫的代碼，他的本意是在單獨頁面引入單獨的css文件，雖然css樣式沒有問題，可是致使了後退按鈕失效，必須放在index.html引入或者使用requireJS