ionic使用的一些技巧

使用ionic总结：

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

2. 在不同的用户输入场景下，需要显示不同的键盘模式以方便用户输入，如在输入邮件时键盘则显示邮件模式等，文本，数子等。

　　在 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就不会遇到这个问题。

原因是，浏览器需要首先加载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使用的一些技巧

相关文章