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" 即可。
ionic页面上右侧会出现滚动条，去掉的方法如下：
给ion-content上加overflow-scroll="true" 后再加上style="overflow:auto;"就好了
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就不会遇到这个问题。Angular才有机会把它解释成你期望看到的内容。在大多数的模版中你依然可以使用双括号.但是对于ng-bind。如 <h1 ng-bind="title"></h1>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/
