项目场景:
记录第一次编写uniapp
遇到的报错
注意,我写的是app。
问题描述
新建项目,抄了一个组件,HBuilder X
选择运行到浏览器,F12
发现报错
- 报错信息如下
Uncaught TypeError: Cannot read properties of undefined (reading 'meta')
at uni-h5.es.js:19551:24
at callWithErrorHandling (vue.runtime.esm.js:1309:22)
at callWithAsyncErrorHandling (vue.runtime.esm.js:1318:21)
at ReactiveEffect.getter [as fn] (vue.runtime.esm.js:2938:24)
at ReactiveEffect.run (vue.runtime.esm.js:187:25)
at doWatch (vue.runtime.esm.js:3046:16)
at watchEffect (vue.runtime.esm.js:2858:12)
at useSwitchTab (uni-h5.es.js:19550:3)
at setup (uni-h5.es.js:19497:25)
at callWithErrorHandling (vue.runtime.esm.js:1309:22)
- 报出的警示信息如下
App.vue:4 当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!
onLaunch @ App.vue:4
App.vue:5 App Launch
App.vue:8 App Show
uni-h5.es.js:14220 [Vue warn]: injection "Symbol([vue-router]: route location)" not found.
at <TabBar>
at <Layout>
at <App>
warnHandler @ uni-h5.es.js:14220
uni-h5.es.js:14220 [Vue warn]: Unhandled error during execution of watcher callback
at <TabBar>
at <Layout>
at <App>
warnHandler @ uni-h5.es.js:14220
uni-h5.es.js:14220 [Vue warn]: Unhandled error during execution of setup function
at <TabBar>
at <Layout>
at <App>
warnHandler @ uni-h5.es.js:14220
原因分析:
报错信息如图:
原因很明显,route
不能是undefined
,报错位置发生在自定义的tabbar
中;
那么是谁调用了useSwitchTab
这个方法呢我们找一下。
我稍微往上找了以下,发现是这里调用的
这里是我在pages.json
中的tabbar
配置的数据
很明显,这三个文件我还没创建,所以我报错了。嗯嗯,骂早了不好意思我道歉。
默默地把这几个文件补上,然后重启。
值得一提的是
警示类型的这段代码是app.vue
写不想看就删掉。
App.vue:4 当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!
路径方面看看官网给的示例:
这个示例给你之后,你能用个der,少给你写了点东西
你的像下面这么写
{
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "主页",
"enablePullDownRefresh": true
// "navigationStyle": "custom"
}
}, {
"path": "pages/my/index",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true
// "navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/home/index",
"iconPath": "static/img/tabber/c1.png",
"selectedIconPath": "static/img/tabber/c2.png",
"text": "主页"
}, {
"pagePath": "pages/my/index",
"iconPath": "static/img/tabber/c3.png",
"selectedIconPath": "static/img/tabber/c4.png",
"text": "我的"
}]
}
}
效果