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

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

      1、navigator组件使用flex布局在安卓机子下是不兼容的。

      2、form组件设置padding无效

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

      3、switch组件垂直居中问题

      解决方案：使用flex布局设置父元素align-items属性为center或者父元素不设置高度直接padding属性撑开

      因为在使用这个组件的过程发现组件是无法设定宽高的。而我在父元素设置line-hieght属性想要让文本垂直居中的过程发现switch在line-height不是很大的情况下始终居顶。给switch组件设置背景色的时候发现本身有个父元素包裹导致设置的一些属性都无效。

      4、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月】的时候渲染正常了

标签： wxkey使用组件