做这个的时候想起一开始自学安卓的情景了，用LinearLayout像搭积木一样堆出的界面，宽高都是写死的，屏幕适配也不好，被老大和产品吐槽了n次，后来越来越复杂的界面，于是RelativeLayout，FrameLayout还有TableLayout都用上了，说这些题外话是啥意思呢，想说布局是慢慢应对复杂场景而逐步走向关系型的布局，很拗口，说白了就是空间相对关系去做布局虽然麻烦但是实现复杂的场景更游刃有余。

下面以这个界面为例，这首页可能是个直播，可能是个商城，管他呢。

画图板画的，请自行脑补对其后的样子

上面那栏是广告页，下面四个是商品列表，底下三个是切换按钮。会用到

swiper——滑块视图容器

tabBar——底部栏

一、广告轮播

官方文档

官方的坑挺多的（微信大神不要封杀我），图片不能横向全屏，纵向高度不能调整等等，好在以前做项目时发现，只要是个bug，总有前人处理了，把几个人的方法总结了下，然后得到现在的代码，大家可以直接用，改起来灵活简单了许多。

高度和宽度设置

其中imageWidth是这样获得的

获取设备宽度，并在初始化时设置在控件里

其实还有一些属性，可以看看官方文档，比如轮播时下面有没有点，点的颜色，是否循环播放，还是回到第一张等等。

二、底部栏

官方文档

之前有个概念，app层控制整个外观，很多静态的配置是在app.json上的，顶部栏，底部栏，标题，整体颜色等等，所以这里无例外修改app.json即可。

因为图标什么的，我在git上找了一个工程，复制了代码，修改了路径弄的，感谢作者，路径。

底部栏

以首页为例，pagePath就是要跳转的路径了，iconPath是没有选中时的icon样式，selectIconPath是选中后的icon样式，text是按钮名称，就这么简单。

三、商品展示列表

这个没啥说的，只要记住，因为微信里各个手机屏幕大小不同，他们把单位统一化到rpx，有兴趣的可以看这篇

微信小程序开发--从px到rpx

所以你想一排放几个就用750除以几就好了

言归正传，首先是wxml，这个要求一排两个，并且留出空来，要不不好看。

点击后带参跳转

那么这里的wxss比代码还复杂，因为嵌套的层越多越复杂

一行两个商品的wxss

划线第一行是均分空白处，第二行是自动换行。

总结：

好了，一个简单的首页就这么完成了，来看一下效果图吧。

效果图

不过啊，现在所有的数据都写死的，小程序审核都要三五天，产品不及时上架这怎么行，别担心，做完后面两个页面，我们再结合云端进行动态数据加载。