? ?? ??? WeChat ?? ????? ??? ? ?? ? ?? ??? ???? ?? ??? ???? ?????. ???? ??? ??? ????!

?? ????? ?? ??? ?????~:

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

?? ??? ? ?? block ? block 包裹

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

block 不會(huì)真實(shí)渲染到頁(yè)面上，只作為一個(gè)包裹元素，接受控制屬性

寫(xiě)一個(gè)自定義組件

自定義組件分為 4 部分

• properties 組件接收的屬性

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

• 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 ?&#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>

2、點(diǎn)擊 tabbar 時(shí)，需要銷(xiāo)毀之前的頁(yè)面，在跳到需要跳轉(zhuǎn)的頁(yè)面，所以在 navigator 組件用了 reLaunch

<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>

block? ??? ???? ????? ????. ?? ?? ???? ???? ?? ??? ?????.

• Write ??? ?? ?? ??

• ??? ?? ?? ??? 4???? ????

properties ?? ??? ?? ??

• 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();
  	}
  },

• ??? ?? ?? ???

??? ?? ?? ???, ?? ?? ???? _? ?????.

???? ????? ??? Life Cycle ??? ???? ????? ??? ? ?????. ?? ?? ??? ?? ? ????(SelectorQuery )

• ?? ?? ???? ??? ??? ??

  <view  
  	class="list-container"
  	wx:for="{{doctorList.list}}"
  	wx:key="{{index}}"
  >
  	<view
  		bindtouchstart=&#39;onTouchStartListItem&#39;
  		bindtouchmove=&#39;onTouchMoveListItem&#39;
  		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;
  }

  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
  			}
  		});
  	}
  },

• ?? ?? ??? ?? ?? ??? ???? ?? ?????.

  rrreee

  ?? ?? ???? ? ??? ??? ?????.
• rrreee

onLoad? ???? ??? ? ???? ????
?? , onLoad?? ?????? ???? ??? ????, ?? ???? ???? ???? ??? ??, ?????? ?? ???? ????? ??? ?? ??? ?????. ????? ???, ?? ?? ?????? ????? ?? ????? ?? ????.

??? ?? ?? ?????? ???? ??? onShow? ???? ????.

??? ?? ???

? ?? ???? ????? ???? ??? ???? ??? ??? ???? ????

1 ??? ???? ??? ????? ??? ????? ???????. ??? ???????. ?? ??? ???? ??? ???? ?? ??? ??? ???????

rrreee

2. ?? ?? ? ???? ? ???? ???? ?? ?? ???? ????? ??? reLaunch? ????? ?? ???? ?????. ? ?? ???? ? ???? ?? ???? ?? ??? ????? ???? ???? ????. setData? ???? ????? ?? ?????

rrreee???? ??: ????????The ??? ?? ???? ????? ?? ??????? ???????????? ???? ??? ? Ready ???? ?? ??? ?? ???? onShow, onReachBottom, onPullDownRefresh? ?? ?? ???? ???? ??????rrreee??? ?????. ?? ??: ?????????? ??? ????? ????. ?? ??? ?? ??? ?? ??? ???? ?? ?? ???????????? ????? ??? ???? ? ??? ?? ??? ? ????. ?????? ??? ?? ? ????????????????iconfont ??????????https://www.jianshu.com/p/1cfc074eeb75????????iconfont.cn? ????? zip ???? ????????????? ????? ?? ??transfonter.org/??????????Style?? .ttf ??? base64 ???? ?????. CSS? ?? ??? iconfont.wxss? ?????. app.wxss?? iconfont.wxss? ?????. ??: ?? ?? ??? ???? wxss? ??? ?? ???? ?? ???? iconfont? ???? ?? ?? ?? ???? ???? ???. wxss ?? iconfont.wxss??????????? ?? ???? ??????????1. ??? ?? ??? ???? ??????.??rrreeerrreee ??2 ???? ??? ???? ?? ??? ?? ?? ?????. rrreee??[?? ?? ??: ??Mini ???? ?? ??????]??

? ??? ??? ???? ?? ? ???? ? ?? ??? ???? ?????. (?? ??? ??? ?)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!