關於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