Recently, I have been developing a small program and used weui. I will record the usage process of weui here.
What is WEUI
WeUI is a basic style library that is consistent with WeChat’s native visual experience.
The WeChat official design team tailor-made the WeChat web pages and WeChat mini-programs to make users’ usage perception more unified.
It was originally an open source style library developed to provide a consistent visual experience on WeChat pages.
Later, as the open capabilities of mini programs, enterprise WeChat, etc. emerged, WeUI also provided versions of mini programs, enterprise WeChat, etc.
What we are going to introduce is the mini program version of WeUI.
Preview
There are many basic components of weui. For details, you can browse the official website of WEUI at https://weui.io/ ; GitHub open source code at https://github.com/Tencent/weui-wxss/ .
For mobile preview, scan the QR code below:
Development tools preview:
For files downloaded from GitHub, there are many files after opening the weui-wxss-master file, but just open the dist file in the developer tools and it will be OK.
Develop using weui
Create a new folder in the project and copy weui.wxss into the folder:
ps:weui.wxssThe file is located in the project dist/styledirectory
Import the weui.wxss file into the project:
It can be introduced globally in app.wxss or in XXX.wxss of a single page.
Introduction method: @import 'thirdparty/weui.wxss';
Use weui components with reference to the examples provided by weui:
You can find the demo of the component you want to use in the example directory and copy the code to your own project.
You’re done!