How to install and use UI component library in mini program

This article will share with you a mini program practical development practice, and introduce the method of installing and using the UI component library in the mini program. I hope it will be helpful to everyone!

The basic skills of small program development were introduced earlier, such as Page development, Component development, Cloud development, etc., these are all at the functional level. In this article, we will introduce the UI level skills of small program development in a separate lecture, that is, using the UI component library. [Related learning recommendations: 小program development tutorial]

The benefits of using the UI component library are self-evident. It can unify the overall UI style of our small program and at the same time greatly save development time. Program time. Because for many complex functional components, it is time-consuming to implement them yourself, and it is easy to have various functional defects.

Practice

Next we will take the vant UI component library as an example to introduce how to use the UI component library to improve small programs. Development efficiency.

Install the component library

The first step in using the component library is to integrate the component library into our existing applet.

First, we select the Terminal panel in the developer tools and create a new terminal. The terminal here uses the terminal that comes with your computer, such as the command line in the Window system. Or Terminal under MacOS.

Then enter npm -v in the terminal to check whether the npm tool is installed on the current computer. The npm tool is used for downloading The network software package tool belongs to Nodejs. If there is no npm on your computer, you can first download nodejs and complete the installation. After installation, npm will be included.

When the computer has npm, we can use it to download the vant software package to our mini program project. For specific steps, refer to vantQuick Start Documentation Just do it.

After the first step is successful, you should see something similar to the picture below

In the second step, we follow the instructions and ##style:v2 of #app.json is deleted

In the third step, we follow the instructions and modify

project.config .json is as follows

One problem here is that if you are a pure small program project, the

package.json file does not exist at first , so the package.json file pointed to in this configuration will not be found.

We can use the

npm init -y command to create one manually. The results are as follows

Because we do it before creating package.json npm package installation, so you need to re-execute

npm i @vant/weapp -S --production to ensure that the dependencies item in the package.json file has @vant/weapp.

The fourth and final step is to use

Tools-Build npm in the menu bar at the top of the developer tools to build the npm package we installed. Sometimes an error will be reported. This is because the new version of mini program development, as stated in the vant documentation, the parsing directory for npm packages by mini programs has now become miniprogram_npm.

So we need to follow the instructions to add

miniprogramNpmDistDir under packNpmRelationList in project.config.json The item is modified to ./, as shown in the figure below.

Then we re-use the developer tools to build npm. After completion, you can see the following picture, and

miniprogram_npm## is automatically added to the mini program directory. #This directory is dedicated to managing all npm packages.

The experience here is that the rules for mini program development may be updated. When integrating third-party tools with them, flexible configuration adjustments need to be made based on the actual situation.

Component library usage

After installing the component library, we can start using all the components in the component library. First, let us transform the previous search input box and use the search component provided by vant.

The way to use the UI component library is the same as the way to use our own developed components. Both of them must first declare the components to be introduced in the json file

vant's documentation also provides the reference method of each component, we can just follow its instructions.

Remember to manually click compile after modifying the json file to take effect. Unlike wxml and wxss file modifications, modifications will take effect in real time through the hot reload function.

In addition, for components such as the search component, its properties contain the binding of variable values, that is, value, which corresponds to the search box The input content, so we need to declare a variable in the js file to store this value to receive the input content in the search box.

In this way, we have completed the transformation of the search box and practiced the use of the UI component library.

Next, we can read the vant documentation and greatly speed up the development of many functions by combining existing components in various component libraries.

Summary

In this article we introduce how to use existing UI component libraries to improve the efficiency of our small program development, mainly installationanduse Two steps. In the next article, we will combine the powerful capabilities of the vant component library to complete the functional implementation of a complete homepage.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to install and use UI component library in mini program. For more information, please follow other related articles on the PHP Chinese website!