微信小程序踩坑与填坑篇（一）

1、前言

学习微信小程序的路上可以说是一脚一个坑，由于微信小程序网上的资料比较少平时解决问题也只能看看官方社区，但是即便是官方社区资料还是少，所以打算自己总结一下，做一个填坑系列方便自己学习。

2、微信小程序适配坑

宽高适配

刚刚开始接触微信小程序的时候觉得微信团队还是猛啊，这个rpx单位好用得不行，直接设计图给多少直接写多少就行了，完全不用做适配。到后来稍微了解了一下这个rpx单位以后发现事情并没有那么简单。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx 为小程序中使用的相对单位，用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。

rpx类似于vw单位是相对于屏幕来计算的只不过rpx是750占满屏幕宽度而vw是100就占满宽度。那么问题来了如果高度也使用rpx单位的话写多少才是占满整个屏幕高度呢？当在iPhone6下你按照设计图来编写代码，编写完了在iPhone6模拟器下看着很舒服，但是当你换一个屏幕宽高比不一样的模拟器时你会发现高度并不是你想象中的样子。象iPhoneX这样的宽高比小的手机，就会看到本来在i6下占满屏幕的布局就会变得屏幕尾端会空出一大截来
举个例子：
样式

<!-- wxml -->
<v