小程序拼接图片链接的无底洞，你真的了解吗？

2024-02-08 01:41:47

小程序拼接图片链接无底洞探究

小程序作为一种轻量级应用，深受用户的喜爱。但小程序包大小的限制也给我们带来了挑战，如何将图片等资源托管在 CDN 上，同时保证开发和线上环境的图片链接拼接正确，就成了一个棘手的问题。

问题溯源

在小程序开发中，我们通常会将图片存储在 CDN 上，以减少包大小并提高加载速度。为了在开发测试和线上环境之间切换图片链接，我们需要拼接不同的域名。

例如，我们在开发环境中使用dev.example.com作为 CDN 域名，而在生产环境中使用prod.example.com作为 CDN 域名。当我们从本地代码中拼接图片链接时，代码如下：

const imageUrl = 'https://dev.example.com/' + 'image.png';

在开发环境中，这个链接可以正常工作。但是，当我们切换到线上环境时，图片链接将变为：

const imageUrl = 'https://prod.example.com/' + 'dev.example.com/' + 'image.png';

显然，这个链接是错误的，因为它包含了两个不同的 CDN 域名。结果，图片无法加载，并在控制台中显示“本地不存在”错误。

解决方案

要解决这个问题，我们需要确保在不同环境中拼接正确的图片链接。一种方法是使用小程序提供的wx.setStorageSync()和wx.getStorageSync()API来存储和检索 CDN 域名。

// 在初始化阶段，根据环境设置 CDN 域名
const CDN_DOMAIN = process.env.NODE_ENV === 'development' ? 'dev.example.com' : 'prod.example.com';
wx.setStorageSync('CDN_DOMAIN', CDN_DOMAIN);

// 在需要拼接图片链接时，从存储中获取 CDN 域名
const CDN_DOMAIN = wx.getStorageSync('CDN_DOMAIN');
const imageUrl = 'https://' + CDN_DOMAIN + '/' + 'image.png';