如何在taro3.0项目中引用taro-ui以及如何在项目中使用iconfont cdn

前言

因为最近看成都这边越来越多的人开始从vue技术栈，转到react方向。而对于使用vue通过uniapp打包构建微信小程序，h5页面等方式来说，react也有自己独特的一体化多端解决方案

来自强东bb旗下凹凸实验室荣誉出版的taro（泰罗），这名字是真牛皮，哪位仁兄想出来的？小时候肯定看了不少的奥特曼动画

---

搭建taro项目

废话不多说，想要看taro是通过什么造出来的，大家还是去官网慢慢看吧，反正跟微信小程序的差不多（就只是换了名字而已，实现都是差不多的），就是语法大部基于jsx的react写出来的。大家都是组件化开发，何必争来争去的呢？

taro3.0 是凹凸实验室于20年7月左右的样子（想不起来了）出了一个beta版本，就是随便体验一下，像使用taroUI那种，想都别想，用了一大堆奇怪的报错。
现在想看具体使用的就食用下方链接（不过这里按官方安装taroUI使用会有问题，解决方案在后文）：

taro介绍

1. 首先我们安装taro脚手架（注意这里是全局安装，跟安装create-react-app一样）

# 使用 npm 安装 CLI

$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI

$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI

$ cnpm install -g @tarojs/cli

1. 注意事项

值得一提的是，如果安装过程出现sass相关的安装错误，请在安装后重试。

$ npm install -g mirror-config-china

1. 使用命令创建模板项目

$ taro init myApp

这里会让你填入，项目的名称，描述，使用的开发语言等
（如果你不熟悉TSX的话就还是用JSX开发）
模板建议是使用redux（反正大家基本都用这个），当然你会用mobx等其他的状态机当然更好咯！！！

。。。。。。然后就等项目模板搭建好了
搭建好模板之后，就可以从这个地方看起走了

react使用taro

当然taro在3.0也开始支持vue了！！！有兴趣也可以多多学习
其实taro 2.0的文档对于使用react开发介绍的还是比较详细的。

---

使用taro UI

其实这个地方有个超级大坑，因为taro3.0出来后，我一直以为taro UI的文档是跟着taro一起更新的，但是当我照着taro UI的文档照做，并引入组件后，发现报了一大堆TS的错，差不多就是告诉你引入组件错误。于是度娘都要被我看透了，终于最后找到了一个解决方法，其他的根本就是引用2.0时期的解决方案（根本没卵用，字都不带改的）

那个博主的意思大概就是这样的
装taroUI依赖的时候这么安装

# 修改package.json文件，然后执行npm install 安装
# package.json

"dependencies":{
     "taro-ui": "^3.0.0-alpha"
}

如果你不小心跟着文档安装了taro UI的话，就先把node_modules删了，然后把package.json文件中的原taro UI相关删掉，改成上述，重新npm install一下，剩下taro UI使用，css引用就跟文档一样就行了

taroUI快速上手

---

iconfont cdn使用

随着前端大量开始使用各cdn的资源，本地存放一大堆静态文件的时代该说再见了。当然使用iconfont cdn还是有一定坑的，之前3.0beta版本的时候，我在度娘上查阅的方法基本上都没法将iconfont cdn上的资源引入到我本地的taro项目中，更多的还是教你如何在iconfont上下载静态资源引入到项目中。这样就增加了前端项目的大小。在我们写项目中，使用最少的代码，节约资源实现相同功能也是体现能力的一方面

这里推荐一个工具，亲测，巨好用。

taro项目的iconfont脚手架

github地址

这个仓库中有很多使用iconfont cdn的场景
iconfont-cli

---

1. 安装脚手架（这里只需要在项目中安装开发依赖就可以了）

# Yarn
yarn add taro-iconfont-cli --dev
# Npm
npm install taro-iconfont-cli --save-dev

1. 生成配置文件

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

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

{
 "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
 "save_dir": "./iconfont",
 "use_typescript": false,
 "platforms": "*",
 "use_rpx": true,
 "trim_icon_prefix": "icon",
 "default_icon_size": 18
}

这里插入在iconfont建立项目的方式，按下图所示
图一
图二
图三
图四

---

然后到图三去

---

再到本地的项目中

1. 注意事项（这里是个超级大坑）

由于Taro3.0的架构变更，您需要在src/app.config.js下填写一次usingComponents。

// src/app.config.js
import { useGlobalIconFont } from './components/iconfont/helper';
export default {
 usingComponents: Object.assign(useGlobalIconFont()),
}

只有这样你才能真正的将你的icon图标引入到项目中来

1. 生成针对于icon的taro组件

npx iconfont-taro
# 可传入配置文件路径（一般情况就会放到默认的iconfont.json下）
# npx iconfont-taro --config iconfont.json

生成后查看您设置的保存目录中是否含有所有的图标

# 如果你在iconfont cdn上对你的图标有修改操作
# 1. cdn上的链接symbol url会发生改变，你需要把最新的url更新到本地iconfont.json中的symbol_url中
# 2. 然后需要重新执行 
npx iconfont-taro
# 重新在本地项目生成最新的taro组件

1. 使用组件

import React, { Component } from 'react';
import IconFont from '../iconfont';
class App extends Component {
 render() {
 return <IconFont name="alipay" />;
 # 一般iconfont上的名字是带前缀icon-的，可以在iconfont.json 文件中"trim_icon_prefix": "icon",将相应的前缀去掉就好了
 }
}
export default App;

---

更多用法

// 原色彩
<IconFont name="alipay" />
// 单色：红色
<IconFont name="alipay" color="red" />
// 多色：红色+橘色
<IconFont name="alipay" color={['red', 'orange']} size={300} />
// 不同格式的颜色写法
<IconFont name="alipay" color={['#333', 'rgb(50, 124, 39)']} />
// 与文字对齐
<View style={{ display: 'flex', alignItems: 'center' }}>
 <Text>Hello</text>
 <IconFont name="alipay" />
</View>

---

这里在程序跑起来后可能还会报错这样的错误，照下面方式解决就好了

结尾

以上就是使用taro3.0引入taroUI和iconfont cdn资源时可能会踩到的坑。这只是个入门的教程，不知道后面文档还会怎么修改，再看吧，taro3.0才出来没好久，文档有些解释的也不太清楚，还是得自己慢慢去踩坑，遇到了问题解决了，贡献出来，别人才可以少走点弯路。

本来taro在成都这边的市场应用还不是特别广泛，一起打造良好的taro生态，也是每个程序员的责任