我的博客

# 功能封装

# 请求体的封装

import api from '@/api/url.js'

export default {
    common: {
        url: api.url,
        data: {},
        header: {
            'Content-Type': 'application/json'
            // 'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        dataType: 'json'
    },
    request(options = {}) {
        options.url = this.common.url + options.url;
        options.data = options.data || this.common.data;
        options.header = options.header || this.common.header;
        options.method = options.method || this.common.method;
        options.dataType = options.dataType || this.common.dataType;
        options.showLoading = options.showLoading || false
        if (options.showLoading) uni.showLoading({
            title: '加载中...'
        })
        return new Promise((res, rej) => {
            uni.request({
                ...options,
                timeout: 5000,
                success: (result) => {
                    if (result.statusCode != 200) {
                        if (result.data.code !== 200) {
                            wx.showModal({
                                title: '错误提示',
                                content: res.data.message,
                                showCancel: false,
                                confirmText: '确定'
                            });
                            reject(res.data.message);
                        } else res(result.data)
                    } else {
                        let errorMessage = '';
                        switch (statusCode) {
                            case 400:
                                errorMessage = '请求错误';
                                break;
                            case 401:
                                errorMessage = '未授权，请登录';
                                break;
                            case 403:
                                errorMessage = '拒绝访问';
                                break;
                            case 404:
                                errorMessage = `请求地址出错: ${url}`;
                                break;
                            case 408:
                                errorMessage = '请求超时';
                                break;
                            case 500:
                                errorMessage = '服务器内部错误';
                                break;
                            case 501:
                                errorMessage = '服务未实现';
                                break;
                            case 502:
                                errorMessage = '网关错误';
                                break;
                            case 503:
                                errorMessage = '服务不可用';
                                break;
                            case 504:
                                errorMessage = '网关超时';
                                break;
                            case 505:
                                errorMessage = 'HTTP版本不受支持';
                                break;
                            default:
                                break;
                        }
                        wx.showModal({
                            title: '错误提示',
                            content: errorMessage,
                            showCancel: false,
                            confirmText: '确定'
                        });
                        rej(errorMessage)
                    }
                },
                fail: (err) => {
                    rej(err);
                    wx.showModal({
                        title: '错误提示',
                        content: '请求失败：' + err.errMsg,
                        showCancel: false,
                        confirmText: '确定'
                    });
                },
                complete: () => {
                    wx.hideLoading();
                }
            })
        })

    }
}


//在`main.js`中导入
//导入请求体
import $http from '@/api/request.js'

uni.$http = $http

# 提示模态框的封装

//封装提示模态框 (带确认按钮)
export default {
    async showmodel(options = {}) {
        //弹框标题
        options.title = options.title || '提示';
        //弹框提示内容
        options.content = options.content || '提示内容';
        //是否显示取消按钮
        options.showCancel = options.showCancel || true;
        //取消按钮文字
        options.cancelText = options.cancelText || '取消';
        //取消按钮颜色
        options.cancelColor = options.cancelColor || '#5a0501';
        //确认按钮文字
        options.confirmText = options.confirmText || '确认';
        //确认按钮颜色
        options.confirmColor = options.confirmColor || '#FF814A';
        const [err, succ] = await uni.showModal({
            ...options
        })
        if (err) return err
        return succ
    }
}

# 通知消息的封装 （只显示提示）

uni.$showmsg = (title = '请求失败！', duration = 2500) => {
    uni.showToast({
        title,
        duration,
        icon: 'none'
    })
}

# 图片预览

# minix公共部分封装

module.exports = Behavior({
    methods: {
        showimg(index, imgurl) {
            //调用uni.previewImage()方法预览图片
            console.log(index)
            wx.previewImage({
                //预览时默认显示图片索引
                current: index,
                //所有图片的url地址数组
                urls: imgurl
            })
        },
    }
})

# 调用部分


<image src="{{item}}" mode="aspectFill" bindtap="img" data-index="{{index}}"></image>

 //点击预览图片的处理函数
img(value)
{
    let index = value.target.dataset.index
    console.log(value.target.dataset.index)
    this.showimg(index, this.data.comment.comment_img)
}

# 上传图片封装(minix)

# 文件封装

import api from '../../API/Url'
//上传图片的全局混入模块
module.exports = Behavior({
    methods: {
        upimg(url) {
            console.log('调用全局混入弄快成功')
            return new Promise((res, rej) => {
                wx.uploadFile({
                    url: api.apiurl + '/adminFish.php?type=upload',//上传地址
                    filePath: url,
                    name: 'file',
                    success: (result) => {//上传成功得情况
                        if (result.statusCode !== 200) {
                            wx.$showmsg()
                            return rej();
                        }
                        res(result.data)
                    },
                    fail: () => {//上传失败得情况
                        wx.$showmsg()
                    }
                })
            })
        }
    }
})

# 使用

import Showimg from '../../mixin/showimg'

Component({
    behaviors: [Showimg],
})

# 小程序更新机制兼容

autoUpdate: function () {
    // 获取小程序更新机制兼容
    if (wx.canIUse('getUpdateManager')) {
        const updateManager = wx.getUpdateManager()
        updateManager.onCheckForUpdate((res) => {
            // 请求完新版本信息的回调
            if (res.hasUpdate) {
                //检测到新版本，需要更新，给出提示
                wx.showModal({
                    title: '更新提示',
                    content: '检测到新版本，是否下载新版本并重启小程序？',
                    success: (res) => {
                        if (res.confirm) {
                            //2. 用户确定下载更新小程序，小程序下载及更新静默进行
                            this.downLoadAndUpdate(updateManager)
                        } else if (res.cancel) {
                            wx.showModal({
                                title: '温馨提示~',
                                content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问',
                                showCancel: false,
                                confirmText: "确定更新",
                                success: (res) => {
                                    if (res.confirm) {
                                        //下载新版本，并重新应用
                                        this.downLoadAndUpdate(updateManager)
                                    }
                                }
                            })
                        }
                    }
                })
            }
        })
    } else {
        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
    }
}
,
/**
 * 下载小程序新版本并重启应用
 */
downLoadAndUpdate: function (updateManager) {
    wx.showLoading();
    //静默下载更新小程序新版本
    updateManager.onUpdateReady(function () {
        wx.hideLoading()
        //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
    })
    updateManager.onUpdateFailed(function () {
        wx.hideLoading()
        // 新的版本下载失败
        wx.showModal({
            title: '已经有新版本了',
            content: '新版本已经上线，请您删除当前小程序，重新搜索打开',
        })
    })
}
})
上次更新: 3/31/2023, 3:36:19 PM

←