微信小程序开发 | app.json配置全局底部导航栏，页面无法渲染

写在最前面：这篇博文主要记录我在微信小程序前端开发中遇到的问题及解决方法。有很多地方虽然解决了问题但是可能并不是很懂为什么会产生这样的问题，网上也没搜到合理的解释，虽然囫囵吞枣了一些，但也希望能帮到需要的人。

问题描述：微信小程序开发时，app.json配置全局底部导航栏的时候图片路径没错，但是页面渲染不出来

1. 学习参考页面：tabBar全局配置

2. 问题描述：

• 第一，在app.json中配置全局底部导航栏的时候，最开始只设置了pagepath和text，index页面填好头像和昵称之后，会跳转到home页面，且渲染是正常的。但是当添加图标iconPath和selectedIconPath之后，重新编译，填完index页面的内容就不会再跳转并渲染home页面，并且控制台并没有任何报错。
• 第二，此外之前保存项目之后退出，隔一个晚上第二天重新打开项目后，自己创建的页面json文件和wxss文件都丢失了。手动删除页面文件夹之后重新编译，app.json生成的新页面文件夹仍然不包含json文件和wxss文件。

3. 解决过程：

• 第一次尝试，修改文件夹image名称为images，然后尝试微信开发者论坛上给出的建议，尝试了清除编译缓存、路径使用“./images”，“/images”，“image”，“miniprogram/images”等方法，但都无法正常渲染，并且"miniprogram/images"在控制台报错。
• 第二次尝试，根据下面报错，搜索到了优快云一篇文章，并尝试把文件全都挪出miniprogram下面，但是仍然无法正常渲染。将文件结构恢复为原来的结构，删除tabBar中的图标设置，保存，这次连字也无法渲染了。

[ miniprogram/app.json 文件内容错误] miniprogram/app.json: ["tabBar"]["list"][2]["selectedIconPath"] should not begin with ' '

• 第三次尝试，先删除app.json中的tabBar代码，然后保存，结果发现之前的自创页面缺失的wxss和json文件都出现了，再把只有pagepath和text的tabBar代码写上去，发现能够正常渲染。但是在写入图标iconPath和selectedIconPath等之后，又无法正常渲染了（重回问题一了）。
• 第四次尝试，同样先删除app.json中的tabBar代码，先保存，页面能正常跳转；再将配置好pagepath和text的tabBar复制粘贴回去，再次保存，最终页面渲染成功。 但是每次重新打开项目之后又不能正常渲染了，必须按照这个步骤再来一次。

4.问题所在：tab页签对应页面必须放在 pages 页面数组最开始的位置，不能往后放，否则无法生效。如图：

pages页面数组

项目结构

tabBar代码

5.  最终结果：结果运行如下图所示 

成功渲染

——