ionic使用的一些技巧

Posted 2020-10-04

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