本篇文章给大家总结下之前开发微信小程序的时候遇到过一些问题，并将解决方案分享给大家，希望对大家有所帮助！
请以小程序最新文档为准～：
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
渲染列表时用 block 包裹
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view></block>block 不会真实渲染到页面上，只作为一个包裹元素，接受控制属性
写一个自定义组件
自定义组件分为 4 部分
properties 组件接收的属性
data 组件数据
methods 组件方法，一般内部方法用_开头
组件的生命周期函数，一般使用 ready，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
调用父组件传入的方法
// 子组件var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据var myEventOption = {} // 触发事件的选项this.triggerEvent('onclear', myEventDetail, myEventOption)<!-- 父组件 --><searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar><!-- 像绑定 bindtap 一样绑定自定义函数 -->
// 父组件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
之前把调用接口的部分写到了onLoad里，从文章列表进入详情页，在从详情页点击左上角回退返回列表页，列表页的阅读数应该更新，但是没有更新，因为没有重新调文章列表接口。
所以把调文章列表接口的部分写好了onShow里。
自定义 tabbar 优化
第一次优化，将组件封装的tabbar改成页面的模版形式
1、之前用组件的形式写的，改为了 template；tabbar 上的图标都改成的 iconfont，解决点击 tabbar 时候会闪的问题
<template name="tabbar"> <view class="tabbar-wrapper"> <block wx:for="{{tabbar.list}}" wx:key="item"> <navigator hover-class="none" class="tabbar_nav {{item.selected ?'selected':''}}" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="reLaunch"> <view class="tab-item"><text class="{{item.iconPath}}" style="width: {{item.iconWidth}};height: {{item.iconHeight}}"></text>{{item.text}}<text class='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
<homePage id="home-page" wx:if="{{tabbarID == tabbarList.home}}" bind:onclicktab="setTabbar" ></homePage><articleLibraryPage id="article-page" wx:if="{{tabbarID == tabbarList.article}}"></articleLibraryPage><doclistPage id="doctor-page" wx:if="{{tabbarID == tabbarList.doctor}}"></doclistPage><mePage id="me-page" wx:if="{{tabbarID == tabbarList.me}}"></mePage><tabbar id="tab-bar" bind:onclick="onClickTabbar" tabbarID="{{tabbarID}}"></tabbar>修改的地方：
带有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(); }},带来的问题：
每个tabbar都会有下拉刷新的效果，即使不需要下拉刷新
从其他页面点击按钮，直接跳到首页的某一个tab卡，可能会有问题
使用 iconfont
登录 iconfont.cn 下载 zip 包
解压缩，其中的 .tt