This article summarizes some of the problems encountered when developing WeChat mini programs before, and shares the solutions with you. I hope it will be helpful to everyone!

Please refer to the latest mini program documentation~:

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

Use #block to wrap the list

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

block will not be actually rendered on the page, but will only be used as a wrapping element and accept control attributes

Write a custom component

Custom components are divided into 4 parts

• #properties Properties received by the component

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

• data Component data

• methods Component methods, generally internal methods start with _

• The life cycle function of the component, generally use ready, Executed after the component layout is completed. At this time, the node information can be obtained (using SelectorQuery)

Call the method passed in by the parent component

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

The parent component directly calls the method of the child component

// 父組件，使用 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}});

Get the dom width and height from the child component

// 獲取屏幕寬度
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)
	})
})

OnLoad will not be called when the page returns

I wrote the part of calling the interface into onLoad before, enter the details page from the article list, and click on the upper left corner of the details page to return to the list page, the reading count of the list page should be updated, but it is not updated because the article list interface is not re-adjusted.

So the part of adjusting the article list interface is written in onShow.

Custom tabbar optimization

The first optimization is to change the tabbar encapsulated by the component into the template form of the page

1. Previously written in the form of components, it was changed to template; the icons on the tabbar were changed to iconfont to solve the problem of flashing when clicking the 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 ?&#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. When clicking the tabbar, the previous page needs to be destroyed , before jumping to the page that needs to be jumped, so reLaunch

is used in the navigator component for the second optimization, and the pages with tabbars are encapsulated into components and written on the page. Switching tabs in setData

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

Modifications:

• Pages with tabbars are rewritten into component form

• Because there is only the ready method after mounting is completed in the component, onShow, onReachBottom, and onPullDownRefresh in the previous page were all placed on the parent page to call

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

. Problems caused:

• Each tabbar will have a pull-down refresh effect, even if no pull-down refresh is required

• Click the button from other pages to jump directly to a tab card on the homepage. There may be problems

Use iconfont

##https://www.jianshu.com/p/1cfc074eeb75

• Log in to iconfont.cn and download the zip package

• Unzip the .ttf file at

  transfonter.org/ Convert to base64 format

• Write style.css into the newly created iconfont.wxss. Replace the above font file path with the base64 you just converted

• Import iconfont.wxss in app.wxss

Note: The style in the component itself is not affected by app.wxss. Therefore, when you need to use iconfont in the component, you need to do it manually. Refer to app.wxss or iconfont.wxss

The left sliding effect of the list

1. Bind the event to the parent element of the list

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

2. Modify the left value of the list item by judging the sliding distance

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

[Related learning recommendations:

小program development tutorial]

The above is the detailed content of Summarize and share some problems encountered in the development of small programs (to help avoid pitfalls). For more information, please follow other related articles on the PHP Chinese website!