Vant Weapp小程序蹲坑Page is not constructed because it

问题

完整的错误提示应当是“Page is not constructed because it is not found”,对应截图如下:

在纠结了N遍后,发现:dist路径下没有生成.vue.wxml文件!?
正常编译通过的dist路径下应当是生成.vue.wxml文件的,如下所示:

即没有生成index.vue.wxml,其他几个文件都生成了。

从错误的字面意思上分析是“页面没有构造成功,因为没有找到它”。前面二十多个页面都通过了,其基本框架与思路与之一致,而且前面的调试过程中也迈过了不少“坑”——又被一块表面上看上去没有“坑”的地面被挡住了!以前也有过这种情形,这种感觉特别难受,有点“求生不得,求死不能”的“快感”。

初步解决

说是“初步解决”,是我解决了这个问题,但根本的病根还无法最终判定。我的办法是使用了最无奈又最有用的办法——从零开始。其实,这种办法与用注释大块文件内容的思路差不多,但还是有所不同。不过再次真正更体会到下面的名言的分量:

“纸上得来终觉浅,绝知此事要恭行”
不是久经卧雪踏冰从“坑”中滚打出来的程序员恐怕不是什么好程序员吧。

具体做法很简单。我把已经通过的页面对应的三个文件(index.vue main.js main.json)复制到那个出问题的页面对应的文件夹下(此前的三个存在问题的文件先被我转移到了另外一个‘安全’的所在)。
之后,我重新编译运行:通过。切换到小程序开发者工具中测试那个页面——表面上调试通过(其中这三个文件对应的内容根本不是我最终想要的)。
之后,我再小心地把现在无用的内容小心一块一块地删除——只保留必需的框架,然后小心地把三个存在问题的页面的内容一小部分一小部分地复制到现在对应的三个文件中。最终,通过了!!!

你说是哪里的问题?我没有考虑早期调试VC程序时使用的对两个文件进行(使用某种工具)完全比较的办法,只是我先前尽量把屏幕上的文本放大的让人兴奋和“有把握”也没有发现“端倪”。因此,现在的结论也只是初步,有兴趣的朋友可以参考一下:

(1)在WebStorm中使用npm run dev编译通过的所谓“编译通过”坑人不浅,各位须有所警觉——你的代码中可能还有很多很的“坑”;真正在下一步的小程序开发者工具中通过才算是没有问题。

(2)很有可能我在中英文不断切换过程中不小心输入的某些中文字符导致问题,只是JS这边的编译器没有发现?

总之,解决上述问题浪费了不少时间。各位参考一下吧。

最后,顺便说一下,在网络搜索与调试过程中,尽管参考了文后的一些链接,但是根本不是那么回事(我的小程序开发者工具是最新版本的1.02.1901230)。但是,还得感谢这些朋友的一些思路分析。

参考

https://blog.csdn.net/juse__we/article/details/82967264
http://html51.com/info-68971-1/
https://blog.csdn.net/wangxinxinsj/article/details/86589362

原文地址:http://blog.51cto.com/zhuxianzhong/2349388

时间: 2024-11-09 10:06:13

Vant Weapp小程序蹲坑Page is not constructed because it的相关文章

Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题.坑来坑去,先上示例代码吧,由简单到复杂顺序. main.js代码 main.json代码 index.vue代码 <template> <view> <van-panel title="基础用法"> <van-submit-bar :price="3050" button-text="提交订单" @submit=&

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

问题 当前调试的小程序中使用了wx.navigateTo导航方案,运行中出现如题所示错误.初步感觉这种提示再直观不过,但是由于工具使用经验不足,还免不了"浪费"一些时间去搜索问题的根源. 解答 在确定页面及路径的确存在且表达无误后,只好把注意力转移到其他几个相关文件的表达上.已知:在mpvue+vant weapp方案下,一个典型的小程序页面典型包括三个文件,如下图所示: 对比几个已经调试通过的页面文件,我打开了图中所示的本页面配置文件main.json,发现内容如下: { "

Vant Weapp小程序蹲坑之使用checkbox组件

引子 checkbox-group及checkbox组件是开发小程序中频繁使用的组件,当然在vant weapp组件库中对应的分别是van-checkbox-group和van-checkbox.遗憾的是,官方提供的仅是组件在原生微信小程序框架下的用法,但我们所关注的是如何把这些组件改写到mpvue框架中.有关此二组件常用属性,在文后引用地址(官方)都有详细介绍,在此省略. 问题1:数据绑定与模板字符串问题 这个问题困绕了我很长时间,搜索网络,包括google英文搜索,几乎没有找到相应的答案.首

Vant Weapp小程序蹲坑之使用toast组件

问题 使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时,不小心又陷入"坑"中,当然主要还是路径问题. 注意点 使用toast组件时,与其它最普通的Vant Weapp组件相比,有几点需要注意.为了更方便理解,还是先上源码(index.vue),如下: <template> <div> <van-panel title="基础用法"> <van-picker :columns="

微信小程序开发-page.json解析

页面.json用来对本页面的窗口表现进行配置.它只能针对window配置,并且会覆盖 app.json 的 window 中相同的配置项. {?? ???????? ? ????/**?? ????*?以下是页面顶部导航栏设置?? ????**/?? ????"navigationBarBackgroundColor"?:?"[Color]",?//?导航栏背景颜色,默认值:#000000?? ????"navigationBarTextStyle&quo

小程序 mpvue page &quot;xxx&quot; has not been registered yet

新增了几个页面,改了下目录结构,就开始报这个错. 重启了几次不管用,google 一番也无果. 灵机一动试一下 build npm run build build 版本没报错,OK 然后 $ rm -rf dist/* $ npm run dev 至此,没再报错了. 原文地址:https://www.cnblogs.com/hangj/p/11827064.html

美团小程序框架mpvue蹲坑指南

美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人类,...反正我是感受到了满满的恶意. 最近接到一个工程类的小程序项目,做技术选型的时候,又把以前的东西捡起来看了看,重新熟悉了一下, 感觉小程序还是有在努力的,支持大部分es6语法了,还出了一个类Vue的框架wepy,还支持redux状态管理, 就大致建了个demo,跑了起来,感觉虽然没有vue那

逆战:微信小程序开发(二)

一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import { request } from './../../utils/index.js' Page({ /** * 页面的初始数据 */ data: { bannerlist: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { request('/

【小程序】UI组件库

WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. GitHub地址:https://github.com/Tencent/weui-wxss iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本. GitHub地址:https://github.com/TalkingData/iview-weapp 文档:https://weapp.ivi