关于uni-app中iconfont引入的mini-program-iconfont-cli的使用问题

且月三十
714 阅读3分钟

问题场景

今天使用uni-app框架开发微信小程序端的时候使用了阿里的字体图标库iconfont，并且还是Symbol格式的，一开始按照iconfont官网给出的使用教程发现会报错并且没有效果，后来看了字体文件中的js源码才知道里面使用的都是浏览器端window的方法，所以最后在小程序中报错，并且后来通过查微信小程序如何使用iconfont才知道需要通过mini-program-iconfont-cli这个插件来转换下，但是不管是GitHub官网还是百度出来的教程都是针对微信小程序的wxml文件使用的，这就导致了在uni-app中多端开发的时候，最后编译到小程序端还是会报错。下面是我使用并解决的步骤

PS:这里只针对微信小程序端发现的问题。其他端因为我没有遇见所以这里的方法适用的可能性不能保证。但你仍然可以借鉴。

下载插件

# Yarn
yarn add mini-program-iconfont-cli --dev

# Npm
npm install mini-program-iconfont-cli --save-dev

生成配置文件

npx iconfont-init

# 可传入配置文件输出路径
# npx iconfont-init --output iconfont.json

此时项目根目录会生成一个iconfont.json的文件，内容如下

{
  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./iconfont",// 注意这个地方后面会说到是一个埋坑点！！
  "use_rpx": false,
  "trim_icon_prefix": "icon",
  "default_icon_size": 18
}

生成iconfont目录文件

# 微信小程序
npx iconfont-wechat

此处如果继续按照官网使用教程应该是如下步骤

在根目录的app.json文件中引入全局图标组件，避免每个page都引入（麻烦）。

// 绝对路径
{
    "usingComponents": {
        "iconfont": "/iconfont/iconfont"
    }
}

但是到了这里就会出现两个问题：

  1. 生成的iconfont目录通过uni-app编译后是不会出现在小程序端的跟目录下的，所以通过上面的usingComponents引入是肯定报错的。

07a1e62d8daf4c730f93ee3d64bce63.png 2. 通过uni-app开发的时候我们是没有app.json文件的，所以该怎么引入。

解决：
我们先解决第一个问题“打包完成后icon无法出现在小程序的根目录”，其实这个问题后来无意间看到自己引入的vant组件库才突然想明白的，既然放在项目中的根目录下没有用，那么就跟vant组件库一样，放在wxcomponents文件下，并且他们都是微信的wxml文件。这样最后打包过后小程序端就可以有这个包了，后面就可以从这个文件夹中引入文件了。

image.png
第二个问题我们就很好解决了，我们在pages,json中，那个页面使用就在哪个页面中的配置文件的usingComponents下引入，但是这个的引入的地址就需要注意一下了，因为我们把文件包引入到了wxcomponents中，所以我们这里的地址应该是"iconfont": "/wxcomponents/iconfont/iconfont"，这里还有个很坑的点就是，当你完成引入之后你仍然发现页面还是没出现icon，我找了半天最后终于在iconfont.json的配置文件中找到解决答案了，这里的save_dir就不能是默认的./iconfont文件夹了，因为我们已经更改了文件夹路径，所以把这里的路径更改成我们刚刚的./wxcomponents/iconfont,然后编译完成，完美解决问题！

最后使用

// 原色彩
<iconfont name="alipay"

...其他使用方法请查看官网

avatar
文章
阅读
粉丝