這篇文章給大家總結(jié)下之前開發(fā)微信小程式的時候遇到過一些問題，並將解決方案分享給大家，希望對大家有幫助！

請以小程式最新文件為準(zhǔn)～：

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

##block 不會真實渲染到頁面上，只作為一個包裹元素，接受控制屬性#寫一個自訂元件

properties 元件接收的屬性

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

data 元件資料
methods 元件方法，一般內(nèi)部方法用_開頭

• 元件的生命週期函數(shù)，一般使用ready，在元件佈局完成後執(zhí)行，此時可以取得節(jié)點資訊（使用

  SelectorQuery
）
• #呼叫父元件傳入的方法

  properties: {
    // 輸入框的默認(rèn)提示
    placeholder: {
  	type: String,  // 屬性值的類型
  	value: ''      // 屬性默認(rèn)值
    }
  },

  // 子組件
  var myEventDetail = {value: ''}; // detail對象，提供給事件監(jiān)聽函數(shù)，寫需要傳給外面的數(shù)據(jù)
  var myEventOption = {} // 觸發(fā)事件的選項
  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)
}

子元件中取得dom 寬高

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

#頁面返回時不會調(diào)用onLoad

之前把調(diào)用接口的部分寫到了onLoad裡，從文章列表進(jìn)入詳情頁，在從詳情頁點擊左上角回退返回列表頁，列表頁的閱讀數(shù)應(yīng)該更新，但是沒有更新，因為沒有重新調(diào)文章列表介面。

所以把調(diào)文章列表介面的部分寫好了onShow裡。 自訂tabbar 最佳化

第一次最佳化，將元件封裝的tabbar改為頁面的模版形式

1.之前用元件的形式寫的，改為了template；tabbar 上的圖示都改成的iconfont，解決點擊tabbar 時候會閃的問題

// 獲取屏幕寬度
let windowWidth = wx.getSystemInfoSync().windowWidth
// 在組件內(nèi)部需要寫 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ōu)化，將帶有tabbar的頁面都封裝成組件寫在頁面，在頁面中setData切換tab

<template name="tabbar">
	<view class="tabbar-wrapper">
		<block wx:for="{{tabbar.list}}" wx:key="item">
			<navigator hover-class="none" class="tabbar_nav {{item.selected ?&#39;selected&#39;:&#39;&#39;}}"  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=&#39;red-tag&#39; wx:if="{{tabbar.num && index==1}}">{{tabbar.num > 99 ? &#39;99+&#39; : tabbar.num}}</text></view>
			</navigator>
		</block>
	</view>
</template>

修改的地方：

有tabbar的頁面都重寫為元件形式

因為元件中只有掛載完成後的ready 方法，所以之前頁面中onShow，onReachBottom，onPullDownRefresh 都會放到父頁呼叫

• <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都會有下拉刷新的效果，即使不需要下拉刷新

#從其他頁面點擊按鈕，直接跳到首頁的某一個tab卡，可能會有問題

使用iconfont
#https://www.jianshu.com/p/1cfc074eeb75

登入iconfont.cn 下載zip 套件

#解壓縮，其中的.ttf 檔案在

上面轉(zhuǎn)成base64 格式
將style.css 寫入新建的iconfont.wxss 中，上面的字體檔案路徑用剛剛轉(zhuǎn)好的base64 取代

• #在app.wxss 中import iconfont.wxss

• #注意：元件中的樣式本身不受app.wxss 影響，因此，元件中需要使用iconfont 的時候，需要手動引一下app.wxss 或iconfont.wxss

• 清單的左滑效果

1、在清單的父元素上綁定事件

onPullDownRefresh: function () {
	if (this.data.tabbarID === this.data.tabbarList.article) {
	  // 使用 selectComponent 找到組件實例，調(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();
	}
},

<view  
	class="list-container"
	wx:for="{{doctorList.list}}"
	wx:key="{{index}}"
>
	<view
		bindtouchstart=&#39;onTouchStartListItem&#39;
		bindtouchmove=&#39;onTouchMoveListItem&#39;
		style="{{item.txtStyle}}"
	>滑動的內(nèi)容
	</view>
	<view class="backCover">滑動后顯示的按鈕</view>
</view>

2、透過判斷滑動距離修改清單項目的left 值

.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;
}

以上是總結(jié)分享一些小程式開發(fā)中遇到的問題（幫忙避坑）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！