初学微信小程序遇到的各种坑...

前言部分

小冷本身做的是安卓开发，之前从没接触过前端页面开发和小程序开发，2017年那会小程序已经相当火了，那个时候小冷觉得，新技术不成熟肯定有很多坑，做第一批吃螃蟹的必然要付出很大的代价去填坑。小冷想现在都9102年了，那些坑应该都被各路大神踩的差不多了吧，所以现在应该是学习小程序的最佳时间，于是，就开始学习之旅，大体的思路是这样，先了解小程序的整理结构，不先着急看实现原理，即使看了也未必能看得懂，接着按写app的套路，先把整体的UI框架给搭出来，哪怕是个静态的页面，接着就是处理网络请求和理数据把静态页面变动态，再来是优化各项功能，最后就是再总结一下实现原理。

小程序目录结构解析

微信小程序目录结构

小程序UI结构碰到的问题

底部导航栏

参照了一些小程序底部导航栏介绍了，很快便可实现

clipboard.png

1. 问题1 图片文件夹存放问题？

尝试字images文件夹创建子级文件夹，图片路径正确，但就是找不到。

2. 问题2 导航栏主页问题？

尝试放三个不同的tab文件存放不同tab模块，发现一旦这样做底部导航栏就显示了，必须创建一个index页作为主页，然后再创建其他几个tab页

3. 问题3 页面是最近创建或自动生成？

在app.json文件夹下的 pages页面下构建好文件名，编译会自动生成该页面所属的所有文件夹如，.js,.json,.wxml,.wxss

clipboard (1).png

轮播图

clipboard (2).png

1. 轮播图高度不可调？

开始是在百度经验找到了文章微信小程序图片轮播的代码

按照以上轮播图效果是实现了，横向宽度也可以铺满屏幕，但高度始终调不了，显示效果只有在iPhone5上是正常的，其他高度只显示了部分（无论高度调多大高度始终都是300px），后来就放弃了（不展示图片了）。

2. app.wxss是什么鬼？影响轮播显示？

后来在GitHub上找到轮播demo，几乎是把代码都贴过来了，这次问题居然成了不显示轮播的，逐一排查问题到底是哪出了，最后发现，创建小程序时候，工具会自己加戏生成一系列的文件，其中app.wxss文件中就是自动生成的，我把代码注释了，居然显示了一个轮播的轮廓！

clipboard (3).png

3. 图片路径不统一？导致图片找不到？

原GitHub中demo中图片路径

clipboard (4).png

现自己demo中图片路径

clipboard (5).png

总结一下，就是说可能因为微信开发工具所导致的，在我这个工具版本（stable v1.0.20190409）只有加上斜杠才可用正常检索到图片路径

持续记录其他问题...