本篇文章給大家總結(jié)下之前開(kāi)發(fā)微信小程序的時(shí)候遇到過(guò)一些問(wèn)題，并將解決方案分享給大家，希望對(duì)大家有所幫助！
請(qǐng)以小程序最新文檔為準(zhǔn)～：
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
渲染列表時(shí)用 block 包裹
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>block 不會(huì)真實(shí)渲染到頁(yè)面上，只作為一個(gè)包裹元素，接受控制屬性
寫(xiě)一個(gè)自定義組件
自定義組件分為 4 部分
properties 組件接收的屬性
data 組件數(shù)據(jù)
methods 組件方法，一般內(nèi)部方法用_開(kāi)頭
組件的生命周期函數(shù)，一般使用 ready，在組件布局完成后執(zhí)行，此時(shí)可以獲取節(jié)點(diǎn)信息（使用 SelectorQuery ）
調(diào)用父組件傳入的方法
// 子組件
var myEventDetail = {value: ''}; // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)，寫(xiě)需要傳給外面的數(shù)據(jù)
var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
this.triggerEvent('onclear', myEventDetail, myEventOption)<!-- 父組件 --> <searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章內(nèi)容"></searchbar> <!-- 像綁定 bindtap 一樣綁定自定義函數(shù) -->
// 父組件
onSearch(e){
console.log(e.detail.value)
}父組件直接調(diào)用子組件的方法
// 父組件，使用 selectComponent 拿到子組件的實(shí)例，直接調(diào)用其中的方法
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
// 在組件內(nèi)部需要寫(xiě) this
let 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)
})
})頁(yè)面返回時(shí)不會(huì)調(diào)用 onLoad
之前把調(diào)用接口的部分寫(xiě)到了onLoad里，從文章列表進(jìn)入詳情頁(yè)，在從詳情頁(yè)點(diǎn)擊左上角回退返回列表頁(yè)，列表頁(yè)的閱讀數(shù)應(yīng)該更新，但是沒(méi)有更新，因?yàn)闆](méi)有重新調(diào)文章列表接口。
所以把調(diào)文章列表接口的部分寫(xiě)好了onShow里。
自定義 tabbar 優(yōu)化
第一次優(yōu)化，將組件封裝的tabbar改成頁(yè)面的模版形式
1、之前用組件的形式寫(xiě)的，改為了 template；tabbar 上的圖標(biāo)都改成的 iconfont，解決點(diǎn)擊 tabbar 時(shí)候會(huì)閃的問(wèn)題
<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、點(diǎn)擊 tabbar 時(shí)，需要銷(xiāo)毀之前的頁(yè)面，在跳到需要跳轉(zhuǎn)的頁(yè)面，所以在 navigator 組件用了 reLaunch
第二次優(yōu)化，將帶有tabbar的頁(yè)面都封裝成組件寫(xiě)在頁(yè)面，在頁(yè)面中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的頁(yè)面都重寫(xiě)為組件形式
因?yàn)榻M件中只有掛載完成后的 ready 方法，所以之前頁(yè)面中 onShow，onReachBottom，onPullDownRefresh 都放到父頁(yè)面調(diào)用
onPullDownRefresh: function () {
if (this.data.tabbarID === this.data.tabbarList.article) {
// 使用 selectComponent 找到組件實(shí)例，調(diào)用內(nèi)部方法
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();
}
},帶來(lái)的問(wèn)題：
每個(gè)tabbar都會(huì)有下拉刷新的效果，即使不需要下拉刷新
從其他頁(yè)面點(diǎn)擊按鈕，直接跳到首頁(yè)的某一個(gè)tab卡，可能會(huì)有問(wèn)題
使用 iconfont
登錄 iconfont.cn 下載 zip 包
解壓縮，其中的 .ttf 文件在 transfonter.org 上面轉(zhuǎn)成 base64 格式
將 style.css 寫(xiě)入新建的 iconfont.wxss 中，上面的字體文件路徑用剛剛轉(zhuǎn)好的 base64 替代
在 app.wxss 中 import iconfont.wxss
注意：組件中的樣式本身不受 app.wxss 影響，因此，組件中需要使用 iconfont 的時(shí)候，需要手動(dòng)引一下 app.wxss 或者 iconfont.wxss
列表的左滑效果
1、在列表的父元素上綁定事件
<view
class="list-container"
wx:for="{{doctorList.list}}"
wx:key="{{index}}"
>
<view
bindtouchstart='onTouchStartListItem'
bindtouchmove='onTouchMoveListItem'
style="{{item.txtStyle}}"
>滑動(dòng)的內(nèi)容
</view>
<view class="backCover">滑動(dòng)后顯示的按鈕</view>
</view>.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、通過(guò)判斷滑動(dòng)距離修改列表項(xiàng)的 left 值
onTouchStartListItem: function (e) {
// 是單指觸碰
if (e.touches.length === 1) {
// 記下觸碰點(diǎn)距屏幕邊緣的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
}
});
}
},
