ionic使用的一些技巧
使用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-show
和ng-hide
高;
11. 如果在ion-list
中的ion-item
中並不能觸發ng-click
事件,可以在item中的元素上再套一層div;
12. 獲取日期用$filter
,var 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使用的一些技巧