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

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 -->
<view class="test"></view>

page{
  padding: 0;
  margin: 0;
}
.test{
  background: red;
  width: 750rpx;
  height: 1204rpx;/*由于微信小程序头部的关系大概1204占满 */
}

看到这里可能会有人不理解，上面样式明明写死了1204rpx在高度不同的手机上当然会出现空一截的情况。但是其实导致空出一截的原因并不是因为屏幕高度的不同，而是因为宽高比的不同，也就是说即使屏幕高度再高，如果宽高比一致，上面所写的样式都是会占满全屏的。
因此当我们在小程序的纵向布局时必须注意到这一点，不然在宽高比不同的手机上会出现布局样式的变形

兼容性适配

说到兼容性的适配，必须提出来的一点是：在微信开发者工具中看到的样式很有可能跟真机测试的样式是不一样的
导致的原因有几种：

1. 情况一：可能使用了ios或安卓某一端不兼容的样式属性；目前编辑器检查越来越严格，标签不闭合可能导致一些奇怪的问题；
2. 情况二：使用了开发工具内的压缩代码，样式自动补全等设置，这些设置有时候会存在BUG会导致一些css丢失等问题；可以在取消部分设置后重试；
3. 情况三：颜色不对，或者设置颜色无效，请使用十六进制颜色码代替英文颜色；

难以修改的导航栏

微信小程序的导航栏（也就是标题那一块）官方给的页面配置导航栏属性如下

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		导航栏标题文字内容

这里面除了一个标题的颜色（仅限黑白）以外没有任何可以修改的样式。但是页面配置没有修改导航栏的方法并不意味着导航栏完全不能修改，因为在全局配置中微信小程序提供了navigationStyle属性，也就是说这个导航栏一改就是全局都修改，并且这样的修改是要做一大堆适配。另外在这里提多一句微信小程序本身自带的组件样式要修改起来都相当的麻烦，要是组件写起来不算麻烦，为了样式需求着想还是自己写一个好。