First UI: A great choice for efficient cross-platform mobile development

introduction

In the field of mobile application development, development efficiency and user experience are the two core elements that developers pay the most attention to. In order to improve development efficiency, many development frameworks and UI component libraries have emerged. This article will focus on introducing a high-quality mobile UI framework - First UI, which is not only highly componentized, reusable and easy to expand, but also supports cross-platform development, which can significantly improve developers' productivity and application quality.

1. Introduction to First UI Framework

First UI is a componentized, reusable, easily extensible, and low-coupling cross-platform mobile UI component library based on uni-app development. It is fully compatible with App-Nvue, App-vue, mini-programs (WeChat, Alipay, Baidu, Byte, QQ) and H5, providing developers with a unified development experience. First UI is committed to helping developers quickly build high-quality, high-performance mobile applications, greatly reducing duplication of work and development costs.

• Document address : https://doc.firstui.cn (currently a vue version example)

2. First UI framework introduction

The First UI framework is committed to meeting the needs of developers under different frameworks. It has currently launched component libraries for uni-app and WeChat mini-program versions. In the future, it will successively launch component libraries for more framework versions, such as Alipay mini-programs, Taro, etc.

• FirstUI UNI version : Developed based on uni-app, it is fully compatible with App-Nvue, App-vue, various mini-programs and H5. It is a highly integrated and flexibly expandable mobile UI component library.
• FirstUI WeChat Mini Program Edition : Designed specifically for WeChat Mini Programs, it natively supports the development specifications of WeChat Mini Programs and provides a wealth of UI components to help developers quickly build WeChat Mini Program applications.
• Official website : https://www.firstui.cn
• Document address :

a. UNI version: https://doc.firstui.cn

b. WeChat Mini Program: https://wxdoc.firstui.cn

3. FirstUI UNI version quick start

Before using First UI UNI version, please make sure you have learned and mastered uni-app. Here are the quick steps to get started:

1. Installation via npm : First, you need to create a uni-app project using vue-cli. Then, run npm install firstui-uni command in the project root directory to install the FirstUI UNI version.
2. By downloading the code : Developers can download the FirstUI code from GitHub or the FirstUI official website, and then copy components/firstui/ directory to their own project.
3. Select the required modules to import : If the developer only needs some components in FirstUI, he can download the FirstUI code, find the required components in components/firstui/ directory and copy them to his own project.

When using FirstUI components, developers can choose to reference and register components in the page, or use the easycom component specification for simplified configuration. Taking the Button component as an example, developers can use it in the following ways:

 // 在页面中引用、注册组件import fuiButton from "@/components/firstui/fui-button/fui-button"; export default { components: { fuiButton } }; // 使用easycom组件规范进行配置（以npm安装为例） // 在pages.json中添加配置"easycom": { "autoscan": true, "custom": { "fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue" } }; // 在页面中使用组件<fui-button text="默认按钮"></fui-button>

4. First UI Open Source Edition and Commercial Edition

First UI is divided into open source version and commercial version. The open source version provides basic UI components, which can meet most development needs. The commercial version provides more advanced components and customized services. You need to become a member to obtain the source code of the V components.

• Membership activation : You can activate membership through the First UI official website and enjoy more advanced components and customized services.
• Copyright constraints : The use of commercial version components must comply with First UI's copyright constraints, and member content will not be published to any public channels.

For detailed membership introduction and copyright restrictions, please refer to the FAQ section of the First UI official website.

5. Application scenario display

FirstUI is suitable for various types of mobile application development scenarios, including but not limited to:

1. Enterprise-level applications : FirstUI can provide enterprises with a unified UI style to enhance brand image and user experience.
2. E-commerce applications : Using FirstUI's rich UI components, developers can quickly build product display, shopping cart, payment and other pages to improve development efficiency.
3. Educational applications : Through customized UI components, FirstUI can enhance the user experience and learning interactivity of educational applications.
4. Social applications : FirstUI provides components such as chat and message notifications to help developers quickly build social functions to meet user needs.

VI. Conclusion

As a high-quality mobile UI framework, First UI provides great convenience for developers with its high degree of componentization, reusability, easy scalability and cross-platform compatibility. Whether it is a uni-app developer or a WeChat applet developer, you can quickly build high-quality mobile applications through First UI. At the same time, the open source version and commercial version of First UI also provide flexible choices for developers with different needs.

In the future, First UI will continue to launch more framework versions of component libraries, continuously optimize and enrich component functions, and provide developers with more comprehensive and efficient mobile development solutions.

I hope this article can help you better understand the First UI framework and play a role in your mobile app development. If you have any questions or suggestions, please leave a message in the comment area and let’s discuss and learn together.

Official website address:

https://www.firstui.cn

Document address:

https://doc.firstui.cn

GitHub address:

https://github.com/FirstUI/FirstUI