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

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的自貢網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

問題

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

解答

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

對比幾個已經(jīng)調(diào)試通過的頁面文件，我打開了圖中所示的本頁面配置文件main.json，發(fā)現(xiàn)內(nèi)容如下：

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

而另外通過的頁面的配置文件內(nèi)容如下：

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

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

附加

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

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

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

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

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

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

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

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

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

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

上述內(nèi)容就是Vant Weapp小程序報錯該怎么解決，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。