Return to small program again recently, had not been done for a year in the middle, taro to V3 version (2021 do not again native development), summarize the problem encountered in once used into, draw lessons from in all.

# Taro3 related climbing pits. A little fun, the framework is fast enough to upgrade, documentation and supporting updates are really slow. ## taro-UI has already used taro3, it should be found that according to the official website to use the method of error, how to do? The address taro-ui-github is taro-ui-3.x. Taro-ui-3.x is in development. To use the alpha version of v3, run the following command.

// NPM NPM install [email protected] // yarn yarn add file

Alternatives to Redux or @tarojs/ Redux

The Taro3 version uses redux, the official gave a template directly using React -redux, this is OK, but you want to use @Tarojs /redux, because it is a little easier to use. But when you introduce the project and it’s wrong, it’s not working anymore? Yes, the library will no longer be maintained in V3. Because now there is a much more powerful, easily configured libraryredux-model.

Just a quick comparison of the old Redux



Use redux – model



Is it a lot more concise, eliminating the tedious writing.

Native plug-in usage

For example, html2wxml

1. Create a plugins folder in the root directory and place the plugins you want to use.



2. The index.js configuration copy path in the config folder to prevent Webpack from compiling plug-ins.



3. Add index.config.js to the page used to define the plug-in used



4. Use it on the page

Use the font icon FontAwesome or Iconfont

You can use Taro-Icons if you don’t want a version and someone has made a version of Taro-Icons that incorporates an old version of the icon library (FontAwesome V4, Iconfont) and this will also work, However, after packaging, you will find that the volume will increase at least 300KB (mainly because the font file is large), which is not acceptable for small programs. Therefore, it is recommended to search the font icon library through IconFont and download it separately for use. Or the design draft directly cut the diagram to solve it (if there is a better plan welcome to leave a message). For Fontawesomev5 version, I used the method of font conversion website. After the conversion, the size of a single font file was nearly 10M, so I gave it up directly.

Custom theme

Considering that there will be a skin switch function in the future, so I directly choose SCSS at the beginning of the design to write CSS. 1. Theme.scss // This is used to define the name of the theme. 2. Var. SCSS // Customize the theme color variable. 3. Themeify. SCS // Write a function to extract the theme variables and generate 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; // Component color $card_bg_dark: #191919; $black: #000; $black05: rgba(0, 0, 0, 0.5); $white: #fff; $White05: RGBA (255, 255, 255, 0.5); / / other

themeify.scs

@import './theme.scss'; @mixin themeify($themes: $themes) {//$Theme-Name class name, $Theme-Map @each $Theme-Name, $Theme-Map in $themes {//! $theme-map: $theme-map! $theme-map: $theme-map! global; // The selector for the applet part is not supported so you can use the class type. If you are a web page, you can use the body data-theme property value. // #{} is the interpolation for sass & the parent container identifier in the sass nested. @content; // Themed ($Key) {@Theme-map, $Key); // Themed ($Key) {// Theme-map, $Key); // Themed ($color) {@include themeify {background-color: color($color); }}

Specific is to use examples

// index. TSX: Theme-Light/Theme-Dark/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: write in the end, must go to the small developer documentation, although write very bad, but the basis of the API is always changing, do best to use the API in a look, I only remember before sharing is not allowed to step it can support asynchronous within 3 seconds, so see or have different places, events subsequent have pit in the update in a hurry.