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

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

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

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

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

    5、input文本框的placeholder-class不支持多个样式类名，空格分隔写法，解决办法：样式只能整合在一个类名里

      6、move事件导致navigator组件和tap事件中跳转地址失效的解决方案。详情请走：http://blog.csdn.net/eadio/article/details/54290420

      7、<text/> 组件内只支持 <text/> 嵌套。一不小心会把image组件放入到text组件内部，每次都要调试好久，才发现改成view组件包含就能正常显示了。这个坑一定要注意啊！！

      8、使用wx.saveFile要注意无法直接下载网络资源到本地上，需要先使用wx.downloadFile下载资源得到临时文件路径【wxfile://开头的路径】，然后才能使用wx.saveFile接口，否则会提示如下错误：

===========================2017-11-08更新===========================

9、map组件show-location和wx.getlocation不在一个定位点。开发者工具上没有发现问题，等到了真机上出现问题了。最后去官方论坛发帖得到解答，只要给wx.getlocation制定type=gcj02类型就可以了。演示如下：

左图是真机上调试，右图是开发者工具上调试结果，两个明显存在差异。

最后也可以在map组件的tips里面看到提醒：

===========================2018-1-22更新===========================

10、最近有个需求是永不显示map组件上的markers气泡，不管是点击后还是初始化。解决方案：不要指定markers的title属性和name属性和callout属性。

11、ios上使用wx.backgroundAudioManager对象报错，原因是没有设置title导致的。安卓没有报错，目前发现微信调试基础库1.7.2版本，苹果8有这问题。

===========================2018-2-7更新===========================

12、近期有发现全局定义wx.backgroundAudioManager，如果设置了title但是没有设置src的话，真机上都会报错。为了兼容ios机子，我等到设置src的时候同步设置title标题。

===========================2018-2-24更新===========================

13、真机上发现请求服务器API得不到数据，提醒请求超时，导致我页面一直处于加载中状态。然而开发者工具表现正常。  最终才发现是wifi网段不同问题导致的。有遇到次问题的可以看看是不是这原因导致的。踩过两次坑啊！！！【下面左图是真机表现右图是开发者工具正常表现】

===========================2018-3-1更新===========================

14、关于setData的回调传递问题。

文档描述不是很明白，找了很久调试了很久才发现正确的使用方法是以下的方式调用的：

this.setData({
    a: 1,
  },
  () => {
    console.log('yyyy')
})

===========================2018-4-24更新===========================

15、ios真机上发现地图缩放过程中markers标记点有时候会无缘无故消失，最后调试发现是js中动态设置scale缩放级别导致的。解决方案：直接固定scale缩放级别

16、真机上发现data变量存储的文本带有\u02028的unicode码，开发者工具能正常渲染，但是真机上会无法正常渲染。解决方案：正则搜索替换该unicode码。或者是后端前端不要返回带有unicode的文本串。

17、ios上发现cover-view对transform的支持性不好。解决方案：不要动画，使用hidden或者wx:if代替transform

===========================2018-05-07更新===========================

18、同一组polyline对象数组，在开发者工具和ios上能正常选择，而在安卓真机无法渲染。经调试发现polyline对象中一定不能存在有空的points数组对象。会导致安卓真机无法渲染

解决方案：给points数组默认设置一组{latitude:0, longitude: 0}的对象，即可解决安卓不兼容的情况