注册 登录
2***@qq.com
2***@qq.com
  • 发布：2026-01-23 22:33
  • 更新：2026-01-26 15:18
  • 阅读：166

新版HB打包H5出来的apk我点击上传图片之后，这个弹出来的抽屉里图标的文字缺失

分类：HBuilderX

我的第一版是用去年的HBuilderX打包H5出来的apk，点击上传图片抽屉里图标下方是有文字的
现在HBuilderX更新到最新版了，结果打包H5出来的apk我点击上传图片之后，这个弹出来的抽屉里图标的文字缺失，这是什么情况。

第一张图片是我现在打包apk的效果
第二张图片是我第一版APP的效果

这是我目前的mainfest.json

{  
    "@platforms" : [ "android", "iPhone", "iPad" ],  
    "id" : "xxxxx", /*应用的标识*/  
    "name" : "xxxx", /*应用名称，程序桌面图标名称*/  
    "version" : {  
        "name" : "1.0.7", /*应用版本名称*/  
        "code" : 100  
    },  
    "description" : "基于vue3+supabase开发的xxxxxAPP，日常个人使用", /*应用描述信息*/  
    "icons" : {  
        "72" : "icon.png"  
    },  
    "launch_path" : "index.html", /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/  
    "developer" : {  
        "name" : "", /*开发者名称*/  
        "email" : "", /*开发者邮箱地址*/  
        "url" : "" /*开发者个人主页地址*/  
    },  
    "permissions" : {  
        "Cache" : {  
            "description" : "管理应用缓存"  
        },  
        "Camera" : {  
            "description" : "访问摄像头"  
        },  
        "Downloader" : {  
            "description" : "文件下载管理"  
        },  
        "File" : {  
            "description" : "仅用于读写记账相关的图片文件（如消费小票），不访问音频、视频、文档等其他类型文件"  
        },  
        "Gallery" : {  
            "description" : "访问系统相册"  
        },  
        "Invocation" : {  
            "description" : "使用Native.js能力"  
        },  
        "Storage" : {  
            "description" : "管理应用本地数据"  
        },  
        "Uploader" : {  
            "description" : "管理文件上传任务"  
        },  
        "XMLHttpRequest" : {  
            "description" : "跨域网络访问"  
        },  
        "Webview" : {  
            "description" : "窗口管理"  
        },  
        "NativeUI" : {  
            "description" : "原生UI控件"  
        },  
        "Navigator" : {  
            "description" : "浏览器信息"  
        },  
        "NativeObj" : {  
            "description" : "原生对象"  
        }  
    },  
    "plus" : {  
        "android" : {  
            "requestLegacyExternalStorage" : true,  
            "permissions" : {  
                "READ_EXTERNAL_STORAGE" : {  
                    "description" : "仅读取相册中用户主动选择的记账相关图片（消费小票、截图等），无其他用途"  
                },  
                "READ_MEDIA_IMAGES" : {  
                    "description" : "安卓13 设备仅读取相册图片，用于记账小票上传"  
                },  
                "CAMERA" : {  
                    "description" : "拍摄消费小票图片，辅助用户记账"  
                }  
            }  
        },  
        "splashscreen" : {  
            "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/  
            "waiting" : false /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/  
        },  
        "popGesture" : "close", /*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/  
        "runmode" : "normal", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/  
        "signature" : "xxxxxxxxxxxxxxx==", /*可选，保留给应用签名，暂不使用*/  
        "distribute" : {  
            "apple" : {  
                "appid" : "", /*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/  
                "mobileprovision" : "", /*iOS应用打包配置文件*/  
                "password" : "", /*iOS应用打包个人证书导入密码*/  
                "p12" : "", /*iOS应用打包个人证书，打包配置文件关联的个人证书*/  
                "devices" : "universal", /*iOS应用支持的设备类型，可取值iphone/ipad/universal*/  
                "frameworks" : [], /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/  
                "idfa" : true  
            },  
            "google" : {  
                "packagename" : "", /*Android应用包名，如io.dcloud.HelloH5*/  
                "keystore" : "", /*Android应用打包使用的密钥库文件*/  
                "password" : "", /*Android应用打包使用密钥库中证书的密码*/  
                "aliasname" : "", /*Android应用打包使用密钥库中证书的别名*/  
                "permissions" : [  
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",  
                    "<uses-feature android:name=\"android.hardware.camera\" android:required=\"false\"/>",  
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\" android:required=\"false\"/>"  
                ],  
                "excludePermissions" : [  
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>"  
                ],  
                "abiFilters" : [ "arm64-v8a" ]  
            },  
            /*使用Native.js调用原生安卓API需要使用到的系统权限*/  
            "orientation" : [ "portrait-primary" ], /*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/  
            "icons" : {  
                "ios" : {  
                    "prerendered" : true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/  
                    "auto" : "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/  
                    "iphone" : {  
                        "normal" : "", /*iPhone3/3GS程序图标，分辨率：57x57*/  
                        "retina" : "", /*iPhone4程序图标，分辨率：114x114*/  
                        "retina7" : "", /*iPhone4S/5/6程序图标，分辨率：120x120*/  
                        "retina8" : "", /*iPhone6 Plus程序图标，分辨率：180x180*/  
                        "spotlight-normal" : "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/  
                        "spotlight-retina" : "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/  
                        "spotlight-retina7" : "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/  
                        "settings-normal" : "", /*iPhone4设置页面程序图标，分辨率：29x29*/  
                        "settings-retina" : "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/  
                        "settings-retina8" : "", /*iPhone6Plus设置页面程序图标，分辨率：87x87*/  
                        "app@2x" : "unpackage/res/icons/120x120.png",  
                        "app@3x" : "unpackage/res/icons/180x180.png",  
                        "notification@2x" : "unpackage/res/icons/40x40.png",  
                        "notification@3x" : "unpackage/res/icons/60x60.png",  
                        "settings@2x" : "unpackage/res/icons/58x58.png",  
                        "settings@3x" : "unpackage/res/icons/87x87.png",  
                        "spotlight@2x" : "unpackage/res/icons/80x80.png",  
                        "spotlight@3x" : "unpackage/res/icons/120x120.png"  
                    },  
                    "ipad" : {  
                        "normal" : "", /*iPad普通屏幕程序图标，分辨率：72x72*/  
                        "retina" : "", /*iPad高分屏程序图标，分辨率：144x144*/  
                        "normal7" : "", /*iPad iOS7程序图标，分辨率：76x76*/  
                        "retina7" : "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/  
                        "spotlight-normal" : "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/  
                        "spotlight-retina" : "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/  
                        "spotlight-normal7" : "", /*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/  
                        "spotlight-retina7" : "", /*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/  
                        "settings-normal" : "", /*iPad设置页面程序图标，分辨率：29x29*/  
                        "settings-retina" : "", /*iPad高分屏设置页面程序图标，分辨率：58x58*/  
                        "app" : "unpackage/res/icons/76x76.png",  
                        "app@2x" : "unpackage/res/icons/152x152.png",  
                        "notification" : "unpackage/res/icons/20x20.png",  
                        "notification@2x" : "unpackage/res/icons/40x40.png",  
                        "proapp@2x" : "unpackage/res/icons/167x167.png",  
                        "settings" : "unpackage/res/icons/29x29.png",  
                        "settings@2x" : "unpackage/res/icons/58x58.png",  
                        "spotlight" : "unpackage/res/icons/40x40.png",  
                        "spotlight@2x" : "unpackage/res/icons/80x80.png"  
                    },  
                    "appstore" : "unpackage/res/icons/1024x1024.png"  
                },  
                "android" : {  
                    "mdpi" : "", /*普通屏程序图标，分辨率：48x48*/  
                    "ldpi" : "", /*大屏程序图标，分辨率：48x48*/  
                    "hdpi" : "unpackage/res/icons/72x72.png", /*高分屏程序图标，分辨率：72x72*/  
                    "xhdpi" : "unpackage/res/icons/96x96.png", /*720P高分屏程序图标，分辨率：96x96*/  
                    "xxhdpi" : "unpackage/res/icons/144x144.png", /*1080P 高分屏程序图标，分辨率：144x144*/  
                    "xxxhdpi" : "unpackage/res/icons/192x192.png"  
                }  
            },  
            "splashscreen" : {  
                "ios" : {  
                    "iphone" : {  
                        "default" : "", /*iPhone3启动图片选，分辨率：320x480*/  
                        "retina35" : "", /*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/  
                        "retina40" : "", /*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/  
                        "retina47" : "", /*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/  
                        "retina55" : "", /*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/  
                        "retina55l" : "" /*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/  
                    },  
                    "ipad" : {  
                        "portrait" : "", /*iPad竖屏启动图片，分辨率：768x1004*/  
                        "portrait-retina" : "", /*iPad高分屏竖屏图片，分辨率：1536x2008*/  
                        "landscape" : "", /*iPad横屏启动图片，分辨率：1024x748*/  
                        "landscape-retina" : "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/  
                        "portrait7" : "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/  
                        "portrait-retina7" : "", /*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/  
                        "landscape7" : "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/  
                        "landscape-retina7" : "" /*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/  
                    }  
                },  
                "android" : {  
                    "mdpi" : "", /*普通屏启动图片，分辨率：240x282*/  
                    "ldpi" : "", /*大屏启动图片，分辨率：320x442*/  
                    "hdpi" : "E:/lenovo/Pictures/Bo 牛角/logo/logo2_480x762.png", /*高分屏启动图片，分辨率：480x762*/  
                    "xhdpi" : "E:/lenovo/Pictures/Bo 牛角/logo/logo2_720x1242.png", /*720P高分屏启动图片，分辨率：720x1242*/  
                    "xxhdpi" : "E:/lenovo/Pictures/Bo 牛角/logo/logo2_1080x1882.png" /*1080P高分屏启动图片，分辨率：1080x1882*/  
                },  
                "androidStyle" : "default",  
                "useOriginalMsgbox" : true  
            },  
            "ios" : {  
                "dSYMs" : false  
            }  
        }  
    },  
    "screenOrientation" : [ "portrait-primary" ]  
}

请问如何解决?

相关链接 ：

2026-01-23 22:33 负责人:DCloud_App_Array 分享

没有找到相关结果

    已邀请:
    DCloud_App_Array

    DCloud_App_Array

    首先需要确认页面中“点击上传图片”做了什么操作，是调用什么了5+ API吗？
    请提供可复现问题示例项目。

    2026-01-26 15:18 分享

    • 2***@qq.com (作者)

      我的上传组件是vant代码


      <template>  
      
    <div class="image-upload-container">  
      
        <!-- van-uploader 组件 -->  
      
        <van-uploader  
      
            ref="uploaderRef"  
      
            v-model="fileList"  
      
            :after-read="handleImageRead"  
      
            :before-read="beforeImageRead"  
      
            :max-size="maxSize * 1024 * 1024"  
      
            @oversize="handleImageOversize"  
      
            :max-count="1"  
      
            accept="image/*"  
      
            class="hidden-uploader">  
      
            <template #default>  
      
                <!-- 上传按钮 -->  
      
                <div class="upload-button">  
      
                    <svg viewBox="0 0 24 24">  
      
                        <path  
      
                            d="M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />  
      
                    </svg>  
      
                    <span>添加图片</span>  
      
                </div>  
      
            </template>  
      
        </van-uploader>  
      

      
        <!-- 删除按钮（当有图片时显示） -->  
      
        <div v-if="modelValue" class="image-preview-wrapper">  
      
            <van-button type="warning" size="small" icon="delete" class="delete-image-btn" @click.stop="handleDeleteImage"> </van-button>  
      
        </div>  
      
    </div>  
      
    <p class="upload-hint">支持 JPG、PNG 格式，最大 {{ maxSize }}MB</p>  
      
</template>  
      

      
<script setup>  
      
import { ref } from 'vue'  
      
import { Uploader as VanUploader, Button as VanButton, showLoadingToast, showSuccessToast, showFailToast } from 'vant'  
      
import 'vant/lib/uploader/style'  
      
import 'vant/lib/button/style'  
      
import 'vant/lib/toast/style'  
      
import { message } from '@/utils/message'  
      
import { uploadFile, deleteFile } from '@/service/file'  
      
import Compressor from 'compressorjs'  
      
import { useUserStore } from '@/stores/user'  
      

      
const props = defineProps({  
      
    modelValue: {  
      
        type: String,  
      
        default: ''  
      
    },  
      
    maxSize: {  
      
        type: Number,  
      
        default: 5  
      
    }  
      
})  
      

      
const emit = defineEmits(['update:modelValue'])  
      

      
const fileList = ref(props.modelValue ? [{ url: props.modelValue, isImage: true }] : [])  
      
const uploaderRef = ref(null)  
      
const userStore = useUserStore()  
      

      
// 图片上传前校验  
      
const beforeImageRead = file => {  
      
    const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg']  
      
    if (!allowedTypes.includes(file.type)) {  
      
        message.warning('只支持 JPG、PNG 格式的图片')  
      
        return false  
      
    }  
      
    return true  
      
}  
      

      
// 图片读取与压缩  
      
const handleImageRead = async file => {  
      
    if (!userStore.userId) {  
      
        message.warning('请先到设置页 -> 个人资料 -> 登录')  
      
        return  
      
    }  
      
    if (file instanceof Array) file = file[0]  
      
    file.status = 'uploading'  
      
    try {  
      
        const compressedImage = await compressImage(file.file, 800, 0.6)  
      
        if (!compressedImage) {  
      
            message.error('图片压缩失败')  
      
            file.status = 'failed'  
      
            throw new Error('图片压缩失败，未生成有效文件')  
      
        }  
      
        const result = await uploadFile(compressedImage)  
      
        emit('update:modelValue', result)  
      
        file.status = 'success'  
      
        file.data = result  
      
        fileList.value = [  
      
            {  
      
                url: result,  
      
                isImage: true  
      
            }  
      
        ]  
      
        message.success('图片添加成功')  
      
    } catch (error) {  
      
        file.status = 'failed'  
      
        fileList.value = []  
      
        console.error('图片上传失败:', error)  
      
        message.error(`图片上传失败：${error.message}`)  
      
    }  
      
}  
      

      
// 图片压缩函数  
      
const compressImage = (file, maxWidth, quality) => {  
      
    if (!file) {  
      
        return  
      
    }  
      
    return new Promise((reslove, reject) => {  
      
        // compressorjs 默认开启 checkOrientation 选项  
      
        // 会将图片修正为正确方向  
      
        new Compressor(file, {  
      
            quality: quality, // 设置压缩质量，范围从 0 到 1，默认0.8  
      
            maxWidth: maxWidth,  
      
            maxHeight: 800,  
      
            convertSize: 1000000, // 超过1MB的图片才转换格式  
      
            checkOrientation: true, // 启用 EXIF 方向修正  
      
            success(result) {  
      
                const compressedImage = new File([result], result.name, { type: result.type })  
      
                reslove(compressedImage)  
      
            },  
      
            error(err) {  
      
                reject(new Error(`图片压缩失败: ${err.message}`))  
      
            }  
      
        })  
      
    })  
      
}  
      

      
// 文件过大处理  
      
const handleImageOversize = () => {  
      
    message.error(`图片大小不能超过 ${props.maxSize}MB`)  
      
}  
      

      
// 删除图片  
      
const handleDeleteImage = async () => {  
      
    const loadingToast = showLoadingToast({  
      
        message: '删除中...',  
      
        forbidClick: true  
      
    })  
      

      
    try {  
      
        // 2. 执行删除图片的异步操作  
      
        await deleteFile(fileList.value[0]['url'])  
      
        emit('update:modelValue', '')  
      
        fileList.value = []  
      
        // 3. 关闭加载提示  
      
        loadingToast.close()  
      
        // 4. 显示成功提示  
      
        showSuccessToast('图片已删除')  
      
    } catch (updateError) {  
      
        // 5. 操作失败时关闭加载提示并显示错误  
      
        loadingToast.close()  
      
        console.error('删除图片失败:', updateError)  
      
        showFailToast('删除图片失败')  
      
    }  
      
}  
      
</script>

      2026-01-27 10:04

    • 2***@qq.com (作者)

      没有调用5+ API

      2026-01-27 10:06

    • 2***@qq.com (作者)

      这个是我的apk的下载链接，在github上：https://github.com/guoziyangnb/bookkeeping-app/releases/download/v1.0.7/H5D090EED_0123182629.apk

      2026-01-27 10:27

    • DCloud_App_Array

      回复 2***@qq.com: 截图中的弹出层是怎么实现的？

      2026-01-27 15:03

    评论 取消
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报