总结分享一些小程序开发中遇到的问题（帮忙避坑）（微信小程序开发常见错误）

总结分享一些小程序开发中遇到的问题（帮忙避坑）（微信小程序开发常见错误）

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

渲染列表时用 block 包裹

{{index}}: {{item}} -

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

写一个自定义组件

自定义组件分为 4 部分

properties 组件接收的属性

properties: { // 输入框的默认提示 placeholder: { type: String, // 属性值的类型 value: '' // 属性默认值 }},-

data 组件数据methods 组件方法，一般内部方法用_开头组件的生命周期函数，一般使用 ready，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）

调用父组件传入的方法

// 子组件var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据var myEventOption = {} // 触发事件的选项this.triggerEvent('onclear', myEventDetail, myEventOption)-

-

// 父组件onSearch(e){ console.log(e.detail.value)}-

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

// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法let searchBar = this.selectComponent('#search-bar');searchBar.setData({ value: e.currentTarget.dataset.name })searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});-

子组件中获取 dom 宽高

// 获取屏幕宽度let windowWidth = wx.getSystemInfoSync().windowWidth// 在组件内部需要写 thislet query = wx.createSelectorQuery().in(this);let that = this;query.selectAll('.tagItem').boundingClientRect()query.exec(function (res) { let allWidth = 0; res[0].map(item=>{ allWidth = allWidth + item.width return allWidth }) let length = res[0].length let ratioWidth = allWidth / windowWidth that.setData({ allLength: length, iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533) })})-

页面返回时不会调用 onLoad

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

自定义 tabbar 优化

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

-

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

-

修改的地方：

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

onPullDownRefresh: function () { if (this.data.tabbarID === this.data.tabbarList.article) { // 使用 selectComponent 找到组件实例，调用内部方法 let articlePage = this.selectComponent('#article-page'); articlePage.onPullDownRefresh(); } else if (this.data.tabbarID === this.data.tabbarList.doctor){ let doctorPage = this.selectComponent('#doctor-page'); doctorPage.onPullDownRefresh(); } else { wx.stopPullDownRefresh(); }},-

带来的问题：

使用 iconfont

https://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、在列表的父元素上绑定事件

滑动的内容 滑动后显示的按钮-

.list-container{ position: relative; width:100%; height: 224rpx; overflow: hidden;}.list-item{ position: absolute; left: 0; z-index: 5; transition: left 0.2s ease-in-out; background-color: #fff;}.backCover{ box-sizing: border-box; width: 200rpx; height: 218rpx; position: absolute; right: 0; top: 0; z-index: 4;}-

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

onTouchStartListItem: function (e) { // 是单指触碰 if (e.touches.length === 1) { // 记下触碰点距屏幕边缘的x轴位置 this.setData({ startX: e.touches[0].clientX, }) }},onTouchMoveListItem: function (e) { var that = this if (e.touches.length == 1) { var disX = that.data.startX - e.touches[0].clientX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = ""; if (disX < deleteBtnWidth / 4) { txtStyle = "left:0rpx"; } else { txtStyle = "left:-" + deleteBtnWidth + "rpx"; } var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }) }}, onTouchEndListItem: function (e) { var that = this if (e.changedTouches.length == 1) { var endX = e.changedTouches[0].clientX; var disX = that.data.startX - endX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = disX > deleteBtnWidth / 2 ? "left:-" + deleteBtnWidth + "px" : "left:0px"; var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }); }},-

【相关学习推荐：小程序开发教程】

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