Source pre-emptive look: github.com/jdf2e/nutui
NutUI 3.0 website: nutui.jd.com/3x/#/
Small program multi – end adaptation
designed
In the development process of cross-end applets, we found that there was no suitable component library to use, especially in the business of e-commerce mall scenarios, there was no component library conforming to JINGdong App specifications to provide support for our applets project. To fill this gap and make the NutUI component library more accessible to developers, we decided to add applets versatility in NutUI 3.0.
How to fit
Taro has a strong track record in cross-application development, and Taro 3X announced support for Vue3 in November 2020, so we can use Taro + Vue’s technology stack to accommodate multiple applications in small applications.
Taro’s features can be as follows:
– Can convert the native code of wechat small program to wechat platform, Baidu platform, etc.;
-Taro framework is the only one to achieve jingdong mini program adaptation framework;
– React/Vue syntax, better componentization and TypeScript support;
– Industry influence, active community, guaranteed long-term support;
– Support multi-terminal synchronous debugging, can adapt to the mainstream small program
If we can add Taro’s features and capabilities to the NutUI component library, we can realize the dream of NutUI component library cross-development applets. Under the leadership of the team leader, the partners were constantly trying and exploring and refining adaptation methods. There were four points from easy to difficult:
-Taro self-compatibility: Nine existing 3.0 components, including checkbox, Radio, and Steps, can be directly used in Taro.
– Style adaptation: There are some differences between styles and CSS selectors at both ends.
– DOM API differential processing: Different methods of obtaining elements will cause the functions of components on the Taro end to be invalid. DOM acquisition of such components needs to be adjusted.
– Deep adaptation: this is also the biggest part of the work, which needs to call Taro or wechat native capabilities to rewrite the components. For complex components such as picker, swiper and backtop, we need to make a layer of encapsulation based on Taro and others to achieve the purpose of adaptation.
For each component, we have added.taro. Vue files to the original component directory structure to specifically handle taro compatibility. For demo and documentation, we added TAB switching in the official website documentation to facilitate viewing the usage method and corresponding demo in different environments.
Of course, if you want to view the effect in the small program environment, in addition to the official website demo will show the TWO-DIMENSIONAL code, you can also copy our project under mobile-taro vUE directory, you can view the effect after launching.
use
NutUI is introduced, ready to be used in projects.
# Vue3 Project NPM i@nutui /nutui@next -s # Nutui Applets Multiterminal project NPM i@nutui /nutui@taro -sCopy the code
About NutUI 3.0
Technology highlights:
1. Embrace Vue3
Vue3 new features Composition API, Teleport, Emits, etc
Disruptive change, full upgrade
Using combined API Composition syntax reconstruction, clear structure, modular function
Component emits events are extracted separately to enhance code readability
Refactoring mount class components using Teleport’s new feature
2. Upgrade the build tool to Vite 2.x
Ditch WebPack and introduce the next generation of front-end building tools, Vite. The startup speed will be increased from 30s to around 500ms, which will greatly improve development efficiency.
3. Embrace TypeScipt
NutUI 3.0 uses TypeScript as its primary development language to address the difficulty of maintaining and extending components in the context of the soaring complexity of front-end applications.
Comprehensive upgrade of visual experience
NutUI 3.0 reorganizes and designs NutUI components in accordance with the newly released JD App 10.0 specification and in conjunction with numerous retail application scenarios
– Reduce redundant controls
– Help mobile designers quickly reuse basic components
– Establish common detail design standards
– Improve the modularity and versatility of the interface
– Establish basic standards for the connection between design and development
– Improve the efficiency of production and research output docking, reduce output workload
– Build scenes based on JINGdong design language system
– The main process of bone refinement and reconstruction, and the construction of “scene moving line” to make the experience more smooth
The questionnaire survey
In order to provide you with better service, we hope you can spare a few minutes to tell us your feelings and suggestions, and we will keep your information strictly confidential. This survey is a prize survey. Users who complete the questionnaire can extract jingdong Joy peripheral gifts.
Questionnaire link: get.jd.com/#/survey/in…
Questionnaire link: get.jd.com/#/survey/in…
Release time
NutUI 3.0 “Applets for Multiterminal adaptation” is expected to be released on 2021/07/12.
NutUI easy to develop small programs, your heart ❤️, please look forward to ^ O ^!
[click a Star ❤️ to support us.]