全面总结小程序开发中常见问题及避坑指南

本篇文章给大家总结下之前开发微信小程序的时候遇到过一些问题，并将解决方案分享给大家，希望对大家有所帮助！

请以小程序最新文档为准～：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview

渲染列表时用 block 包裹

block 不会真实渲染到页面上，只作为一个包裹元素，接受控制属性

写一个自定义组件

自定义组件分为 4 部分

• properties 组件接收的属性

  

  

  
  

• data 组件数据

• methods 组件方法，一般内部方法用_开头

• 组件的生命周期函数，一般使用 ready，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）

调用父组件传入的方法

父组件直接调用子组件的方法

子组件中获取 dom 宽高

页面返回时不会调用 onLoad

之前把调用接口的部分写到了onLoad里，从文章列表进入详情页，在从详情页点击左上角回退返回列表页，列表页的阅读数应该更新，但是没有更新，因为没有重新调文章列表接口。

所以把调文章列表接口的部分写好了onShow里。

自定义 tabbar 优化

第一次优化，将组件封装的tabbar改成页面的模版形式

1、之前用组件的形式写的，改为了 template；tabbar 上的图标都改成的 iconfont，解决点击 tabbar 时候会闪的问题

2、点击 tabbar 时，需要销毁之前的页面，在跳到需要跳转的页面，所以在 navigator 组件用了 reLaunch

第二次优化，将带有tabbar的页面都封装成组件写在页面，在页面中setData切换tab

修改的地方：

• 带有tabbar的页面都重写为组件形式

• 因为组件中只有挂载完成后的 ready 方法，所以之前页面中 onShow，onReachBottom，onPullDownRefresh 都放到父页面调用

带来的问题：

• 每个tabbar都会有下拉刷新的效果，即使不需要下拉刷新

• 从其他页面点击按钮，直接跳到首页的某一个tab卡，可能会有问题

使用 iconfont

https://www.jianshu.com/p/1cfc074eeb75

• 登录 iconfont- - zip 包

• 解压缩，其中的 .ttf 文件在 transfonter.org/ 上面转成 base64 格式

• 将 style.css 写入新建的 iconfont.wxss 中，上面的字体文件路径用刚刚转好的 base64 替代

• 在 app.wxss 中 import iconfont.wxss

注意：组件中的样式本身不受 app.wxss 影响，因此，组件中需要使用 iconfont 的时候，需要手动引一下 app.wxss 或者 iconfont.wxss

列表的左滑效果

1、在列表的父元素上绑定事件

2、通过判断滑动距离修改列表项的 left 值

以上就是全面总结小程序开发中常见问题及避坑指南的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。