This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Sometimes feel micro channel small program native UI poor so a little bit of feeling, then can introduce the three-party framework? This article uses Vant as an example and contains eight steps. This is the same whether it is a cloud development project or not.

Implementation steps

1. Open the development tool of wechat applet and enter the project. Right-click on the project’s root directory file. Select open in the terminal. (Note the root directory)

2. In the command window, type NPM init. Then everything is configured as the default, just hit the Enter key.

3. Type NPM install in the command window to build. After success, package.json and package-lock-

4. Install the Vant framework. For details, see the official websiteVant – contrib. Gitee. IO/vant weapp /…

  • 4.1 NPM i@vant/eapp-s –production

  • 4.2 NPM I vant-app-s –production

  • 4.3 modify the app. Json

  • 4.4 modify project. Config. Json

5. Go back to wechat Developer Tools and find “Build NPM” in the “Tools” column. Wait until the construction succeeds.

6. Finally, we need to use the NPM module. Select “NPM module” in “Details”

7. Use the Vant component to import the component in app.json or index.jsonGet started quickly on Vant website

8. Use it on the page, just import the component directly.

… an episode

Since this project was built with test number AppId, it was not developed in the cloud. Results in the following steps after the operation of an error! Error information is reported as shown in Figure (1); At that time, I found that this project directory was different from the file directory of my other cloud development project, so the file could not be 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 conclusion, we try to use the formal AppId(that is, the AppId registered successfully in the small program public platform). Avoid getting into more trouble later.

The idea was to do it again with a cloud development project and show the results of the final success, rather than write a note with problems. But after thinking about it, it’s not a bad idea to remind yourself not to make this mistake again. So finally, I present this blog to you. I hope it can also serve as a reminder, pay attention to details, don’t be careless.

Amazing scene

The next day, I opened the wechat developer tool and found that the project with the test number AppId was available again, and the error message on the console was gone. This is very awkward! Do not quite understand is how to return a responsibility (if have big guy to know, please take answer to throw me directly! Afraid to speak…) . Directly above, as shown in figure (3) below;

Figure (1) : Error message

Figure (2) : Successful use of Vant components in a cloud-based development project

Figure (3) : Test number AppId successfully using the Vant framework

So the introduction is complete! You are welcome to correct your mistakes