关于taro: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 秒内的异步，所以看看还是有不一样的中央的，事件匆忙后续有坑的中央在更新。