最近又回归小程序了，两头曾经有一年没有搞过了，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秒内的异步，所以看看还是有不一样的中央的，事件匆忙后续有坑的中央在更新。
发表回复