Taro小程序 与Taro UI,自定义图标

之前都分享了一些基础知识今天就来分享一下最近的技术吧
还是推荐大家用react-hook+ts去写吧
使用钩子编写的话 不需要再添加别的插件什么直接使用就可以了

初始化Taro项目

1：首先全局安装Taro-cli(node版本太低可能会安装不成功，把node升级一下就行 之前文章有写)

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

2：安装好就可以创建我们的小程序了(npm yarn都可以)
$ taro init myApp
安装提示输入域项目介绍，要不要使用typescript,使用css预编译语言等

3：安装成功之后，执行下npm-install就可以了

4：如果是微信小程序运行：

npm run dev:weapp

逐渐开发过程中，会发现程序包过大，不要慌，
执行：

npm run build:weapp

就会发现最终编译的结果只有原来的1/2左右。
项目目录展示（我这边的话已经在开发了 所以有的文件夹已经加进去了）：

image.png

UI组件

组件我选择了官方的Taro UI
传送门https://taro-ui.jd.com/#/
添加过程：

//安装包
$ npm install taro-ui

引用方式：在对应的页面上头部引入需要的组件，然后类似组件写进页面就可了

image.png

• 图标的使用
  在TaroUI原有的基础上加上了一些从阿里巴巴矢量图标库自定义加的图标
  与UI里边自带的图标多了个prefixClass
  添加方式：
  去阿里巴巴矢量图标库找到需要的图标，添加到我的项目生成在线的css copy到对应的项目里

  
  image.png
  

  使用方式
  prefixClass就是字体样式里边定义的.icon ,value就去掉icon-的前缀就行

  
  image.png

image.png

结尾

数据流管理不知道你们用的是什么
我这边用的是dva 具体使用下次分享