微信小程序发现的一些小问题以及解决方案集合

本文转自：http://blog.csdn.net/eadio/article/details/53468096

前瞻：

最近一直在关注小程序开发，目前正在试着将公司的app转换为小程序执行，在此期间有遇到的一些小问题以及解决办法集合。当然这些都是我个人经验谈，对于小程序的底层框架我也是一知半解，很多也都无法解释的很清楚，如果有不同见解欢迎指出。

• navigator组件使用flex布局在安卓机子下是不兼容的。
  解决方案：在navigator组件内先添加一个view组件使用flex布局，或者直接使用inline-block转换view子组件。具体也可以看我之前写的博客http://blog.csdn.net/eadio/article/details/53169145

• form组件设置padding无效
  解决方案：经过反复测试发现小程序的form组件是隶属于行内元素范围的。
  因为我设置了padding属性一点效果都没有，我改为view有效，在改回form组件还是没有效果，判断form组件和我们所认为的正常html的form表单块元素是不一样的。而且小程序中的组件不知道为啥始终是在最顶层，观察了下wxml面板，并为发现自有css属性
  因此可以将form组件改为block化，或者在form组件内先使用空的view来设置padding在根据页面需求进行下一步布局。

  
  
  

• switch组件垂直居中问题
  解决方案：使用flex布局，设置父元素align-items属性为center，或者父元素不设置高度直接padding属性撑开
  因为在使用这个组件的过程，发现组件是无法设定宽高的。而我在父元素设置line-hieght属性，想要让文本垂直居中的过程发现switch在line-height不是很大的情况下始终居顶。给switch组件设置背景色的时候发现本身有个父元素包裹导致设置的一些属性都无效。

  
  
  
• wx:for循环使用wx:key导致数据渲染不出来的
  解决方案：直接不使用wx:key忽略控制台的警告，或者wx:key不要使用this，并且wx:key指定的属性一定要是唯一的，
  因为wx:key=this的时候会导致无法预料的问题，虽然还是不知道小程序底层是怎么实现的，但是我在使用过程发现了一些无法解决的情况。
  wx:key唯一性即wx:key指定的这个属性比如id一定要是不重复的数值，否则在分页的时候你会发现下一页渲染不出来了。
  下面是我做的测试，分页加载数据我都是用的固定数据，发现一直处于加载中，我把wx:key属性去掉，或者使用远程请求，wx:key指向id也正常渲染。
  
  
  
  
  
  
  接下来是根据时间戳写的一个日历切换程序，发现使用*this，当我点击下一页的时候数据的渲染变的很奇怪，并不是我想要的，反复点击测试发现每个月的数据是最后一个月的那组数据，但是我逻辑层打印出来的日历数组对象又是对的，竟不知道是啥原因造成的。但当我去掉wx:key或者将wx:key指向唯一的属性title【yyyy年mm月】的时候，渲染正常了