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

Posted 2021-02-08

问题

当前调试的小程序中使用了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段中最后一行！