当前位置: 首页 > news >正文

原生微信小程序研发,如何对图片进行统一管理?

目标: 统一在配置文件中管理图片,用变量存储,换图标时只需修改链接即可,无需更改业务代码,且方便查找。

tips: 不建议在 asset 中存储大量图片,原因是官方要求小程序内存要限制在2M以内,图片放多了占资源,会扩大包体积。若仅放几个代表性小图标则影响不大。

1. 创建 config/img 文件,放置图片链接,方便统一管理

管理图片的cdn链接(或其他链接,只要能加载出图片即可)

// config/image.js 统一管理图片链接
const IMG_BASE_URL = 'https://cdn.example.com/'; // 云存储基础 URLexport default {// 静态图片(直接使用完整 URL)IELTSImg: 'https://cdn.example.com/2025/07/07/5c238a94de137ee6bcabefbe1e1fd37a.png',defaultLogo:`https://cdn.example.com/2025/07/07/2f32b9151953f0e8caee46b57ac1b3da.png`, // 默认兜底logo// 用IMG_BASE_URL 拼接logos:{logo: `${IMG_BASE_URL}logo.png`,defaultAvatar: `${IMG_BASE_URL}default-avatar.png`,// 动态图片(封装生成逻辑)userAvatar: (userId, size = '100x100') => {return `${IMG_BASE_URL}avatars/${userId}_${size}.jpg?timestamp=${Date.now()}`;},},// 小图标icons: {},
};
2. 在 app.js 中 定义全局变量。

这里全局变量用的 globalData

// app.js
import imgConfig from './config/img.js'
App({onLaunch: function(options) {this.autoUpdate();},globalData: {userInfo: null,imgs: imgConfig, // 图片配置}
})
3. 在页面中引用

方式 1:直接在页面的js文件下引入。需要在每一个要引入的页面加如下代码:

const app = getApp();
const images = app.globalData.imgs;

// pages/home/index.js
// 这两句是核心
const app = getApp();
const images = app.globalData.imgs;
Page({data: {logo: imgs.logo,userAvatar: imgs.userAvatar('user123'),},
});

方式 2:在 WXML 中直接调用(需通过 JS 传递)
如果不想在 JS 中定义 data,可以封装一个工具函数:

// utils/image.js
const getAppImages = () => {const app = getApp();return app.globalData.images;
};export { getAppImages };

这个工具函数可以全局引用。

页面 js 中,引入刚才定义好的工具方法:

// pages/home/index.js
import { getAppImages } from '../../utils/image';
Page({onLoad() {this.images = getAppImages();},
});

页面 wxml 中,使用images变量:


<!-- pages/home/index.wxml -->
<image src="{{images.logo}}" mode="aspectFit" />
http://www.dtcms.com/a/272097.html

相关文章:

  • 从代码生成到智能运维的革命性变革
  • 基于elementUI的el-autocomplete组件的自动补全下拉框实践
  • LFU 缓存
  • Vue2_element 表头查询功能
  • Vue+Element Plus 中按回车刷新页面问题排查与解决
  • pytorch 神经网络
  • 深入理解机器学习
  • 【深度学习新浪潮】什么是持续预训练?
  • 深度学习中的常见损失函数详解及PyTorch实现
  • B2、进度汇报(— 25/06/16)
  • Sigma-Aldrich细胞培养基础知识:细胞培养的安全注意事项
  • Vue 中监测路由变化时,通常不需要开启深度监听(deep: true)
  • 基于Python的旅游推荐协同过滤算法系统(去哪儿网数据分析及可视化(Django+echarts))
  • 《Stata面板数据分析:数据检验、回归模型与诊断技术 - 以NLSW工资研究(公开数据)为例》
  • android studio 运行,偶然会导致死机,设置Memory Settings尝试解决
  • 不止于快:金士顿XS2000移动固态硬盘如何重塑你的数字生活
  • 机器学习1
  • ssh: connect to host github.com port 22: connection refused
  • Web学习笔记2
  • 使用球体模型模拟相机成像:地面与天空的可见性判断与纹理映射
  • 「py数据分析」04如何将 Python 爬取的数据保存为 CSV 文件
  • 基于Python的程序员数据分析与可视化系统的设计与实现
  • 三、神经网络——网络优化方法
  • 线上事故处理记录
  • XMAPP MySQL 启动后自动停止
  • 【实战】Dify从0到100进阶--文档解读(1)开源许可和大模型适配
  • Using Spring for Apache Pulsar:Transactions
  • MySQL断开连接后无法正常启动解决记录
  • 第一次搭建数据库
  • JavaScript 树形菜单总结