uni-app qq 小程序部分图标显示错误

uni-app qq 小程序部分图标显示错误

示例代码：

<view class="search-form round">  
  <text class="cuIcon-search" />  
  <input  
    placeholder="兴化语记"  
    @tap="toSearchQuizPage()"  
  />  
</view>

操作步骤：

首先保证基本环境一致
克隆仓库 https://github.com/e-dialect/hinghwa-dict-uni-app.git
npm install
npm run dev:mp-qq 开发模式
npm run build:mp-qq 构建模式
通过 qq 开发者工具分别打开这两个模式下编译出来的 dist/dev/mp-qq 和 dist/build/mp-qq，观察主页上的“搜索词语、单字、拼音和文章”所在的bar上的搜索图标是否正确渲染。点击底栏第二个图标，点击“聪明花开”，查看左上角的“返回”图标是否被正确渲染。

预期结果：

dist/build/mp-qq 的图标应该是正常渲染的。

实际结果：

dist/dev/mp-qq 是正常渲染的
dist/build/mp-qq 是错误渲染的，渲染错误的地方被一个空心小矩形替代
就如【bug描述】一栏的附件所示。

bug描述：

QQ小程序开发过程中发现部分图标渲染异常。且异常只出现在build情形下，而在dev模式下是正常的。

见附件的两张图片，标题为“兴化语记”的为dev模式，而标题为“兴化语记-build”的为build模式。

观察到在build模式下，搜索图标和返回图标会变成一个空心的小矩形，而dev模式不会有这个情况。


### 表格

| 信息类型       | 值                   |
|----------------|----------------------|
| 产品分类       | uniapp/小程序/QQ     |
| PC开发环境操作系统 | Windows              |
| PC开发环境操作系统版本号 | Windows11            |
| 第三方开发者工具版本号 | 0.71.2402220.7       |
| 基础库版本号   | 3.0.0-3061820230117001 |
| 项目创建方式   | CLI                  |
| CLI版本号      | 10.1.0               |

更多关于uni-app qq 小程序部分图标显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app qq 小程序部分图标显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发 QQ 小程序时，图标显示错误可能是由于多种原因引起的。以下是一些可能的原因及解决方法：

1. 字体图标未正确引入

  • 原因: 如果使用的是字体图标（如 FontAwesome、Iconfont），可能字体文件未正确引入或路径错误。
  • 解决方法:
    • 确保字体文件已正确引入项目，并且路径正确。
    • 在 app.vue 或 main.js 中引入字体文件：
      import './path/to/your/font.css';
    • 检查字体文件的路径是否正确，确保在 QQ 小程序中能够正常加载。

2. 图标组件未正确使用

  • 原因: 如果使用的是 uni-app 提供的图标组件（如 uni-icons），可能组件的使用方式有误。
  • 解决方法:
    • 确保正确使用 uni-icons 组件，并传入正确的图标类型和大小：
      <uni-icons type="home" size="30"></uni-icons>
    • 检查 uni-icons 组件是否已正确安装和引入。

3. 图标路径问题

  • 原因: 如果使用的是本地图片作为图标，可能图片路径错误或图片未正确加载。
  • 解决方法:
    • 确保图片路径正确，并且图片文件存在于指定路径。
    • 使用相对路径或绝对路径时，确保路径在 QQ 小程序中有效：
      <image src="/static/icon.png"></image>
回到顶部