如何在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建立项目的方式,按下图所示
image.png 图一
image.png 图二
image.png 图三
image.png 图四


然后到图三去


image.png
再到本地的项目中
image.png

  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>

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

结尾

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

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

阅读 3.6k
191 声望
148 粉丝
0 条评论
191 声望
148 粉丝
文章目录
宣传栏