Summarize and share some problems encountered in the development of small programs (to help avoid pitfalls)

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: {
  // 输入框的默认提示
  placeholder: {
	type: String,  // 属性值的类型
	value: ''      // 属性默认值
  }
},

• 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对象，提供给事件监听函数，写需要传给外面的数据
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)
}

The parent component directly calls the method of the child component

// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法
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
// 在组件内部需要写 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 找到组件实例，调用内部方法
	  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}}"
	>滑动的内容
	</view>
	<view class="backCover">滑动后显示的按钮</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) {
		// 记下触碰点距屏幕边缘的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!