Skip to content

OPTIMIZATION_SUGGESTIONS.md

Latest commit

 

History

History
201 lines (165 loc) · 4.4 KB

OPTIMIZATION_SUGGESTIONS.md

File metadata and controls

201 lines (165 loc) · 4.4 KB
Raw

小程序优化建议

1. API 废弃警告修复

问题描述

控制台出现警告：wx.getSystemInfoSync is deprecated

原因分析

这个警告来自于 tdesign-miniprogram 组件库内部使用了已废弃的 wx.getSystemInfoSync API。

解决方案

  1. 升级 tdesign-miniprogram 版本

    npm update tdesign-miniprogram

    当前版本：^1.9.7，建议升级到最新版本以获得API兼容性修复。

  2. 如果升级后仍有问题，可以考虑替换为新的API 虽然这个警告来自第三方库，但可以在项目中避免直接使用 wx.getSystemInfoSync，改用：

    • wx.getSystemSetting() - 获取系统设置
    • wx.getAppAuthorizeSetting() - 获取授权设置
    • wx.getDeviceInfo() - 获取设备信息
    • wx.getWindowInfo() - 获取窗口信息
    • wx.getAppBaseInfo() - 获取应用基础信息

2. 字体加载失败修复

问题描述

控制台错误：Failed to load font 'https://tdesign.gtimg.com/icon/0.3.2/fonts/t.woff'

原因分析

这是 tdesign 图标字体加载失败，可能由于网络问题或CDN访问限制。

解决方案

  1. 使用本地字体文件

    • 下载字体文件到项目本地
    • 修改 tdesign 配置使用本地字体

  2. 升级 tdesign 版本

    npm update tdesign-miniprogram

    新版本可能已修复字体加载问题。

  3. 检查网络配置 在 app.json 中确保允许访问外部域名：

    {
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

3. 数据库索引优化

问题描述

云开发数据库查询缺乏高效索引支持：

db.collection('images').where({ 
  _openid: 'od5hLvlnBKWGT6M9F5GFvM_zb35I' 
})
.orderBy('createTime', 'desc')
.get()

解决方案

  1. 创建组合索引

    • 字段：_openid (升序) + createTime (降序)
    • 可以使用控制台提供的快速创建链接

  2. 删除多余索引

    • 删除单独的 _openid_1 索引（因为组合索引已包含此前缀）

  3. 代码优化建议 在 profile.ts 中的查询可以添加分页和限制：

    // 优化后的查询
db.collection('images')
  .where({ _openid: openid })
  .orderBy('createTime', 'desc')
  .limit(20) // 限制返回数量
  .skip(page * 20) // 分页
  .get()

4. 性能优化建议

1. 图片懒加载

在 index.ts 中实现图片懒加载：

// 使用 Intersection Observer 实现懒加载
const observer = wx.createIntersectionObserver();
observer.observe('.image-card', (res) => {
  if (res.intersectionRatio > 0) {
    // 加载图片
  }
});

2. 缓存优化

// 添加图片缓存
const imageCache = new Map();

loadImage(url: string) {
  if (imageCache.has(url)) {
    return imageCache.get(url);
  }
  // 加载并缓存图片
}

3. 分页加载

// 实现分页加载
loadMoreImages() {
  if (this.data.loading || !this.data.hasMore) return;
  
  this.setData({ loading: true });
  // 加载下一页数据
}

5. 用户体验优化

1. 加载状态优化

  • 添加骨架屏组件
  • 优化加载动画
  • 添加错误重试机制

2. 主题切换优化

  • 添加切换动画
  • 保存用户偏好
  • 跟随系统主题

3. 错误处理优化

// 统一错误处理
handleError(error: any, message: string) {
  console.error(message, error);
  Toast({
    context: this,
    selector: '#t-toast',
    message: message,
    theme: 'error'
  });
}

6. 代码质量优化

1. TypeScript 严格模式

在 tsconfig.json 中启用严格模式：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

2. 代码分割

  • 提取公共组件
  • 使用工具函数
  • 模块化管理

3. 性能监控

// 添加性能监控
wx.reportPerformance(1001, {
  costTime: Date.now() - startTime
});

实施优先级

  1. 高优先级

    • 升级 tdesign-miniprogram 版本
    • 创建数据库索引
    • 修复字体加载问题

  2. 中优先级

    • 实现图片懒加载
    • 添加分页功能
    • 优化错误处理

  3. 低优先级

    • 代码重构
    • 性能监控
    • UI/UX 优化

预期效果

  • 消除控制台警告和错误
  • 提升数据库查询性能 50%+
  • 减少首屏加载时间 30%+
  • 改善用户体验和应用稳定性