uniapp app中阿里图标库不能使用

1. 问题描述

在使用uniapp开发app的过程中，使用阿里图标库时发现无法正常使用，出现图标不显示的情况。这篇文章将会介绍该问题的原因以及解决方案。

2. 问题原因

阿里图标库使用了SVG格式的图片进行图标的绘制和渲染。而在uniapp中，SVG图片需要使用svg-icon组件进行显示，而非普通的img标签。因此，如果直接使用阿里图标库的链接地址作为svg-icon组件的path属性值，将会出现无法正常显示图标的情况。

另外，由于uniapp的安全策略，阿里图标库的CDN地址需要进行信任设置才能正常显示。

3. 解决方案

3.1 将SVG图片下载到本地

由于阿里图标库的链接地址无法直接使用，我们可以将图标下载到本地，然后使用本地路径作为svg-icon组件的path属性值。

//下载SVG图片至本地
uni.downloadFile({
    url: 'https://at.alicdn.com/t/font_1111111.svg', //图标库链接地址
    success: (res)=>{
        if(res.statusCode === 200){
            //下载成功后，将路径存储至变量中
            this.iconPath = res.tempFilePath;
        }
    }
})

下载成功后，我们可以在svg-icon组件中使用该路径：

<template>
    <div>
        <svg-icon :path="iconPath"><svg-icon>
    </div>
</template>
<script>
export default {
    data() {
        return {
            iconPath: ''
        }
    }
}
</script>

3.2 进行信任设置

uniapp使用了白名单机制，只有经过信任设置的链接地址才能正常使用。为了使用阿里图标库，我们需要将其CDN地址加入到白名单中。

在项目的manifest.json文件中，我们可以找到app-plus节点下的uniAccess数组，这个数组中存储着所有受信任的链接地址。我们可以将阿里图标库的CDN地址加入到该数组中。

{
    "app-plus": {
        "uniAccess": {
            "service": {
                "api.xxx.com": true //自定义的接口地址
            },
            "webview": {
                "src": [
                    "https://example.com/**", //允许加载的 url
                    "https://at.alicdn.com/**" //阿里图标库的 CDN 地址
                ]
            }
        }
    }
}

4. 结论

阿里图标库在uniapp中无法直接使用，需要将SVG图片下载到本地，或者将阿里图标库的CDN地址加入到信任列表中。通过以上的解决方案，我们可以在uniapp中正常使用阿里图标库，并且在图标的显示效果上与普通的img标签相比，能够得到更好的渲染效果和支持性。