preface

It has been six months since Taro UI was released. Thanks for your support and GitHub 1400+ Star. During this time, we continued to improve the functionality and features of the component library, adding many components and widgets, including but not limited to:

  • Add calendar, index selection, area selection, picture selection and other 11 components
  • Suitable for Alipay small program, Baidu small program
  • Added custom theme function
  • Added theme generator to help developers make better use of custom theme features
  • Added an Issue Helper to help developers fill in issues more formally

The new component

Since the 1.0 release, we have added the following eleven components:

  • View components: page prompt, separator, countdown, curtain, step bar
  • Operational feedback: global information component
  • Forms: Picture selector, area selector, index selector, calendar component, search bar

One of the most popular components in the community is the calendar component. Due to the high complexity of calendar components, it is difficult to adapt to multi-end environment. Looking at the small program UI component libraries on the market, few contain calendar components. However, brother Big Fish of our team carried the burden alone and implemented the component almost perfectly. Let’s hear it for brother Big Fish.

Calendar Component Preview:

Suitable for Alipay small program, Baidu small program

In the 1.0 version of wechat applet, we encountered a lot of difficulties. Such as:

  • Wechat small program custom components use Shadow DOM for rendering, causing the following problems:

    • Components can’t use adjacent selectors. For example, the need for border between components can only be controlled by the developer by adding props
    • There is no way to customize flex layout components, ultimately providing styles for developers to use

  • The WXSS file style applies only to nodes within the Component WXML. The addGlobalClass property is discovered after a lot of exploration. You need to enable the addGlobalClass option in the custom component to make the custom component affected by all the style definitions in the app. WXSS or WXSS of the page.

  • Limits on the use of native components. Because native components are at the highest level outside of the WebView rendering process, the other components in the page cannot be overlaid with any z-index. As a result, modal boxes and other components cannot block input, Textarea and other native components, resulting in penetration effect. Fortunately, the official wechat team has been improving the problem, the introduction of small program native components of the same layer rendering mode. By rendering on the same level, small program native components can be placed on the same level as other built-in components without any special use restrictions. See.

  • RequestAnimationFrame does not support requestAnimationFrame and does not work well with JS animation.

After overcoming the difficulties of the above micro channel small program, the adaptation of Alipay small program and Baidu small program is mostly to solve the differences in style and some APIS. Thanks to Taro’s good support, the adaptation of Taro UI has come to an end.

Added custom theme function

When Taro UI 1.0 was released, there was only a default set of theme colors, and the UI library supported a degree of style customization to meet the diverse visual needs of businesses and brands.

The component styles for Taro UI are written using SCSS. If your project uses SCSS, you can change the style variables for Taro UI directly in your project.

Create a new theme style file (for example, custom-variables.scss) and override the default theme variable:

/ * change theme variable, the variable name to view taro - UI/dist/style/variables/default SCSS document * /$color-brand: #6190E8;/* Import Taro UI default style */ @import"~taro-ui/dist/style/index.scss";
Copy the code

You can then import the above style files into the project’s entry file (without having to reintroduce the component’s default styles).

Currently, we have additional customized JINGdong theme and 7Fresh theme colors, which can be viewed by scanning the qr code below.

Jingdong Theme:

7 fresh topic:

New topic generator

To make it easier for developers to use custom themes, we’ve also added a theme generator. Developers can use this tool to easily customize UI themes.

Nervjs.github. IO/Taro -ui-the… nervjs.github.

Effect preview:

New shoots Helper

Although we configured the Issue Template, some developers did not fill in the Issue according to the specification. We often have to re-ask for version number information, reproduce code, and so on when we troubleshoot problems, which not only consumes our efforts to maintain the project, but also reduces the efficiency of Issue processing. So we took a look at the Ant and iView teams and created an Issue Helper page to help developers fill out issues more formally.

Taro UI Issue Helper address: Nervjs.github. IO/Taro -ui-iss…

In addition, we found that remaking the Issue Helper page was a waste of labor, so we encapsulated the Issue Helper as a command-line tool that developers could simply configure with config.js, The required pages are generated by executing the issue-helper build command.

The Issue Helper tool repository is at github.com/jimczj/issu…

Future plans

  • Adaptation bytedance applet
  • Internationalization i18n

Thank you

Thank you for your use and feedback of Taro UI. We will devote ourselves to building Taro UI into a high-quality component library, constantly enrich the functions and features of components, and follow Taro’s pace to adapt to more platforms.

Finally, you are welcome to follow and use our component library:

Github.com/NervJS/taro…