JD Vue3 component library supports the detailed process of mini program development

Source code preview: https://github.com/jdf2e/nutui

NutUI 3.0 official website: https://nutui.jd.com/3x/

Mini Program Multi-Terminal Adaptation

Design Intentions

During the development of the cross-terminal mini program, we found that there was no suitable component library to use. Especially when doing business in e-commerce mall scenarios, there was no component library that met the JD App specifications to support our mini program project. In order to fill this gap and make the NutUI component library more convenient for more developers, we decided to add the ability of mini-programs to multiple terminals in NutUI 3.0.

How to adapt

Taro has outstanding performance in cross-terminal development of mini programs. Taro 3x also announced support for Vue3 in November 2020, so we can use the Taro + Vue technology stack to achieve the goal of adapting to multiple terminals in mini programs.

The characteristics of Taro can be as follows:

- Can realize the conversion of WeChat applet native code to WeChat platform, Baidu platform, etc.;

- Taro framework is the only framework that can be adapted to JD.com mini programs;

- Support React/Vue syntax, better support componentization and TypeScript;

- Great industry influence, active community, and guaranteed long-term support;

- Supports multi-terminal synchronous debugging and can adapt to mainstream applets

If these features and capabilities of Taro can be added to the NutUI component library and their functions can be connected, the dream of developing mini-programs across the NutUI component library can be realized. Under the leadership of the team's experts, the team worked tirelessly, conducted repeated attempts and explorations, and refined the adaptation methods, which are as follows from easy to difficult:

- Taro self-compatibility: 9 existing 3.0 components such as checkbox, radio and steps can be used directly in Taro.

- Style adaptation: There are some differences in the styles and CSS selectors at both ends, which need to be handled in a targeted manner.

- Differentiated processing of DOM API: Different methods of obtaining elements will cause the function of the component on the Taro side to fail. For such components, adjustments need to be made at the DOM acquisition level.

- Deep adaptation: This is also the largest part of the workload, which requires calling Taro or WeChat native capabilities to rewrite components. For components with more complex interactions such as picker, swiper and backtop, we need to make a layer of encapsulation based on Taro to achieve the purpose of adaptation.

For each component, we added a .taro.vue file to the original component's directory structure to specifically handle Taro compatibility. For demos and documents, we have added tab switches to the official website documents to facilitate viewing the usage methods and corresponding demos in different environments.

Of course, if you want to view the effect in the mini program environment, in addition to the official website demo that displays the QR code, you can also copy the vue directory under mobile-taro in our project and view the effect after starting it.

How to use

Import NutUI and use it in your project.

# Vue3 project npm i @nutui/nutui@next -S

# NutUI applet multi-terminal project npm i @nutui/nutui@taro -S 

About NutUI 3.0

Technical highlights:

1. Embrace Vue3

Introducing new features of Vue3: Composition API, Teleport, Emits, etc.

Disruptive changes, comprehensive upgrades

Refactored using the Composition API syntax, with clear structure and modular functions

Component emits events are extracted separately to enhance code readability

Refactoring Mounting Components Using Teleport's New Features

2. Build tools upgraded to Vite 2.x

Deprecate webpack and introduce Vite, the next-generation front-end building tool. The startup speed is increased from 30s to about 500ms, which will greatly improve development efficiency.

3. Use TypeScipt Fully

NutUI 3.0 uses TypeScript as the main development language to address the problem of components being difficult to maintain and expand against the backdrop of the soaring complexity of front-end applications.

Comprehensive upgrade of visual experience

NutUI 3.0 is based on the latest JD App 10.0 specification and combines the various retail application scenarios to reorganize and design NutUI components.

- Reduce redundant controls

- Help mobile designers quickly reuse basic components

- Establish common detail design standards

- Improve the modularity and universality of the interface

- Establish basic standards for design and development docking

- Improve the efficiency of production and research output docking and reduce output workload

- Build scenarios based on JD.com’s design language system

- Refine the skeleton to reconstruct the main process and build a "scene moving line" to make the experience smoother

Questionnaire survey

In order to provide you with better service, we hope you can take a few minutes to tell us your feelings and suggestions. We will keep your answers strictly confidential. This is a prize-winning survey. Users who complete the questionnaire can draw a prize for JD Joy peripheral gifts.

Questionnaire link: https://get.jd.com/

The above is Jingdong Vue3 component library supporting mini program development! For more details about Jingdong Vue3 component library, please pay attention to other related articles on 123WORDPRESS.COM!