美文网首页
uni-app开发踩坑集合(会持续更新)

uni-app开发踩坑集合(会持续更新)

作者: 二营长家的张大炮 | 来源:发表于2020-06-24 16:37 被阅读0次

    uni-app官网指路

    uni-app开发中的坑

    1.无法覆盖uni-app提供的组件的样式

    直接重写样式会发现并不生效

    编译到H5如果要重置组件样式使用
        >>> .className{
        width:xxx
        }
    
    scss的话 要使用 
        /deep/ .uni-radio-input {
            width: 32upx;
            height: 32upx;
            background: #fff !important;
            border: 2upx solid #CCCCCC !important;
        }
    

    2.ios真机下键盘遮挡住弹框底部部分内容

    rt


    微信图片_20200528115237.jpg
    解决方案

    在pages.json中配置

        {
        "path": "pages/normative-interpretation/normative-interpretation-info/normative-interpretation-info",
        "style": {
            "app-plus":{
                "softinputMode": "adjustResize"
                }
            }
        },
    

    3.uni-app文件上传&多文件上传

    官网文档指路:https://uniapp.dcloud.io/api/request/network-file

    选择文件:

        uni.chooseImage({
            count: 3,
            async success(e) {
            const res = await handleFileButhUpload(e.tempFilePaths)
            if (res) {
                const imgUrls = res.data
                that.imgUrls = imgUrls
            }
        },
            fail(err) {
                uni.showToast({
                icon: 'none',
                title: '图片选择失败,请稍后重试'
                })
            }
        })
    

    单文件(可附带传其他参数)

    export const handleUserAvatarUpload = (id, filePath) => {
        return new Promise((resolve, reject) => {
            uni.uploadFile({
                url: BASE_URL + '/community/xfFile/uploadHeadimage',
                filePath: filePath, // uni.chooseImage函数调用后获取的本地文件路劲
                name: 'file',
                formData: {
                    id
                },
                success: (res) => {
                    resolve(res)
                },
                fail: (err) => {
                    reject(err)
                }
            });
        })
    }
    

    多文件:
    我这边后台接口是要我传files的文件对象,这东西折腾我大半天,在传参的时候碰到过传的file为{},后来我这边对选中的文件做了处理。

    // 处理选中的文件
    export const getFilecalculate = (data) => {
        const newData = [];
        data.forEach((item, index) => {
            newData.push({
                name: 'files',
                uri: item
            })
        })
        return newData
    }
    

    调用官方api

    export const handleFileButhUpload = (filePaths) => {
        const files = getFilecalculate(filePaths)
        return new Promise((resolve, reject) => {
            uni.uploadFile({
                url: BASE_URL + '/community/xfFile/uploadImage',
                files,
                success: (res) => {
                    const newRes = JSON.parse(res.data)
                    resolve(newRes)
                },
                fail: (err) => {
                    reject(err)
                }
            });
        })
    }
    

    相关文章

      网友评论

          本文标题:uni-app开发踩坑集合(会持续更新)

          本文链接:https://www.haomeiwen.com/subject/viarfktx.html