Résumer et partager quelques problèmes rencontrés dans le développement de petits programmes (pour éviter les pièges)

Cet article résume certains des problèmes que j'ai rencontrés lors du développement de mini-programmes WeChat auparavant et partage les solutions avec vous. J'espère qu'il sera utile à tout le monde !

Veuillez vous référer à la dernière documentation du mini programme ~ :

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

Utiliser lors du rendu de la liste Les wraps 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 ne seront pas réellement rendus sur la page. Il est uniquement utilisé comme élément d'habillage et accepte les attributs de contrôle

• Write. un composant personnalisé

• Les composants personnalisés sont divisés en 4 parties

propriétés propriétés reçues par le composant

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

• données du composant

méthodes des composants, les méthodes internes générales commencent par _

composant La fonction de cycle de vie, généralement prête, est exécutée une fois la disposition du composant terminée. À ce moment, les informations sur le nœud peuvent être obtenues (utilisez SelectorQuery )

• Appelle la méthode transmise par le composant parent

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

• Le composant parent appelle directement la méthode du composant enfant

  rrreee

  Obtenir la largeur et la hauteur du dom du sous-composant
• rrreee

onLoad ne sera pas appelé au retour de la page
Auparavant , j'ai écrit la partie consistant à appeler l'interface dans onLoad, entrez la page de détails à partir de la liste d'articles, puis à partir des détails, cliquez sur le coin supérieur gauche de la page pour revenir à la page de liste. Le nombre de lectures de la page de liste devrait. être mis à jour, mais il n'est pas mis à jour car l'interface de la liste d'articles n'a pas été réajustée.

Donc, la partie d'ajustement de l'interface de la liste d'articles est écrite dans onShow.

Optimisation de la barre d'onglets personnalisée

La première optimisation consiste à changer la barre d'onglets encapsulée par le composant en forme de modèle de la page

1 Ce qui était écrit auparavant sous forme de composants a été modifié en modèle ; la barre d'onglets a été modifiée L'iconfont est créé pour résoudre le problème de clignotement lorsque vous cliquez sur la barre d'onglets

rrreee

2 Lorsque vous cliquez sur la barre d'onglets, la page précédente doit être détruite avant de passer à la page qui doit être sautée, donc . reLaunch est utilisé dans le composant navigateur La deuxième optimisation consiste à encapsuler les pages avec des barres d'onglets dans des composants et à les écrire sur la page. Utilisez setData pour changer d'onglet dans la page

rrreee🎜Modification : 🎜🎜🎜🎜Le. les pages avec des barres d'onglets sont réécrites en composants🎜 🎜🎜🎜Comme il n'y a que la méthode ready une fois le montage terminé dans le composant, onShow, onReachBottom et onPullDownRefresh dans la page précédente sont tous placés sur la page parent pour appeler 🎜🎜🎜rrreee🎜 Le problème causé par : 🎜🎜🎜🎜Chaque barre d'onglets aura une liste déroulante L'effet d'actualisation, même s'il n'est pas nécessaire de dérouler vers le bas pour actualiser🎜🎜🎜🎜Cliquez sur le bouton depuis d'autres pages pour accéder directement à une carte d'onglet sur la page d'accueil, il peut y avoir des problèmes🎜🎜🎜🎜🎜🎜Utilisez iconfont🎜🎜🎜🎜https://www .jianshu.com/p/1cfc074eeb75🎜🎜🎜🎜Connectez-vous à iconfont.cn pour télécharger le package zip🎜🎜🎜 🎜Décompressez-le et convertissez le fichier .ttf au format base64 sur 🎜transfonter.org/🎜🎜🎜🎜🎜Style Le CSS est écrit dans le fichier iconfont.wxss nouvellement créé. Le chemin du fichier de police ci-dessus est remplacé par le base64 qui a. vient d'être converti. Importez iconfont.wxss dans app.wxss Remarque : Les styles des composants eux-mêmes ne sont pas affectés par l'application wxss. Par conséquent, lorsque vous devez utiliser iconfont dans un composant, vous devez référencer manuellement l'application. wxss ou iconfont.wxss🎜🎜🎜🎜L'effet de glissement vers la gauche de la liste🎜🎜🎜🎜1 Lier les événements sur l'élément parent de la liste🎜rrreeerrreee 🎜2. rrreee🎜[Recommandations d'apprentissage associées : 🎜Tutoriel de développement de mini-programmes🎜]🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!