Vant Weapp小程序蹲坑之navigateTo:fail page not found
问题
当前调试的小程序中使用了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段中最后一行!
- 微信小程序跳转出现 navigateTo:fail page "pages/index/pages/input/input" is not found
- 微信小程序navigator无法跳转 navigateTo:fail url not in app.json
- 微信小程序-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json
- Solving “javax.naming.NameNotFoundException: Unable to resolve ‘jdbc.SOAAppUserDataSource’ “ with Oracle SOA Suite 11g Adapter S
- Tomcat Manager App--403 Access Denied You are not authorized to view this page
- Unable to instantiate application io.rong.app.App: java.lang.ClassNotFoundException:
- 微信小程序——wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)(2017/12)
- Flask and uWSGI - unable to load app 0 (mountpoint='') (callable not found or import error)
- Weblogic报错:javax.naming.NameNotFoundException: While trying to look up jdbc in /app.;
- An App ID with identifier is not available.Please enter a different string. 或者这样的,fail to code sign
- You third iOS app,解决1The identity used to sign the executable is no longer valid 2.A valid provisioning profile for this executable was not found。
- 【微信小程序】Page not found 错误
- 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)
- Fatal error: Class 'Illuminate\Foundation\Application' not found in /[path_to_laravel_app]/bootstrap/start.php on line 14
- 微信小程序错误:WAService.js 3 navigateTo fail url
- 微信小程序 Page not found 的一个可能原因
- 2016.7.12 Table configuration with catalog null, schema public, and table globalpage did not resolve to any tables(疑)
- Failed to start metasploit.service: Unit metasploit.service not found的解释
- 已解决:无法连接到WMI提供程序。你没有权限或者该服务器无法访问/cannot connect to WMI provider. You do not have permission or the……
- selenium+python自动化88-批量操作循环点击报错:Element not found in the cache - perhaps the page has changed since it was looked up