The whole process record of introducing Vant framework into WeChat applet

Preface

Sometimes I feel that the native UI of WeChat mini-programs is a little bit lacking, so can we introduce a third-party framework? This article takes the introduction of Vant as an example, which includes 8 steps in total. It is used regardless of whether it is a cloud development project or not.

Implementation steps

1. Open the WeChat applet development tool and enter the project. Right click on the root folder of the project. Select Open in Terminal. (Note that it is the root directory)

2. Type npm init in the command window. Then all configurations are performed according to the default configuration, just click the Enter key.

3. Type npm install in the command window to build. If successful, package.json and package-lock.json files will be generated in the root directory.

4. Next, continue to install the Vant framework. The steps can be followed according to the official website vant-contrib.gitee.io/vant-weapp/…

4.1 npm i @vant/weapp -S --production

4.2 npm i vant-weapp -S --production

4.3 Modify app.json

4.4 Modify project.config.json

5. Return to WeChat Developer Tools and find "Build npm" in the "Tools" column. Wait for the build to succeed.

6. Finally, we need to use the npm module. In "Details", find "Use npm module" and check it.

7. Use Vant components and introduce them in app.json or index.json. For details, see Vant official website Quick Start

8. To use it in the page, just import the component directly.

··· Interlude···

Since this is a project built with a test AppId, I did not use cloud development. As a result, an error message is reported after the subsequent steps are completed! The error message is as shown in the figure below (1). It was then that I realized that the project directory was different from the file directory of another cloud-developed project of mine, which resulted in the file not being found. I don’t know the specific reason. But I was successful in the cloud development project, as shown in Figure (2) below; the steps are exactly the same as those written above.

From this we can conclude that everyone should try to use the official AppId (that is, the AppId after successful registration in the Mini Program public platform). Avoid getting into more trouble later.

I originally wanted to use the cloud development project to operate it again and put up the final successful results instead of recording a problematic note. But after thinking about it, this is not a bad idea. It reminds myself not to make this mistake again next time. So finally I present this blog to you all. I hope this can also serve as a reminder for everyone to pay attention to details and not be careless.

··· A magical scene···

The next day I opened the WeChat developer tools and found that the project with the test number AppId was working again, and the console error message was gone. This is very embarrassing! I don’t really understand what’s going on (if anyone knows, please just give me the answer! I’m afraid to speak…). Directly on the picture, as shown below (3);

Figure (1): Error message

Figure (2): Cloud development project successfully using Vant components

Figure (3): Test number AppId successfully uses Vant framework

Summarize

This is the end of this article about introducing Vant framework into WeChat mini program. For more relevant content about introducing Vant framework into WeChat mini program, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!