小程序公共方法封装(app.js 源码分享)

野性酷女 2022-01-10 04:05 404阅读 0赞

封装一个好的功能集（全局方法库），能更好的保证代码的一致性和工作的高效。

下面是小编经过几次小程序项目经验累计的原创功能集，能满足大部分功能需求。有其它需求望开发者们自行添加和修改

小编还有话说：

1.  request 请求方法未使用 ES6 中的 Promise。大部分情况下都可以不使用 Promise，毕竟真正的多次回调的情况还是少数的。有需求的可自行通过增加Promise来解决。
2.  getElementData 获取元素自定义属性方法是非常非常实用的，在小程序中多多使用 data-\* 是非常有必要的。
3.  请求数据作为最关键的方法，在文章的尾部有源码提供，请往下看哦！

### app.js ###

/**
     * 小程序全局方法参考
     * 作者：helang
     * 邮箱：helang.love@qq.com
     * ＱＱ：1846492969
    **/
    
    App({
        globalData: {
            isIphoneX: false
        },
        onLaunch: function () {
            /* 将是否iphoneX 信息缓存到全局公众数据中 */
            this.globalData.isIphoneX = this.isIphoneX();
        },
        /* iphoneX兼容 */
        isIphoneX() {
            let mobile = wx.getSystemInfoSync();
            if (mobile.model.indexOf("iPhone X") >= 0) {
                return true;
            } else {
                return false;
            }
        },
        /* 常用正则表达式集 */
        regExps: {
            email: /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/,    //邮箱
            mobile: /^(?:1\d{2})-?\d{5}(\d{3}|\*{3})$/,    //手机号码
            qq: /^[1-9][0-9]{4,9}$/,    //QQ
            befitName: /^[a-z0-9A-Z\u4e00-\u9fa5]+$/,    //合适的用户名，中文,字母,数字
            befitPwd: /^[a-z0-9A-Z_]+$/,     //合适的用户名，字母,数字,下划线
            allNumber: /^[0-9]+.?[0-9]$/    //全部为数字
        },
        /*获取元素自定义属性-当前事件元素 */
        getElementData(el, name) {
            if (name) {
                return el.currentTarget.dataset[name];
            } else {
                return el.currentTarget.dataset;
            }
        },
        /*获取元素大小及位置 */
        getElementRect(select, callBack) {
            wx.createSelectorQuery().select(select).boundingClientRect(function (rect) {
                callBack && callBack(rect);
            }).exec();
        },
        /*信息提示 */
        showToast(title = "未知错误，请重试！", icon = "none", duration = 2000) {
            wx.showToast({
                title: title,
                icon: icon,
                duration: duration,
                mask: true
            });
        },
        /*加载提示 */
        showLoading(title = "正在加载") {
            wx.showLoading({
                title: title,
                mask: true
            });
        },
        /*请求地址*/
        requestUrl: "https://wxapi.xxx.com",
        /*发送请求 */
        request(param = {}, successFn, failFn) {
            wx.request({
                "url": this.requestUrl + param.url,
                "method": param.method || "POST",
                "data": param.data || {},
                "success": (res) => {
                    if (res.statusCode == 200) {
                        successFn && successFn(res.data);
                    } else {
                        wx.hideLoading();
                        this.showToast("请求失败，请重试！");
                    }
                },
                "fail": () => {
                    wx.hideLoading();
                    if (failFn) {
                        failFn();
                    } else {
                        this.showToast("网络错误！请重试！");
                    }
                }
            });
        },
        /*上传文件地址*/
        uploadFileUrl: "https://imgupload.xxx.com",
        /* 上传文件
        *  files ： 文件路径
        */
        uploadFile(files, callFn) {
            wx.uploadFile({
                url: this.uploadFileUrl,
                filePath: files,
                name: 'file',
                formData: {	// 这里的数据一般都为固定的，请根据自己的业务需求修改
                    "UserID": '用户ID',
                    "Token": '用户令牌'
                },
                success: (res) => {
                    if (res.statusCode == 200) {
                        callFn && callFn(res.data);
                    } else {
                        wx.hideLoading();
                        this.showToast("上传失败,请重试！");
                    }
                },
                fail: () => {
                    wx.hideLoading();
                    this.showToast("上传失败,请重试！");
                }
            });
        },
        /* 获取上一页路由
         * 这个很重要，处理上一个路由栈
        */
        getPrevPage() {
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            return prevPage;
        },
        /* 关闭当前页面 */
        closePage() {
            wx.navigateBack({
                delta: 1
            });
        },
        /*获取随机数*/
        getRandom(min, max) {
            return Math.floor(Math.random() * (max - min)) + min + 1;
        }
    })

### request 请求方法，使用示例 ###

/* 获取到小程序全局唯一的 App 实例。
     * 建议在 pages/*.js 的头部引用，引用一次多次使用，避免滥用 getApp() 函数
    */
    const app=getApp();
    
    /* 使用全局 request 请求方法 */
    app.request({
        "url":'/list',      // 请求地址，必需的
        "method":"GET",     // 提交方式，默认POST,默认时可省略
        "data":{"a":"1"}    // 提交数据，默认undefined,不需要提交数据时可省略
    },(res)=>{
        //请求成功的回调函数
        console.log(res);
    },()=>{
        //请求失败的回调函数，不需要时可省略
    })

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220109/a5d60b934c2f446ba8bb64462cee73ce.png