uni-app使用开发证书打包后真机调试正常，使用上架证书打包后组件样式错乱且字体无法加载

发布于 1周前 作者 vueper 来自 Uni-App

uni-app使用开发证书打包后真机调试正常，使用上架证书打包后组件样式错乱且字体无法加载

操作步骤：

  • 使用开发证书打包自定义基座
  • 使用上架证书打正式包

预期结果：

  • 两个安装包效果一致

实际结果：

  • 使用开发证书打的自定义调试基座正常
  • 使用上架证书打的正式包显示异常

bug描述：

使用开发证书打包后 真机调试正常 使用上架证书打包后 使用TestFlight下载后 同一部的手机 app组件样式错乱 字体无法加载

Image Image

信息类型 内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 window11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 iphone 14 pro
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
6 回复

Apple证书不会影响css代码，应该是其他原因，再找找。 你可以用hello world这种简单工程测试对比下，换证书肯定不影响。


但是我该如何定位问题

请问 我如何才能看到上架证书安装包的调试信息呢

字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。 如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。
参考文档https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule

应该不是字体的问题 应该是其他地方报错导致字体没有加载 问题是我没法看到调试信息

在处理uni-app使用上架证书打包后出现组件样式错乱和字体无法加载的问题时，通常需要考虑证书配置、资源路径以及代码中的相关处理。以下是一些可能的代码案例和解决思路，帮助你排查和解决问题。

1. 检查证书配置

确保你的上架证书配置正确，包括manifest.json中的相关配置。以下是一个配置示例：

"mp-weixin": { // 以微信小程序为例
    "appid": "your-app-id",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true,
    "permission": {},
    "distribute": {
        "android": {
            "keystorePath": "path/to/your/keystore.jks",
            "keystorePass": "your-keystore-password",
            "aliasName": "your-alias-name",
            "aliasPass": "your-alias-password"
        },
        "ios": {
            "mobileprovision": "path/to/your/mobileprovision",
            "certificate": "path/to/your/certificate.p12",
            "certificatePassword": "your-certificate-password"
        }
    }
}

2. 资源路径问题

组件样式错乱和字体无法加载可能与资源路径有关。确保所有静态资源（如字体文件）都使用了相对路径或正确的绝对路径，并且在打包后这些路径仍然有效。

例如，字体加载的代码可能如下所示：

@font-face {
    font-family: 'MyFont';
    src: url('@/static/fonts/myfont.woff2') format('woff2'),
         url('@/static/fonts/myfont.woff') format('woff');
}

body {
    font-family: 'MyFont', sans-serif;
}

注意@/static/是uni-app的静态资源目录别名，确保打包后该路径仍然有效。

3. 条件编译

检查是否有使用条件编译导致某些样式或资源在上架证书打包时被忽略。例如：

/* #ifdef APP-PLUS */
@import "@/static/styles/app.css";
/* #endif */

确保上架证书打包时包含了所有必要的样式和资源。

4. 清理和重建

有时候，简单的清理和重建项目可以解决一些奇怪的打包问题。尝试删除dist目录或相应的打包输出目录，然后重新打包。

5. 日志和调试

查看打包日志和真机调试日志，看是否有更具体的错误信息或警告，这有助于定位问题。

通过上述步骤和代码示例，你应该能够更系统地排查和解决uni-app使用上架证书打包后出现的组件样式错乱和字体无法加载的问题。如果问题依旧存在，建议检查uni-app社区或官方文档，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部