foreword
When we develop WeChat applets, designing and implementing a user interface is undoubtedly a crucial step. However, the official UI component library of the WeChat applet cannot meet many usage scenarios. At this time, we need to use some third-party UI component libraries. As an excellent front-end UI component library, vant Weapp can help us quickly build beautiful and easy-to-use interfaces. In this article, I will introduce how vant Weapp is installed and used in WeChat Mini Programs, and how it helps us build high-quality WeChat Mini Programs.
Steps for usage
1. Open a terminal window
In the WeChat developer tools, right-click and select "Open in an external terminal window" , the specific operation is as follows:
2. Initialization
Enter the command to initialize the project to generate
package.jsonthe package . If the following picture appears, let you choose and press Enter all the way. Of course, you can alsonpm init -yinstall it in the form of . The specific operation is as follows:
Remarks: -y You can simply understand the meaning yesof , which saves the cumbersome steps of pressing Enter during initialization. You can choose which installation method according to your needs.
npm init
npm init -y
2. Installation dependencies
In the command window that opens, enter the following commands one by one, as shown in the figure below:
//直接安装
npm i --production
npm i vant-weapp -S --production
//淘宝镜像安装
cnpm i --production
cnpm i vant-weapp -S --production
4. Modify the app.json file
app.jsonRemove from the file"style": "v2", because the new version of the basic component of the applet has added many styles forcibly, which is difficult to cover, and if it is not removed, it will easily cause confusion in the style of some components. As shown below:
5. Build npm
Find "Tools" → "Build npm" in the upper left corner of the WeChat developer tool, and then find "Details" → "Use npm module" in the upper right corner of the WeChat developer tool. picture:
6. Use
When
vant Weappcalling ,app.jsonjust add the configuration in the file, of course, you can also choose to import it on demand and configure it injsonthe file , as shown in the following figure:
- Global configuration introduction -----
app.json
Global import only needs to import components in the app.jsonconfiguration usingComponentsoption, and the imported components can be used in all pages. The disadvantage of this method is that it will put pressure on the project. It is recommended to use global import when a component needs to be used on many pages
"usingComponents": {
//需要组件引入即可
"van-button": "./miniprogram_npm/vant-weapp/button/index"
}
- Local configuration introduction -----
index.json
Partial import needs to be configured in the page's jsonfile usingComponents. This method of introducing components on demand can greatly reduce the pressure on the project, but the disadvantage is that only the current page can use the component, and other pages cannot use it.
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
Prompt class components use
You may be more curious, why should the components of the prompt class be taken out separately? This is because the use of prompt components is slightly different from the use of buttonthese components, and you will encounter problems if you are not careful. Next, I will operate it for you according to the official document, as shown in the figure below:
Here I bind a click event to the button, that is, a light prompt will appear after clicking the button
when i click the button
It can be clearly seen that the event trigger light prompt we wrote did not trigger, and even the console reported an error. Why is this?
After carefully reviewing the official documents, I found that there is such a piece of code in similar component documents, which requires us to introduce or add additionally.
jsAfter importing in andwxmladding the relevant code in the file
Summarize
WeChat Mini Program is an emerging application form, in this application, vant Weappthe framework can help developers quickly complete the Mini Program page. At the same time, vant Weappthrough the feedback and adjustment of a large number of actual projects, the effect of in-depth customization has been achieved, which can help small program developers to reduce a lot of work burden, so that they can focus more on the realization of business logic, and also provide small program developers with a very good development experience. . In practical applications, we can deeply tap the internal potential of vant Weappthe component library and combine it with business needs to achieve more efficient and intelligent small program development. Finally, the official address of vant Weapp is attached . Interested students can go to the official website to learn more.