Ionic之監測網絡連接

今天發現目前的app項目還沒有對網絡連接做處理,於是研究了一下。趁現在搞定趕緊記錄下來
在ionic中,我們需要用到codovaNetwork,這個插件輸入如下命令引入:

cordova plugin add cordova-plugin-network-information

接下來放入我剛寫的代碼:

document.addEventListener('deviceready',function(){
            $rootScope.isOnline = $cordovaNetwork.isOnline();
            // 監聽手機網絡在線事件
            $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
                $rootScope.isOnline = true;
            })
            // 監聽手機網絡離線事件
            $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
                $rootScope.isOnline = false;
            })
            //監聽isOnline的變化,如果是離線,則點擊button出現離線提示
            $scope.$watch('isOnline',function(newValue,oldValue,scope){
                console.log($rootScope.isOnline);
                $scope.email = function(){
                    if($rootScope.isOnline){
                        $state.go("register.re-email");
                    }else{
                        $scope.warnShow = "warnShow";
                        $timeout(function(){
                            $scope.warnShow = "";
                        },3000)
                    }
                }

                //點擊出現facebook登錄模態框
                $scope.showFbModal = false;
                $scope.openFbModal = function(){
                    //如果手機是在線,則button可任意點擊
                    if($rootScope.isOnline){
                        $scope.showFbModal = true;
                        $scope.slideUp = "slideUp";
                    }else{
                        $scope.warnShow = "warnShow";
                        $timeout(function(){
                            $scope.warnShow = "";
                        },3000)
                    }
                }
            })

注意在控制器中引入 rootScope, scope,$cordovaNetwork這幾個對象,
如下是我的當前頁面:
這裏寫圖片描述
當我的手機沒有網絡時,點擊圖中兩個button會出現如下的提示框:
這裏寫圖片描述
當我的手機有網絡時,點擊的”login with facebook ”,會是如下效果:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章