Taro3 开发小程序爬坑汇总

最近又回归小程序了，中间已经有一年没有搞过了，taro都到V3版本了(都2021了就别再原生开发了)，汇总一下使用过成中遇到的问题，共大家借鉴。

# Taro3相关的爬坑。
小小吐槽下，框架是升级的够快，文档及配套更新真是慢。
## taro-ui
已经使用了taro3的同学应该发现了，按照官网使用方法引入竟然报错了，怎么办呢？上github上看看吧，github又说明是版本不匹配，地址taro-ui-github，taro-ui 3.x版本正在开发中所以要使用 v3的alpha版本，运行下面的命令即可。

 // npm
 npm install taro-ui@3.0.0-alpha.3 
 // yarn
 yarn add taro-ui@3.0.0-alpha.3 

redux or @tarojs/redux 的替代方案

Taro3版本中使用redux,官方给了一个模板直接是用的react-redux,这个没问题，但是但你想用@tarojs/redux，因为使用上稍微方便点儿。但是当你引入项目时又时报错，又不能用了么？没错V3中将不再维护此库。因为现在又一个更强大，配置简单的库redux-model。
简单对比下旧版的redux

使用redux-model

是不是简洁了很多，省去了繁琐的书写。

原生插件使用

举例html2wxml
1.根目录创建plugins 文件夹，放入需要使用的插件。

2.config 文件夹下的index.js 配置拷贝路径，防止webpack对插件编译。

3.用到的页面增加index.config.js 定义使用的插件

4.在页面中使用

使用字体图标 fontAwesome 或者 iconfont

如果对版本要求不高可以使用 taro-icons 有人做了一版集成了旧版的（fontawesome V4, iconfont） 的图标库，这个也能用，但是打包后你会发现体积最少增加300kb（主要是字体文件体积较大）,这对小程序来说是不能接受的，所以针对字体图标库，建议通过 iconfont 搜索出来需要的，单独下载下来使用。或者设计稿上直接切图解决吧（如果有更好的方案欢迎留言交流）。
对于fontAwesomeV5 版本直接设计切图吧，我用过字体转换网站的方法，转换完成后单独字体文件体积将近10M,直接放弃。

定制主题

考虑到后续会出皮肤切换的功能，所以设计之初就直接选择了scss，来编写css.
用到的文间
1.theme.scss // 住要用来定义主题名称。
2.var.scss // 定制主题颜色变量。
3.themeify.scs // 编写函数，提取主题变量，生成css.

theme.scss

@import './var.scss';

$darkTheme: (
  page_bg_color: $color-dark,
  card_color: #191919,
  card_bg_color: $card_bg_dark,
  card_title_color: $white,
  card_desc_color: $white05,
);

$lightTheme: (
  page_bg_color: $color-light,
  card_bg_color: $white,
  card_title_color: $black,
  card_desc_color: $black05,
);

$themes: (
  dark: $darkTheme,
  light: $lightTheme,
);

var.scss

// 主题主要颜色
$color-dark: #000;
$color-light: #ededed;

// 组件颜色
$card_bg_dark: #191919;

//字体颜色
$black: #000;
$black05: rgba(0, 0, 0, 0.5);
$white: #fff;
$white05: rgba(255, 255, 255, 0.5);
// 其它

themeify.scs

@import './theme.scss';
@mixin themeify($themes: $themes) {
  //$theme-name 主题样式类名， $theme-map样式
  @each $theme-name, $theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    // 小程序部分选择器不支持所以直接使用class类型 如果是网页可以通过body data-theme的属性值  
    // #{}是sass的插值表达式   & sass嵌套里的父容器标识
    .theme-#{$theme-name} & {
      @content; // @content是混合器插槽，像vue的slot
    }
  }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key); //从相应主题中拿到相应key对应的值
}

//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}

具体是用举例

 // index.tsx 只需要改变 theme-light / theme-dark 即可实现深浅两种主题的切换，多种主题可以自由添加。
 return (
  <View classNAme="page theme-light">...</View>
 )
// index.scss
@import '../../style/themeify.scss';
.page {
  @include background-color('card_bg_color');
 }
.title {
    font-size: 32px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    @include themeify {
      color: themed('card_title_color');
    }
  }

ps: 写在最后,一定要去看小程序开发者文档，虽然写的很烂，但是基础的api是一直在变的，做以用的api最好在看下，我只前记得分享不允许一步操作的现在竟然可以支持3秒内的异步，所以看看还是有不一样的地方的，事件匆忙后续有坑的地方在更新。