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

2,291 阅读2分钟
以下内容是我在开发中所遇到的问题以及解决方案,如有不对,还望指出~

开发小程序的踩坑记录。

  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. 针对页面的小图标,不要使用精灵图去做计算,首先在模拟器上是没问题,上了真机会显示模糊而且位置计算的也不精准,(1、2倍的图都是这样)针对这样的尽可能的去使用图标库(阿里巴巴矢量图表库)/图片进行cdn

  5. 针对http不友好,无论链接/图片/请求使用https。当然在开发的时候可以在开发工具中不校验域名。

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

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

    (1)在寻找记录的当前第几页条件的高度的时候,各种原因导致计算的并不精准(请求下一页数据,来回滚动页面) (2)调用onPageScroll钩子里频繁调用做计算,性能也受到一定影响,所以最后放弃该需求的实现。

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

开发小程序的优化

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

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

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