小程序开发踩坑记录

笔者作为一个Android开发，因公司需求边研究边开发持续了差不多一个月项目基本完工，把开发中遇到的问题及踩坑经历做了一下记录。

其实小程序虽然是前端语言作为开发基础，但因为为是嵌入到微信内部的，考虑到仿原生应用的交互逻辑，其实移动端的一些思维要更符合小程序开发中的一些逻辑实现的解决思路，比如移动端任务栈的管理思想，业务逻辑导致的多个页面之间数据刷新问题，仿照移动端写一个类似的EventBus通知也页面刷新也要比每次在页面显示时都进行刷新更显得合理一些等等。

emm 偏题了… 以下进入踩坑记录正题：

toast设置duration无效问题

小程序toast和loading不能共存，貌似整个系统toast和loading都是复用的同一个控件。我在项目封装里统一把loading给封装到了请求里面，在complete回调统一hide了loading，这就导致自定义的success回调要显示toast和complete中隐藏loading控件冲突，解决办法是删除complete回调隐藏loading代码，success和fail回调里最前面分别执行隐藏操作。

view点击事件传参命名问题

小程序中bindtap点击事件传递参数是以data自定义属性名形式传递的，如在wxml中写属性data-id=“1”，在事件回调中用e.currentTarget.dataset.id取出来。
在java中习惯了驼峰命名，于是在这里就成了坑… 在小程序中data-xxXXX传递到回调中属性名都会被转换成纯小写如data-userName，取出来时就变成了username。

列表局部刷新问题

小程序官方没有提供类似于android的ListView/RecyclerView等列表组件（官方的github上有个recycler-viewbug问题比较多issue也没人解决），只能通过wx-for以循环的方式填充列表数据的所有视图到DOM树，所以针对大量数据列表没有复用逻辑一定会导致性能问题。
官方的数据视图双向绑定架构提供了setData方式刷新视图，我们经常会直接把data中定义的数据结构直接重新赋值来达到更新视图的目的

this.setData({
	list: newList
})

但是对于列表性型的视图，整体刷新会导致整个列表的DOM结构重新渲染对性能有影响，因此考虑刷新单条item可以这么写，index为需要刷新的下标

var itemData = 'this.data.list[' + index + ']'
this.setData({
	[item]: newItemData
})

border边框在ios上缺少某一边框问题

小程序bug，当border宽度设为1rpx时，在ios上某些边框会渲染不出来，android就没问题。最低为成2rpx才能正常显示

scroll-view控件和小程序官方页面下拉刷新冲突问题

首先明确一点：小程序官方文档的不少坑点都被写文档兄dei用很小的字号放在了页面底部的tips上… 大哥666

所以scroll-view和下拉刷新没办法同时用了，要么自己在scroll内部通过scrollTop属性自己实现下拉刷新逻辑，要么放弃scroll-view直接使用view，网页超出一屏当然会自己滚动了，但有些页面内部某些区域需要滚动，这里只能自己考虑是放弃刷新功能还是自行实现逻辑。

scoll-view页面内使用无法内部滚动/丢失惯性/ios上滑动到顶部或底部时卡死

有时整个页面会随着scroll-view一起向上滚动，我们自然会想到设置scroll-view的overflow: auto属性让srollview显示滚动条来内部进行滚动。

测试能达到目的但是会造成scroll-view丢失惯性，滚动起来比较生硬。这时可以添加-webkit-overflow-scrolling: touch属性，这个属性值是专门给移动端来处理滚动回弹效果的，设置touch就能保持惯性。

但是使用这个属性时在ios设备上，因为ios系统本身页面有回弹效果，当scroll-view滚动到顶部或底部这时如果再触发了ios自身的回弹就会导致scrollview卡死。

因此一个简单的解决方案是在页面json文件中配置"disableScroll": true禁用掉页面自身的弹性滑动。

button自定义背景出现边框问题

因为需要小程序客服功能必须使用button的open-type，所以只能自定义button背景实现按钮，但是会出现默认的黑色边框，于是有了一下踩坑经历：

首先考虑到边框问题，但是在css的border:none属性在button自定义的class下也不起作用。

然后通过调试布局发现button默认的一个position:reletive属性影响了边框的显示与消失，于是在自定义的class中覆盖position为static，然后发现边框确实成功去除了，到这里似乎解决了问题。

然而，一个香喷喷的馒头又引发了一场血案，这次是小程序官方的锅。

这个问题就是button一旦设置了position属性值为inherit、initial、static这几个就会造成点击button父布局任意位置都会触发button的点击事件… 这个是小程序的bug似乎一年多了官方也未解决

小程序社区的官方回复建议是在button外再套一层view，尝试一下仅嵌套一层view无效，于是又想到position属性的问题，在给view添加了position: absolute emm … 似乎可行，然而css上view和button同时设置position后外层view莫名奇妙又出现了个边框，什么鬼，去了一个边框，又给我来个边框… 尝试多种方式也未能去掉这个边框。

最后，经过大量的搜索，终于找到了前辈的踩坑成果，最终解决方案是通过伪类给原生button类添加

button::after{
    border: none;
}