微信小程序的踩坑与优化。

如下内容是我在开发中所遇到的问题以及解决方案，若有不对，还望指出～
复制代码

开发小程序的踩坑记录。

1. 使用官方的scroll-view组件，在调节样式的问题的时候，横向布局，里面须要滑动的元素必须设置display: inline-block,不然没有效果。竖向布局，scroll-view必须有一个固定高度，使用px/rpx单位。在安卓机上会显示滚动条，设置css **::-webkit-scrollbar { display: none }**

2. 本身写的一个组件，占页面高度的60%，多出内容须要滚动显示，在ios系统上显示不流畅，需设置css -webkit-overflow-scrolling : touch;

3. 页面底部固定定位一个元素，中间内容超出滚动展现，安卓系统无异常，ios系统固定的元素无视，致使底部最后的元素显示一半，获取当前本机的高度，而后作计算。

4. 针对页面的小图标，不要使用精灵图去作计算，首先在模拟器上是没问题，上了真机会显示模糊并且位置计算的也不精准，（一、2倍的图都是这样）针对这样的尽量的去使用图标库（阿里巴巴矢量图表库）/图片进行cdn。

5. 针对http不友好，不管连接/图片/请求使用https。固然在开发的时候能够在开发工具中不校验域名。

6. 在列表页实现页面滚动实时监听当前是第几页数据，如图。

   

   开发这个需求的时候，首先想着对滚动条作记录，而后滑动滚条的时候去作判断，思路是这样，

   （1）在寻找记录的当前第几页条件的高度的时候，各类缘由致使计算的并不精准（请求下一页数据，来回滚动页面） （2）调用onPageScroll钩子里频繁调用作计算，性能也受到必定影响，因此最后放弃该需求的实现。

7. 右侧列表字母滚动，主页面的列表也跟随滚动，如图。与第6点很类似，也表示放弃该需求实现。

开发小程序的优化

1. 编写自定义的组件，若是开发过vue的小伙伴，看小程序的官方文档应该就很好理解了。达到组件复用性。
2. 避免频繁的调用setData。
3. 与页面渲染无关的数据，最好很差放在data中，放在page里。
4. 尽可能避免在onPageScroll钩子里进行过多复杂的业务逻辑。
5. 对小程序进行分包，优化首屏的渲染时间。

还存在的一些需求，目前还没答案。

• 能不能根据体验版/生产版来进行区分，请求接口的地址根据这个来作变化。（目的是每次上传的时候就不须要每次去看下当前请求的接口是测试环境/生产环境）