소규모 프로그램 개발 시 발생하는 몇 가지 문제를 요약하고 공유합니다. (함정 방지에 도움이 됨)

이 글은 이전에 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 不会真实渲染到页面上，只作为一个包裹元素，接受控制属性

写一个自定义组件

自定义组件分为 4 部分

• properties 组件接收的属性

properties: {
  // 输入框的默认提示
  placeholder: {
	type: String,  // 属性值的类型
	value: ''      // 属性默认值
  }
},

• data 组件数据

• methods 组件方法，一般内部方法用_开头

• 组件的生命周期函数，一般使用 ready，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）

调用父组件传入的方法

// 子组件
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)
}

父组件直接调用子组件的方法

// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法
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
// 在组件内部需要写 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

之前把调用接口的部分写到了onLoad里，从文章列表进入详情页，在从详情页点击左上角回退返回列表页，列表页的阅读数应该更新，但是没有更新，因为没有重新调文章列表接口。

所以把调文章列表接口的部分写好了onShow里。

自定义 tabbar 优化

第一次优化，将组件封装的tabbar改成页面的模版形式

1、之前用组件的形式写的，改为了 template；tabbar 上的图标都改成的 iconfont，解决点击 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、点击 tabbar 时，需要销毁之前的页面，在跳到需要跳转的页面，所以在 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 找到组件实例，调用内部方法
  	  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}}"
  	>滑动的内容
  	</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;
  }

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

• 상위 구성 요소는 하위 구성 요소의 메서드를 직접 호출합니다.

  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!