Taro3|Taro3 开发小程序爬坑汇总 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 ( ... ) // 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'); } }

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