uni-app PC微信首次加载小程序出现乱码 APP微信端正常

uni-app PC微信首次加载小程序出现乱码 APP微信端正常

开发环境 版本号 项目创建方式
Windows window10 CLI
1.05.2107090
2.23.0
2.0.0-32920211122002 
## 操作步骤：
- PC微信3.6.0.18打开小程序 - 一级页乱码 - 二级页正常

## 预期结果：
- 希望能正常在PC微信运行

## 实际结果：
- PC微信小程序出现乱码，其他端正常

## bug描述：
- PC微信首次加载小程序出现乱码，APP微信端正常
- 主要是首次进入的页面会乱码，二级页面并不会乱码
- 复现平台：PC微信（APP微信端正常）
- 技术栈：uni-app+uview2.0
- 小程序名：各有所爱联播
- 经排查，原因是build:mp-weixin NODE_ENV=production 导致PC微信乱码，dev:mp-weixin NODE_ENV=development并不是出现乱码的情况，猜测脚手架依赖包的原因！！！

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220411/3acf999c5e6348578cd3da59ac26daa6.png)

更多关于uni-app PC微信首次加载小程序出现乱码 APP微信端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

而且体验版和开发版并没问题，只是线上版本有问题，因为小程序基础版本库太低的问题吗？

更多关于uni-app PC微信首次加载小程序出现乱码 APP微信端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


经过研究排查，原因是build:mp-weixin NODE_ENV=production 导致PC微信乱码，dev:mp-weixin NODE_ENV=development并不是出现乱码的情况，猜测脚手架依赖包的原因！！！

体验版跟线上版打包方式是一样的，体验版没问题的话，应该就不是uni-app的bug。可以抓包一下，获取一些信息比较有助于排查问题

经排查，build:mp-weixin NODE_ENV=production 导致PC微信乱码，dev:mp-weixin NODE_ENV=development并不是出现乱码的情况

在 uni-app 开发中，如果 PC 微信首次加载小程序出现乱码，而 APP 微信端正常，可能是由于以下原因导致的。以下是一些可能的原因和解决方案：

1. 字体加载问题

  • 原因：PC 微信小程序可能没有正确加载字体文件，导致显示乱码。

  • 解决方案：

    • 确保字体文件已正确引入，并且路径正确。
    • 使用 @font-face 在 CSS 中定义字体，确保字体文件支持跨域访问。
    • 如果使用自定义字体，建议将字体文件放在 static 目录下，并通过相对路径引用。
    @font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.ttf') format('truetype');
}

2. 编码问题

  • 原因：文件编码不一致可能导致乱码。
  • 解决方案：
    • 确保所有文件（如 .vue、.js、.css 等）的编码为 UTF-8。
    • 在 index.html 中，确保 <meta charset="UTF-8"> 已正确设置。

3. 网络请求问题

  • 原因：PC 微信小程序可能未正确加载某些资源（如 JSON 文件、字体文件等）。
  • 解决方案：
    • 检查网络请求是否正常，确保所有资源都能正确加载。
    • 如果资源跨域，确保服务器已正确配置 CORS。

4. PC 微信小程序的兼容性问题

  • 原因：PC 微信小程序和 APP 微信小程序的运行环境可能存在差异。

  • 解决方案：

    • 在 manifest.json 中，检查是否针对 PC 端进行了特殊配置。
    • 使用条件编译，针对 PC 端和 APP 端分别处理。
    // #ifdef MP-WEIXIN
console.log('微信小程序');
// #endif

// #ifdef H5
console.log('H5 端');
// #endif
回到顶部