总结分享一些小程序开发中遇到的问题（帮忙避坑）

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

请以小程序最新文档为准～：

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview

渲染列表时用block包裹

<blockwx:for="{{[1,2,3]}}"><view>{{index}}:</view><view>{{item}}</view></block>

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

写一个自定义组件

自定义组件分为 4 部分

properties 组件接收的属性

data 组件数据

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

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

调用父组件传入的方法

//子组件varmyEventDetail={value:''};//detail对象，提供给事件监听函数，写需要传给外面的数据varmyEventOption={}//触发事件的选项this.triggerEvent('onclear',myEventDetail,myEventOption)<!–父组件–><searchbarid="search-bar"bind:onsearch="onSearch"bind:onclear="onSearch"placeholder="搜索文章内容"></searchbar><!–像绑定bindtap一样绑定自定义函数–>//父组件onSearch(e){console.log(e.detail.value)}

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

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

子组件中获取 dom 宽高

//获取屏幕宽度letwindowWidth=wx.getSystemInfoSync().windowWidth//在组件内部需要写thisletquery=wx.createSelectorQuery().in(this);letthat=this;query.selectAll('.tagItem').boundingClientRect()query.exec(function(res){letallWidth=0;res[0].map(item=>{allWidth=allWidth+item.widthreturnallWidth})letlength=res[0].lengthletratioWidth=allWidth/windowWidththat.setData({allLength:length,iphone:ratioWidth+(length==1?0:res[0].length*0.0533)})})

页面返回时不会调用 onLoad

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

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

自定义 tabbar 优化

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

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

<templatename="tabbar"><viewclass="tabbar-wrapper"><blockwx:for="{{tabbar.list}}"wx:key="item"><navigatorhover-class="none"class="tabbar_nav{{item.selected?'selected':''}}"url="{{item.pagePath}}"style="color:{{item.selected?tabbar.selectedColor:tabbar.color}}"open-type="reLaunch"><viewclass="tab-item"><textclass="{{item.iconPath}}"style="width:{{item.iconWidth}};height:{{item.iconHeight}}"></text>{{item.text}}<textclass='red-tag'wx:if="{{tabbar.num&&index==1}}">{{tabbar.num>99?'99+':tabbar.num}}</text></view></navigator></block></view></template>

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

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

<homePageid="home-page"wx:if="{{tabbarID==tabbarList.home}}"bind:onclicktab="setTabbar"></homePage><articleLibraryPageid="article-page"wx:if="{{tabbarID==tabbarList.article}}"></articleLibraryPage><doclistPageid="doctor-page"wx:if="{{tabbarID==tabbarList.doctor}}"></doclistPage><mePageid="me-page"wx:if="{{tabbarID==tabbarList.me}}"></mePage><tabbarid="tab-bar"bind:onclick="onClickTabbar"tabbarID="{{tabbarID}}"></tabbar>

修改的地方：

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

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

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

带来的问题：

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

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

使用 iconfont

登录 iconfont.cn 下载 zip 包

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

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

在 app.wxss 中 import iconfont.wxss

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

列表的左滑效果

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

<viewclass="list-container"wx:for="{{doctorList.list}}"wx:key="{{index}}"><viewbindtouchstart='onTouchStartListItem'bindtouchmove='onTouchMoveListItem'style="{{item.txtStyle}}">滑动的内容</view><viewclass="backCover">滑动后显示的按钮</view></view>.list-container{position:relative;width:100%;height:224rpx;overflow:hidden;}.list-item{position:absolute;left:0;z-index:5;transition:left0.2sease-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){varthat=thisif(e.touches.length==1){vardisX=that.data.startX-e.touches[0].clientX;vardeleteBtnWidth=that.data.deleteBtnWidth;vartxtStyle="";if(disX<deleteBtnWidth/4){txtStyle="left:0rpx";}else{txtStyle="left:-"+deleteBtnWidth+"rpx";}varindex=e.currentTarget.idvarlist=that.data.doctorList.listlist[index].txtStyle=txtStyle;that.setData({doctorList:{list:list,total:that.data.doctorList.total}})}},onTouchEndListItem:function(e){varthat=thisif(e.changedTouches.length==1){varendX=e.changedTouches[0].clientX;vardisX=that.data.startX-endX;vardeleteBtnWidth=that.data.deleteBtnWidth;vartxtStyle=disX>deleteBtnWidth/2?"left:-"+deleteBtnWidth+"px":"left:0px";varindex=e.currentTarget.idvarlist=that.data.doctorList.listlist[index].txtStyle=txtStyle;that.setData({doctorList:{list:list,total:that.data.doctorList.total}});}},