微信小程序 踩坑实录
最近几个月工作饱和度较高，写了一些小程序相关资料都在公司内网wiki中。
正好有朋友想做小程序相关，想看些资料。趁着
这个契机，把文章发出来给大家分享一下。
文章简陋，勿喷。
开发前 需要与产品商榷的页面细节
|
序号
|
类型
|
注意事项
|
确认细节
|
|---|---|---|---|
| 1 | css | 文字折行 |
确认文本最大长度，是否有折行问题，是否全部显示 不折行，则超出宽度变点 或者直接截断 需产品确认 折行，确定最大高度，最多行数，需确定 设计图 是否需要修改 |
| 2 | js | 页面下拉刷新 | 开发前 应确认哪些页面需要下拉刷新，避免需求与自身理解不同，造成的理解偏差 |
| 3 | css | 背景色 | 页面背景色最好保持一致，尽量避免色差较大，导致的闪屏（先显示背景色，然后渲染的页面图片） |
| 4 | ui | 图片 | 图片应该为二倍或三倍图，避免图片模糊的情况 |
| 5 | xml | 文字 | 产品文档中的文字 应该与 设计稿中文字相同 ， 不同时需确认 |
| 6 | css | 图片显示 | 图片显示时 需确认缩放模式，保持比例，或者以宽或高为主 |
| 7 | xml | 模板中默认值 | 很多参数在接口返回数据中 有 null，undefined，空字符串等情况，最好跟产品确定一个默认值 |
| 8 | ue | 列表刷新 |
列表包含点击查看详情功能，需要注意确认列表刷新时机 1.外部点击列表是否刷新 2.详情页返回列表是否刷新 3.同序号2
|
开发时碰到的一些坑，注意规避
|
问题说明
|
解决方案
|
|---|---|
| setData的参数过大时，会导致页面渲染慢 |
1 改变setData的时机，避免在onload中设置大数据 2 优化大数据的数据格式 |
| 异步调用api时，需防止用户短时间快速点击按钮 导致多次调用接口的问题 | 可以设置标志位 进行执行该函数的判断条件 |
| 页面背景色在json配置，页面css，全局均可设置，优先级不明确，json配置不生效 |
在当前页面的css中编写背景颜色 page{ background-color:red }， json配置中不配置 注：json配置中的背景色 在page高度100%时会出现，但涉及到翻页时，页面背景色就不存在了 |
| 页面下拉刷新和加载更多 不建议使用 scrollView |
安卓个别机型不流程 scrollView在使用时 有滑动加速，流程感比较好 |
| 微信下拉刷新动画 跟 部分微信api同时调用时，会出现 不回弹 的情况 |
下拉刷新会被wx.showToast、wx.showLoading、wx.hideToast、wx.hideLoading、wx.showModal等方法重置下拉状态，并留下一个小点。 不同时使用两种api |
| 页面底部有fixed定位元素时，需注意页面元素过多时被定位元素覆盖的问题 | 可以给容器添加比 定位元素 高一点的 底部内边距，来避免定位元素压了页面底部一小条的情况 |
| 安卓手机点击 文本框时 会闪过重影 | 已知问题 |
| 不同机型的默认字体和颜色不统一 | 设置页面的默认字体颜色 |
| 页面某一个模块清晰度不高 | 去除透明度 ，使用透明度时使用 rgba ，避免使用opacity |
| 动画在小程序内失效 |
1，时间间隔过小导致，可设置为 100ms 2，定位改为fixed |
| 在ios 8.4.1系统下，transform: translate动画失效 | 省市三级联动弹框完全依靠translate来实现隐藏/显示，但是由于在ios 8.4.1系统下，此transform样式失效（或表现形式与其他系统不同），因此需要先依靠hidden属性控制显示/隐藏，再通过transform属性增加动画效果。如此实现以后，既可以避免在低版本系统下无法控制显示/隐藏的问题，也兼顾了高版本系统下具有较好的用户体验。 |
| picker-view 传入值错误 | 在华为荣耀手机上 picker-view 在只有三个选项的情况下，传入了当前值为 4 ，导致代码报错。使用这类组件时，需要对传入值的可用性进行判断 |
| 列表出现卡顿 | scroll-view组件滑动不流畅，偶尔会有无法滑动的问题，官方正在修复中 |
