1. 程式人生 > >ionic使用的一些技巧

ionic使用的一些技巧

disable state rust 如果 -a scope 加載 hdpi efault

使用ionic總結:

1.全局禁用緩存的方法是: $ionicConfigProvider.views.maxCache(0);

2. 在不同的用戶輸入場景下,需要顯示不同的鍵盤模式以方便用戶輸入,如在輸入郵件時鍵盤則顯示郵件模式等,文本,數子等。

  <input type="number">

<input type="text">

<input type="emil">

  在 Ionic 中需要安裝鍵盤插件控制鍵盤模式的顯示,安裝後在$ionicPlatform.ready中調用即可。 

$ionicPlatform.ready(function
() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { $rootScope.connectionCheck(); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(
true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleLightContent(); } });

3.設備網絡狀況的檢查:

document.addEventListener("deviceready", function () {
    // listen for Online event
$rootScope.$on(‘$cordovaNetwork:online‘, function (event, networkState) { var onlineState = networkState; console.log("device online..."); }) // listen for Offline event $rootScope.$on(‘$cordovaNetwork:offline‘, function (event, networkState) { var offlineState = networkState; //提醒用戶的網絡異常 $ionicLoading.show({ template: ‘網絡異常,不能連接到服務器!‘ }); }) }, false);

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

5.ion-scroll 不滾動
《ion-scroll id="xx" delegate-handle="XX" direction="x" zooming="false" 》增加overflow-scroll="false" 即可。

6.splash screen 在安卓上變形:
在部分1080P下,按cordova splash screen 的 screen-xhdpi-portrait.png(720*960) 設置的啟動畫面,會變形擠瘦,需要在config.xml 中加入
《preference name="SplashMaintainAspectRatio" value="true" /》不強制拉伸即可。

7. list 有延遲,可以在ion-content處使用 overflow-scroll="true"試試!

8. ng-click在 i 標簽上沒有效果;

9. label標簽內的事件會在整個label內被觸發;

10. 能用ng-if就用ng-if,ng-if的效率比ng-showng-hide高;

11. 如果在ion-list中的ion-item中並不能觸發ng-click事件,可以在item中的元素上再套一層div;

12. 獲取日期用$filtervar postdate = $filter(‘date‘)(date, ‘yyyy-MM-dd HH:mm:ss‘);

13. 在安卓上的體驗比較差,動畫有延遲?可以試用ionic集成的crosswalk ;
14. 在ionic中嵌入網頁html文件:可使用ng-build-html,不過它會過濾原始html的標簽,我們可以引入$sce模塊,用$sce.trustAsHtml()方法信任我們獲取的網頁.

ng-bind-html="content" ;

  $scope.content=$sce.trustAsHtml(data[0].Content);

15. 加載頁面的時候會看到雙括號:

  angularjs 在使用雙括號的時候,第一個加載的頁面,也就是應用中的index.html,其未被渲染好的模版可能會被用戶看到。用ng-bind就不會遇到這個問題。 原因是,瀏覽器需 要首先加載HTML頁面,渲染它,然後Angular才有機會把它解釋成你期望看到的內容。在大多數的模版中你依然可以使用雙括號.但是對於 index.html頁面中的數據綁定操作,建議使用ng-bind。如 <h1 ng-bind="title"></h1> 16. 更新了數據,讓界面更新: 可以用廣播,註意$broadcast 和 $emit的區別

17. 如何顯示相對時間?如幾分鐘前,幾天前等,可以用momentjs,參考地址 ---https://scotch.io/tutorials/display-time-relatively-in-angular

18. 關閉應用: ionic.Platform.exitApp(); navigator.app.exitApp();

19. 在安卓設備上如何讓title居中: 如果要統一讓所有navbar上的title居中(包括上面的headerbar),可以在config裏設置,如:

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

20. ionic的subheader擋住了內容區域:解決方案是給<ion-content>加類has-subheader,同理也可以加has-header

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

21. 對於需要添加數據的list,在添加數據後頁面不能及時刷新造成卡頓怎麽辦?

使用$ionicScrollDelegate.resize();在添加數據後手動進行重新刷新;

22. ionic tab在Android中顯示在頂部的解決方案:

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

        $ionicConfigProvider.platform.ios.tabs.style(‘standard‘);
        $ionicConfigProvider.platform.ios.tabs.position(‘bottom‘);
        $ionicConfigProvider.platform.android.tabs.style(‘standard‘);
        $ionicConfigProvider.platform.android.tabs.position(‘standard‘);

        $ionicConfigProvider.platform.ios.navBar.alignTitle(‘center‘);
        $ionicConfigProvider.platform.android.navBar.alignTitle(‘left‘);

        $ionicConfigProvider.platform.ios.backButton.previousTitleText(‘‘).icon(‘ion-ios-arrow-thin-left‘);
        $ionicConfigProvider.platform.android.backButton.previousTitleText(‘‘).icon(‘ion-android-arrow-back‘);       

        $ionicConfigProvider.platform.ios.views.transition(‘ios‘);
        $ionicConfigProvider.platform.android.views.transition(‘android‘);
}

23. 時候會出現ionicHistory.clearHistory無效,用 timeout()

$timeout(function () {
          $ionicHistory.removeBackView();
          $ionicHistory.clearCache();
          $ionicHistory.clearHistory();
        });

24. ionic 更改包名:找到根目錄下的config.xml,其中<widget id=‘com.package.name‘>是你的包名;

25. ionic中如何打開微信(或者其他應用):

使用協議 : weixin://
<a class="button button-block button-light" href="weixin://">打開微信</a>
然後在根目錄下的config.xml中配置:
<access origin="weixin:*" launch-external="yes"/>  //打開微信的

26. ionic.Platform.exitApp()退出後,再進入應用 splashscreen不顯示:

  在config.xml文件裏添加: <preference name="SplashShowOnlyFirstTime" value="false" />

27. ionic實現微信分享:參考文章--- https://chenhuichao.com/2016/10/09/ionic/ionic-wechat-share/

ionic使用的一些技巧