How to solve the error report of Vant Weapp Mini Program

This article shows you how to solve the Vant Weapp Mini Program error report. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

problem

The wx.navigateTo navigation scheme is used in the Mini Program currently being debugged, and the error shown in the title appears in the run. At first, the hint could not be more intuitive, but due to the lack of experience with the tool, it is inevitable to "waste" some time to search for the root cause of the problem.

Solution

After confirming that the page and path do exist and express correctly, we have to turn our attention to the expression of several other related documents. Known: under the mpvue+vant weapp scenario, a typical Mini Program page typically consists of three files, as shown in the following figure:

Comparing several page files that have been debugged, I open this page configuration file main.json shown in the figure and find that the contents are as follows:

{"navigationBarTitleText": "Popup pop-up layer", "van-button": "/ static/vant/button/index", "van-popup": "/ static/vant/popup/index"}

On the other hand, the content of the configuration file of the additional page is as follows:

{"usingComponents": {"van-button": "/ static/vant/button/index", "van-tree-select": "/ static/vant/tree-select/index"}}

Obviously, the problem lies in the omission of usingComponents content, and after adding it, the problem is solved!

Append

According to WeChat Mini Programs's official document (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)

It describes the use of the configuration file .json in the custom component, especially the instructions for using usingComponents, but it is not detailed yet.

When running the modified results above, take a closer look and find that the content of the title bar above the page has not been changed to "Popup pop-up layer". Further investigation and analysis shows that in this example, I dynamically load and navigate the page through wx.navigateTo, and the modification of the title bar of the entire Mini Program side requires additional logic, one of the typical scenarios is:

(1) make changes in the entire Mini Program configuration file app.json. First, take a look at the contents before the modification:

{"pages": ["pages/index/main", "pages/logs/main", "pages/counter/main", "pages/button/main"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

Here are two things to pay attention to. First, the pages segment represents the page file name and path that the static Mini Program can locate (the first page must be in the first place)

. Second, the navigationBarTitleText in the window section statically specifies the content of the Mini Program title bar, which can be dynamically modified by API in practice.

What needs to be added is:

If there are many pages, you don't need to enumerate all the pages in the pages section, but the first home page must be displayed here. For others, you can use an API such as wx.navigateTo to dynamically load the corresponding page path.

Second, modifying the Mini Program title bar can also be achieved by using the navigationBarTitleText field in the configuration file corresponding to the partial page above. However, you should not only add the navigationBarTitleText field to the above page configuration file main.json, but also specify the corresponding page file name and path in the pages section of the entire Mini Program configuration file! So there are two changes:

Add the navigationBarTitleText field to the partial page configuration file main.json:

{"navigationBarTitleText": "Popup pop-up layer", "usingComponents": {"van-button": "/ static/vant/button/index", "van-popup": "/ static/vant/popup/index"}}

The pages section of the entire Mini Program configuration file specifies the corresponding page file name and path:

{"pages": ["pages/index/main", "pages/logs/main", "pages/counter/main", "pages/popup/main"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

Notice the last line in the pages paragraph above!

The above content is how to solve the Vant Weapp Mini Program error report. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.