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

最近一直在关注小程序开发，目前正在试着将公司的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}的对象，即可解决安卓不兼容的情况

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

今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序和抖音小程序的区别？如何选择？
随着5G的到来,电商向多元化新型电商的转型也已成时代必然.2020年,当我们的Vlog.自媒体行业风生水起时,依托第三方的电商平台销售模式已经逐渐难以满足新型电商的应用场景,例如微信的私域流量.抖音对 ...
从0到一开发微信小程序（5）—小程序WXML
文章目录其他相关文章 1.WXML 1.1.事件 1.1.1.系统 1.1.2.分类 1.1.2.1.冒泡事件(bindtap) 1.1.2.2.非冒泡事件(catchtap) 1.1.3.携带参数 ...
基于微信小程序的智能招聘小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
基于微信小程序的电影交流平台小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
给大家分享一个打卡的工具，是一个微信小程序，名字叫小打卡
给大家分享一个打卡的工具,是一个微信小程序,名字叫小打卡.之前Ben和我讨论过,有没有这样一个方便的工具,能把每天工作学到的零碎知识点记录下来,或者是工作中突然来了一些稍纵即逝的灵感,如果不及时记下来 ...
微信小程序快速转支付宝小程序（antmove）
微信小程序转支付宝小程序微信小程序快速转支付宝小程序微信小程序快速转支付宝小程序现在小程序各个大平台都比较火爆,当然基本都是cp的微信小程序.我司最近要将之前开发好的百度小程序移植到各个平台,不 ...
基于微信小程序的选课系统小程序
文末联系获取源码开发语言:Java 框架:SpringBoot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:ecl ...
【笔记-微信小程序】imooc-微信小程序入门与实践
第一章:什么是微信小程序 1-1 开篇及课程特色介绍 1.老师id:小楼昨夜又秋风:https://zhuanlan.zhihu.com/oldtimes , 知乎id:七月在夏天. 2.实践式学习小 ...

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

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

最新文章

热门文章