微信小程序自适应方法

适配？

由于每一个手机屏幕大小尺寸不一致，这就导致了小程序页面显示的差异存在，为了尽量避免因为尺寸而出现的界面混乱。

如何适配

原理

我们以每一个屏幕宽度为标准尺，通过比例计算获取相应的大小和位置。这样可以尽可能适配各种机型，但是如果面对差距比较大的设备，如PC、ipad等，就需要考虑不同设备的适配方案。

rpx

微信小程序提供了一个rpx，先简单介绍下这个吧。
rpx在任何一块屏幕上，无论尺寸大小都为750rpx。可以理解为100%，但是有点不一样的是，在css使用%是根据父节点计算的（动态）；而rpx是根据屏幕大小而计算得出的（静态），只是会随着手机屏幕的大小变化而变化。
我们可以计算下iphoneX的rpx为多少。
1rpx = 1125px / 750 = 1.5px;
我们开发过程中并不需要自己去计算，只需要记住这个rpx和屏幕的关系。

如何利用rpx

• 图片适配

  如果使用px固定图片大小就会出现在大屏幕的手机上显示偏小，所以可以直接改用rpx。不过使用rpx要注意下大小，为了方便后续的开发，设计保真图就需要根据宽度为750px的尺寸而进行设置，这样就可以直接在微信小程序中使用图片的大小宽高度当作rpx对应的值。
  比如iphone 6的分辨率的宽度是750，我们就可以根据这个比例进行保真图设计。
  
  我们举个例子，在iphone 6的分辨率下，我们已经得到一个保真图。有一个按钮（白色圆形）
  

  • 大小，由于保真图宽度也是750，所以我们可以直接获取到图标的大小，设置为rpx就可以了。
  • 位置，我们可以用标尺获取到位置（x:165，y:165）,由于屏幕宽度为750，所以如果使用css定位直接left:165rpx，就可以。高度同理。

  如果设计图宽度不是750而是其它，那么如何获取相对应的数值呢？
  我们假设宽度为1200。图片的大小在设计图中的像素为100 * 100
  我们通过计算获取在微信小程序中的rpx对应的数值

  var width, height 
  width = height = 750 / 1200 * 100 // 750rpx除以设计图的宽度乘上设计图图片的宽高度等于图片的rpx值
  

• 元素布局

  我们利用图片大小和位置适配的原理，对于网页的元素也可以使用相同的方法进行定位。
  灵活使用flex布局，基本可以解决99%的html的问题。（grid布局也可以）

• 其他

  以上都是我们设置好的固定位置，但是有些是需要计算才能得出的位置就需要在js中动态去设置。
  举个例子，微信小程序有一个顶部标题栏，如果我们需要隐藏之后就会发现顶部有2个按钮是无法隐藏的，为了避免按钮和微信的顶部按钮 重叠，我们就需要获取到微信官方设置的顶部标题栏的高度。在微信开发者工具中通过切换不同的分辨率就可以发现，微信顶部的按钮是做好了适配，并且具有一定的高度。
  
  隐藏之后
  

依然存在2个按钮。我在开发过程需要获取到隐藏前顶部栏的高度，微信官方有一个获取顶部的位置的API。

wx.getSystemInfoSync().statusBarHeight // 顶部栏的位置 单位为px

顶部白色部分为获取到的标题栏的高度。由于获取到是单位px，所以我们需要转换成rpx。

// 转换比例
    let pxTurnRpx =750 / wx.getSystemInfoSync().windowWidth
    let titleHeght = wx.getSystemInfoSync().statusBarHeight * pxTurnRpx + 80 // 经过测试只要加多80rpx就可以还原所有机型的标题栏

设置过后，我们切换不同机型发现已经还原了微信的标题栏高度

这样有什么用呢？我们开发过程中往往会发现设计的原稿顶部如果有一片白色会非常突兀，所以我们都会选择隐藏掉它，但是隐藏之后会发现微信自带的2个按钮会影响到UI交互。

我们只需要计算标题栏的高度，进行下移就可以避免微信按钮的阻挡交互。

总结

1. 要好好利用rpx这个单位
2. 以屏幕宽度为标准，通过图片比例/元素的比例计算每一个元素的大小、位置
3. 利用好css布局方法（flex absolute relative grid）
4. 尽量减少使用js控制元素位置
5. 如果需要动态修改数据的时候，通过计算rpx和px的转换单位进行动态修改，在利用setdata去设置元素的位置大小。