Vant Weapp小程序報錯該怎么解決

本篇文章為大家展示了Vant Weapp小程序報錯該怎么解決，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

問題

當前調試的小程序中使用了wx.navigateTo導航方案，運行中出現如題所示錯誤。初步感覺這種提示再直觀不過，但是由于工具使用經驗不足，還免不了“浪費”一些時間去搜索問題的根源。

解答

在確定頁面及路徑的確存在且表達無誤后，只好把注意力轉移到其他幾個相關文件的表達上。已知：在mpvue＋vant weapp方案下，一個典型的小程序頁面典型包括三個文件，如下圖所示：

對比幾個已經調試通過的頁面文件，我打開了圖中所示的本頁面配置文件main.json，發現內容如下：

{
  "navigationBarTitleText": "Popup 彈出層",
    "van-button": "/static/vant/button/index",
    "van-popup": "/static/vant/popup/index"
}

而另外通過的頁面的配置文件內容如下：

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

顯然，問題出在前面漏掉了usingComponents內容，添加上后，問題得到解決！

附加

根據微信小程序官方文檔（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/），
其中介紹了自定義組件中配置文件.json的使用，特別是有關usingComponents的使用說明，但是尚不詳細。

在運行上面修改后結果時，仔細觀察發現頁面上面標題欄內容并沒有改變成“Popup 彈出層”。進一步追究分析發現，我在本例中是通過wx.navigateTo動態加載與導航的頁面，而整個小程序端標題欄的修改需要另外的邏輯，其中一種典型的方案是：

（1）在整個小程序配置文件app.json中進行修改，先看一下修改前的內容：

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

這里有兩個需要注意。第一，pages段代表了靜態的小程序能夠定位到的頁面文件名及路徑（第一個頁面必須位于首位）
。第二，window段中的navigationBarTitleText靜態在指定了小程序標題欄的內容，這個內容在實際運行中可以通過API方式動態修改。
需要補充的是：
如果頁面很多，則不需要全部列舉頁面于pages段中的，但是第一個主頁必須顯示于此。其他的，可以使用例如wx.navigateTo這樣的API動態加載對應的頁面路徑即可。
第二，修改小程序標題欄其實也可以使用上述對應于局部頁面的配置文件中的navigationBarTitleText字段來實現。但是，不僅要在上面的頁面配置文件main.json中添加navigationBarTitleText字段，而且還要在整個小程序配置文件的pages段指定對應的頁面文件名及路徑才行！于是修改有兩處：

局部頁面配置文件main.json中添加navigationBarTitleText字段：

{
  "navigationBarTitleText": "Popup 彈出層",
  "usingComponents": {
    "van-button": "/static/vant/button/index",
    "van-popup": "/static/vant/popup/index"
  }
}

整個小程序配置文件的pages段指定對應的頁面文件名及路徑：

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

注意上面pages段中最后一行！

上述內容就是Vant Weapp小程序報錯該怎么解決，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。