ionic使用的一些技巧

时间:2023-01-22 04:27:45

使用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-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/