ionic中一些常用的方法封装

前言

在ionic1技术栈的开发中中有很多零碎的功能或者服务,通过每次注入的方式都比较麻烦, 所以需要对一些通用的功能进行一些封装(通用的UI封装成指令,通用的逻辑封装成服务) ,下面主要对一些常用功能进行封装,当然这里只是一个引子,针对不同的逻辑业务,有不同或者更多的实践,此处只作为举例,主要代码和相关注释如下:

关键代码和注释

.factory('appUtils', [
    '$state',
    '$ionicViewSwitcher',
    '$ionicNativeTransitions',
    '$ionicHistory',
    '$cookies',
    '$ionicModal',
    '$cordovaInAppBrowser',
    '$cordovaToast',
    '$cordovaKeyboard',
    '$ionicScrollDelegate',
    function ($state, $ionicViewSwitcher, $ionicNativeTransitions, $ionicHistory, $cookies, $ionicModal, 
    $cordovaInAppBrowser, $cordovaToast, $cordovaKeyboard, $ionicScrollDelegate) {
        /* util 构造函数 */
        var Util = function () {
        };

        /* util 原型对象 */
        Util.prototype = {
            /* 通用返回函数 */
            back: function () {
                // 不同平台分别处理,此处使用了ionic-native-transitions插件
                ionic.Platform.isIOS() ? $ionicHistory.goBack() : $ionicNativeTransitions.goBack();
            },

            /* 进入某个路由模块 */ 
            /* 路由的跳转不推荐使用a标签加上相应属性来做,用事件和下面的方法来跳转有效果较好的转场动画 */
            go: function (route, params, callback) {
                $ionicViewSwitcher.nextDirection('forward');
                $state.go(route, params);
                callback && typeof callback === 'function' && callback();
            },

            /* 解决双平台刷新问题的直接进入 tab栏 on-select 时使用 直接进入模块(无动画) */
            doGo: function (url) {
                $ionicNativeTransitions.locationUrl(url, {
                    "type": "fade",
                    "duration": 0
                });
            },

            /* 字符串 trim 函数 */
            trim: function (str) {
                if (typeof str === 'string') {
                    return str.replace(/^\s+|\s+$/g, "");
                }
            },

            /* 截取字符串的方法 */
            textCut: function (str, num) {
                if (typeof str === 'string' && typeof num === 'number' && str.length >= num) {
                    var temp = str.slice(0, num);
                    var last = temp.lastIndexOf(' '); // 找到空格的索引
                    temp = null; // 内存回收
                    return str.slice(0, last) + '...';
                }
                return str;
            },

            /* 此处只演示基于cookie的存储方法 | flag标识: 0 -> ip用户(匿名) , 1 -> 正常用户 */
            /* isLogin为同步存储的登录标识 */
            storage: function (data, flag, callback) {
                var expireDate = new Date();
                expireDate.setDate(expireDate.getDate() + 90); // 设置过期时间为3个月(90天)
                $cookies.put('token', data.token, {'expires': expireDate}); // cookie 存储token
                $cookies.put('user', JSON.stringify(data), {'expires': expireDate}); // cookie 存储 userInfo

                // 下面是为正常用户和匿名ip用户的设置,登录与否的标识是isLogin
                flag ? $cookies.put('isLogin', true, {'expires': expireDate}) : $cookies.remove('isLogin');
                callback && angular.isFunction(callback) && callback();
            },

            /* 判断是否登录 */
            isLogin: function () {
                return $cookies.get('isLogin');
            },

            /* 退出功能 */
            logout: function (fn) {
                $cookies.remove('user');
                $cookies.remove('token');
                $cookies.remove('isLogin');
                fn && typeof fn === "function" && fn();
            },

            /* 获取用户信息 */
            getUser: function () {
                return $cookies.get('user');
            },

            /* 用户提示功能 */
            tips: function (prompt, index) {
                // 位置信息 0 上 , 1 中 , 2 下
                switch (index) {
                    case 0:
                        return window.cordova ? $cordovaToast.showShortTop(prompt) : alert(prompt);
                        break;
                    case 1:
                        return window.cordova ? $cordovaToast.showShortCenter(prompt) : alert(prompt);
                        break;
                    case 2:
                        return window.cordova ? $cordovaToast.showShortBottom(prompt) : alert(prompt);
                        break;
                }
            },

            /* 弹出模态窗口功能 */
            showModal: function (path, scope, animation, cb) {
                $ionicModal.fromTemplateUrl(path, {
                    scope: scope,
                    animation: animation
                }).then(function (modal) {
                    cb && angular.isFunction(cb) && cb(modal);
                });
            },

            /* 隐藏 modal */
            hideModal: function (modal) {
                modal.hide();
            },

            /* 移除 modal 支持多个modal一起移除 */
            destroyModal: function (scope, modal) {
                scope.$on('$destroy', function () {
                    // 如果是单个,则直接移出,如果是数组,则迭代移除
                    if (Array.isArray(modal)) {
                        modal.forEach(function (item) {
                            item.remove();
                        })
                    } else {
                        modal && modal.remove();
                    }
                });
            },

            /* 清除历史记录功能,每次回到tab根目录调用,修复ionic偶尔无法回退bug */
            clearHistory: function () {
                $ionicHistory.clearHistory();
            },

            /* pdf的方法 */
            openPdf: function (url) {
                // 安卓平台进入pdf模块打开,使用的是嵌入了一个pdf的h5网页(后台处理之后的页面)
                if (!ionic.Platform.isIOS()) {
                    return this.go('pdf', {pdf: url});
                }
                // iOS平台通过内置safari打开
                var options = {
                    location: 'yes',
                    clearcache: 'yes',
                    toolbar: 'yes'
                };
                // 下面此处只有真机能够打开,浏览器打不开
                document.addEventListener("deviceready", function () {
                    $cordovaInAppBrowser.open(url, '_system', options)
                }, false);
            },

            /* 测试用户是否登录 */
            checkAndGoLogin: function (cb1, cb2) {
                var flag = this.isLogin();  // 是否登录
                if (flag) return cb1();
                this.go('login', null, cb2);
            },

            /* 数组去重功能 */
            arrayUnique: function (arr) {
                if (!Array.isArray(arr)) return;
                var res = [];
                var json = {};
                for (var i = 0; i < arr.length; i++) {
                    if (!json[arr[i]]) {
                        res.push(arr[i]);
                        json[arr[i]] = 1;
                    }
                }
                return res;
            },

            /* 存储搜索记录 */
            getSearchTextStorage: function (searchText) {
                var searchList = [];
                var res = [];
                if (localStorage.searchList && searchText) {
                    searchList = JSON.parse(localStorage.searchList);
                    searchList.unshift(searchText); // 头部加1
                    res = this.arrayUnique(searchList); // 数组去重
                } else if (!localStorage.searchList && searchText) {
                    res.unshift(searchText);
                } else {
                    return localStorage.searchList ? JSON.parse(localStorage.searchList) : [];
                }
                localStorage.searchList = JSON.stringify(res); // 本地存储
                return res;
            },
            /* 键盘监听 只针对安卓,ios会自动处理 */
            /* 其中window.addEventListener可使用ionic内置的 ionic.EventController.on代替 */
            listenKeyBoard: function (cb_show, cb_hide) {
                if (ionic.Platform.isIOS()) return;
                window.addEventListener('native.keyboardshow', function () {
                    cb_show && typeof cb_show === 'function' && cb_show();
                });
                window.addEventListener('native.keyboardhide', function () {
                    cb_hide && typeof cb_hide === 'function' && cb_hide();
                });
            },

            /* 隐藏键盘 */
            hideKeyBoard: function () {
                if (!$cordovaKeyboard.isVisible()) return;
                $cordovaKeyboard.close();
            },

            /* 媒体文件相关功能 */

            /* 用于判断数字是否 < 10 , < 10 则补0 */
            tenFormat: function (num) {
                return num / 10 < 1 ? '0' + num : num;
            },

            /* 处理时分秒 */
            handleTime: function (hour, min, sec) {
                var hh = this.tenFormat(hour);
                var mm = this.tenFormat(min);
                var ss = this.tenFormat(sec);
                return hh + ':' + mm + ':' + ss;
            },

            /* 获取音频或视频时长 */
            getMediaDuration: function (scope, media, mediaData) {
                if (!media.duration) {
                    return;
                }
                mediaData.current = mediaData.duration = '00:00:00'; // 先初始化时间
                mediaData.durationOrigin = media.duration; // 得到音频或视频时长
                var hh = Math.floor(media.duration / 3600);
                var mm = Math.floor(media.duration % 3600 / 60);
                var ss = Math.floor(media.duration % 60);
                mediaData.duration = this.handleTime(hh, mm, ss); // 得到经过格式转换之后的音频或视频时长
                scope.$apply();
            },

            /* 检查媒体时长 */
            checkToGetMediaDuration: function (scope, media, mediaData) {
                !mediaData.durationOrigin && this.getMediaDuration(scope, media, mediaData);
            },

            /* 处理正在进行的时间 格式为: hh:mm:ss */
            handlePlayingTime: function (time) {
                var hh = Math.floor(time / 3600);
                var mm = Math.floor(time % 3600 / 60);
                var ss = Math.floor(time % 60);
                return this.handleTime(hh, mm, ss);
            },
// 隐藏闪屏
            enterSettings: function () {
                navigator.splashscreen && navigator.splashscreen.hide && navigator.splashscreen.hide(); // 设置闪屏
                window.StatusBar && window.StatusBar.show(); // 显示状态栏
            },

            // 滚动到最顶部方法
            scrollToTop: function (name, flag) {
                $ionicScrollDelegate.$getByHandle(name).scrollTop(flag);
            }
        };

        return new Util();
    }]);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值