微信小程序在手机上预览(真机调试)，存在页面空白问题
版本 "@vant/weapp": "^1.11.1"
在微信开发者工具中：页面显示正常 
手机上效果：使用手机预览 (含真机调试、分享二维码给他人预览) 都存在页面空白问题，报错如下
手机预览是100%会存在页面空白的情况，真机调试有70%以上的的可能性存在页面空白。 (这里说的是部分页面)
- 报错原因如下：
尝试解决方案
为啥之前的小程序，在手机上预览，没有页面空白的问题呢？
- 尝试1：切换 vant-weapp的版本，降低到 1.9.2 // 依然存在问题
- 尝试2：切换一下基础库，调低一下 // 还是存在问题
备注：我只尝试了几个基础库。
- 尝试3：升级微信开发者工具 // 还是存在问题
- 尝试4：因为我发现首页是正常的，只是职位页存在问题，有没有可能是 vant组件的问题。于是隐藏掉页面的 vant相关的组件，发现可以在手机行正常预览了。
定位问题？？ // 待核实
是vant组件的问题？为啥之前的微信小程序(使用了vant-weapp )可以在手机上正常预览呢？ 效果如下图
解决思路：和之前的微信小程序，一一对比，特别是 app.json 和 project.config.json 文件。
完美解决
- 调试基础库使用 2.210.1
- vant-weapp ^1.9.2
- 微信开发这工具使用的是最新的。2023.11.02下载的 今天上午，按照昨天晚上的思路。 使用之前微信小程序的项目(这个项目使用了vant-weapp,并且可以在手机上正常预览)的配置文件，发现能在手机上预览了。
可能原因
我使用的是最新版本的微信开发者工具。只改变了 '微信开发者工具的调试基础库' 和 'vant-weapp' . 我个人推测，有可能是 '微信开发者工具的调试基础库' 和 'vant-weapp' 之间存在不兼容的问题。
有大佬知道原因的，还不妨告知下。谢谢了
附上相关配置
- project.config.json
json
{
"description": "项目配置文件",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"bundle": false,
"useIsolateContext": false,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
"minifyWXSS": true
},
"compileType": "miniprogram",
"libVersion": "2.21.1",
"appid": "testID",
"projectname": "mp-vant-weap",
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}- app.json
json
{
"pages": [
"pages/Home/homeIndex/homeIndex",
],
"tabBar": {
"color": "#999999",
"selectedColor": "#ff5a5a",
"borderStyle": "black",
"backgroundColor": "#FFF",
"list": [
{
"pagePath": "pages/Home/homeIndex/homeIndex",
"text": "首页",
"iconPath": "assets/icons/11.png",
"selectedIconPath": "assets/icons/11-a.png"
},
{
"pagePath": "pages/Jobs/jobList/jobList",
"text": "职位",
"iconPath": "assets/icons/14-a.png",
"selectedIconPath": "assets/icons/14.png"
}
]
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents",
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-loading": "@vant/weapp/loading/index",
"van-picker": "@vant/weapp/picker/index",
"van-popup": "@vant/weapp/popup/index",
"van-field": "@vant/weapp/field/index",
"van-search": "@vant/weapp/search/index",
"van-progress": "@vant/weapp/progress/index",
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-swipe-cell": "@vant/weapp/swipe-cell/index",
"van-dialog": "@vant/weapp/dialog/index",
"van-checkbox": "@vant/weapp/checkbox/index",
"van-checkbox-group": "@vant/weapp/checkbox-group/index",
"van-toast": "@vant/weapp/toast/index",
"van-image": "@vant/weapp/image/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-steps": "@vant/weapp/steps/index",
"van-icon": "@vant/weapp/icon/index",
"van-notify": "@vant/weapp/notify/index",
"van-area": "@vant/weapp/area/index",
"van-radio": "@vant/weapp/radio/index",
"van-radio-group": "@vant/weapp/radio-group/index",
"van-calendar": "@vant/weapp/calendar/index",
"van-tree-select": "@vant/weapp/tree-select/index",
"van-share-sheet": "@vant/weapp/share-sheet/index",
"van-tag": "@vant/weapp/tag/index",
"van-empty": "@vant/weapp/empty/index",
"van-uploader": "@vant/weapp/uploader/index",
"van-divider": "@vant/weapp/divider/index",
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index"
}
}参考链接
我在网上找这个"手机预览小程序页面空白"的原因，找到了如下