1. 程式人生 > >Vant Weapp小程序蹲坑之navigateTo:fail page not found

Vant Weapp小程序蹲坑之navigateTo:fail page not found

動態修改 back shadow gate 配置文件 必須 ima 51cto 其他

問題

當前調試的小程序中使用了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小程序蹲坑之navigateTo:fail page not found