Fassen Sie einige Probleme zusammen, die bei der Entwicklung kleiner Programme auftreten, und teilen Sie diese mit anderen (um Fallstricke zu vermeiden).

Dieser Artikel fasst einige der Probleme zusammen, auf die ich zuvor bei der Entwicklung von WeChat-Miniprogrammen gestoßen bin, und teile die Lösungen mit Ihnen. Ich hoffe, dass er für alle hilfreich sein wird!

Bitte beachten Sie die neueste Dokumentation des Miniprogramms~:

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

Beim Rendern der Liste verwenden block umschließt 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 wird nicht tatsächlich auf der Seite gerendert. Es wird nur als Umbruchelement verwendet und akzeptiert Steuerattribute

• Write eine benutzerdefinierte Komponente.

• Komponente Die normalerweise fertige Lebenszyklusfunktion wird ausgeführt, nachdem das Komponentenlayout abgeschlossen ist. Zu diesem Zeitpunkt können die Knoteninformationen abgerufen werden (verwenden Sie SelectorQuery

  )

Rufen Sie die von der übergeordneten Komponente übergebene Methode auf

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

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

  Die übergeordnete Komponente ruft direkt die Methode der untergeordneten Komponente auf
• Zuvor , Ich habe den Teil zum Aufrufen der Schnittstelle in onLoad geschrieben, die Detailseite aus der Artikelliste eingeben und dann aus der Detailseite auf die obere linke Ecke der Seite klicken, um zur Listenseite zurückzukehren aktualisiert werden, es wird jedoch nicht aktualisiert, da die Artikellistenoberfläche nicht neu angepasst wurde.
  Der Teil zum Anpassen der Artikellistenschnittstelle ist also in onShow geschrieben.

Benutzerdefinierte Tabbar-Optimierung

Die erste Optimierung besteht darin, die komponentengekapselte Tableiste in die Vorlagenform der Seite zu ändern

1. Was zuvor in Form von Komponenten geschrieben wurde, wurde in eine Vorlage geändert Die Tableiste wurde geändert. Die Symbolschrift wurde erstellt, um das Problem des Blinkens beim Klicken auf die Tableiste zu lösen reLaunch wird in der Navigatorkomponente verwendet

• Die zweite Optimierung besteht darin, die Seiten mit Tabbars in Komponenten zu kapseln und sie auf die Seite zu schreiben. Verwenden Sie setData, um die Tabs auf der Seite zu wechseln.

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

  Änderung:

• The Seiten mit Tabbars werden in Komponenten umgeschrieben Das Problem wurde verursacht durch:

• Jede Tab-Leiste verfügt über ein Dropdown-Menü mit dem Aktualisierungseffekt, auch wenn zum Aktualisieren kein Herunterziehen erforderlich ist.

• Klicken Sie auf anderen Seiten auf die Schaltfläche, um direkt zu einer Tab-Karte zu springen Auf der Homepage kann es zu Problemen kommen

Iconfont verwenden

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

Melden Sie sich bei iconfont.cn an, um das Zip-Paket herunterzuladen

Entpacken Sie es und konvertieren Sie die .ttf-Datei in das Base64-Format auf transfonter.org/

🎜🎜🎜🎜Style. Der oben genannte Schriftartdateipfad wird durch das Base64-Format ersetzt wurde gerade konvertiert. Importieren Sie iconfont.wxss in app.wxss. Hinweis: Die Stile in den Komponenten selbst werden von der App nicht beeinflusst. Wenn Sie iconfont in einer Komponente verwenden müssen, müssen Sie daher manuell auf die App verweisen. wxss oder iconfont.wxss🎜🎜🎜🎜Der linke Gleiteffekt der Liste🎜🎜🎜🎜1. Binden Sie Ereignisse an das übergeordnete Element der Liste rrreee🎜[Verwandte Lernempfehlungen: 🎜Mini-Tutorial zur Programmentwicklung🎜]🎜

Das obige ist der detaillierte Inhalt vonFassen Sie einige Probleme zusammen, die bei der Entwicklung kleiner Programme auftreten, und teilen Sie diese mit anderen (um Fallstricke zu vermeiden).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!