gavin/font2pic

Fork 0

Files

douboer 0f5a7f0d85 update at 2026-02-08 18:28:39

2026-02-08 18:28:39 +08:00

4.3 KiB

Raw Blame History

🔍 图标显示问题排查指南

问题现象

微信开发者工具中看不到图标和 logo

📋 排查步骤

Step 1: 检查开发者工具设置

打开微信开发者工具
点击右上角「详情」按钮
选择「本地设置」标签
必须勾选：「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」

Step 2: 查看 Console 日志

打开「Console」面板（底部标签）
点击「编译」重新加载页面
查找以下输出：

========== 图标配置 ==========
icons: {logo: "https://fonts.biboer.cn/...", ...}
logo URL: https://fonts.biboer.cn/assets/webicon.png
============================

如果看不到这些日志：

说明 CDN 配置文件加载失败
检查 /miniprogram/config/cdn.js 文件是否存在

Step 3: 检查 Network 请求

打开「Network」面板
筛选器选择「All」或「Img」
重新编译页面
查看是否有对 fonts.biboer.cn 的请求

如果没有请求：

说明 WXML 中没有正确绑定数据
检查 {{icons.logo}} 语法是否正确

如果有请求但失败：

查看 Status Code（应为 200）
查看错误信息（跨域/域名校验等）

Step 4: 检查图片组件错误

在 WXML 中添加错误处理：

<image 
  class="logo" 
  src="{{icons.logo}}" 
  mode="aspectFit"
  binderror="onImageError"
  bindload="onImageLoad"
/>

在 JS 中添加：

onImageError(e) {
  console.error('图片加载失败:', e.detail)
},

onImageLoad(e) {
  console.log('图片加载成功:', e.currentTarget.dataset)
}

🔧 快速修复方案

方案 A: 使用本地 PNG (临时方案)

如果 CDN 图标始终无法显示，先恢复使用本地 PNG：

// pages/index/index.js 的 data 中
icons: {
  logo: '/assets/icons/webicon.png',
  fontIcon: '/assets/icons/font-icon.png',
  export: '/assets/icons/export.png',
  exportSvg: '/assets/icons/export-svg.png',
  exportPng: '/assets/icons/export-png.png',
  fontSizeDecrease: '/assets/icons/font-size-decrease.png',
  fontSizeIncrease: '/assets/icons/font-size-increase.png',
  chooseColor: '/assets/icons/choose-color.png',
  expand: '/assets/icons/expand.png',
  selectAll: '/assets/icons/selectall.png',
  unselectAll: '/assets/icons/unselectall.png',
  checkbox: '/assets/icons/checkbox.png'
}

删除 CDN 配置的引入：

// 注释掉或删除这行
// const { ICON_PATHS } = require('../../config/cdn')

方案 B: 检查 CDN 配置加载

在 pages/index/index.js 第一行添加：

console.log('开始加载页面模块...')

try {
  const cdnConfig = require('../../config/cdn')
  console.log('CDN 配置加载成功:', cdnConfig)
} catch (error) {
  console.error('CDN 配置加载失败:', error)
}

🎯 常见错误及解决

错误 1: require is not defined

原因：路径错误或文件不存在
解决：确认 config/cdn.js 文件存在且路径正确

错误 2: Cannot read property 'logo' of undefined

原因：ICON_PATHS 没有正确导出或导入
解决：检查 cdn.js 的 module.exports 和引入语句

错误 3: net::ERR_CERT_AUTHORITY_INVALID

原因：HTTPS 证书问题
解决：勾选「不校验合法域名...」选项

错误 4: 图标显示为裂图/叉号

原因：
1. URL 错误（404）
2. 跨域问题
3. 图片格式不支持

解决：
1. 在浏览器中直接访问 URL 验证
2. 检查服务器 CORS 配置
3. 确认小程序支持该格式（PNG/SVG）

📱 测试命令

在终端测试 CDN 是否可访问：

# 测试 logo
curl -I https://fonts.biboer.cn/assets/webicon.png

# 测试图标
curl -I https://fonts.biboer.cn/assets/icons/export.svg

# 应该返回 HTTP/2 200

🚀 最终检查清单

在提交前确认：

微信开发者工具已勾选「不校验合法域名」
Console 中输出了图标配置信息
Network 中看到了对 fonts.biboer.cn 的请求
所有请求返回 200 状态码
图标在页面上正常显示
手机真机预览也能看到图标

💡 下一步

如果以上步骤都检查完毕仍无法显示，请提供：

Console 面板的完整输出
Network 面板的请求列表截图
是否有任何报错信息

4.3 KiB Raw Blame History Unescape Escape