Ringkaskan dan kongsi beberapa masalah yang dihadapi dalam pembangunan program kecil (untuk membantu mengelakkan perangkap)

Artikel ini meringkaskan beberapa masalah yang dihadapi semasa membangunkan program mini WeChat sebelum ini dan berkongsi penyelesaiannya dengan anda, saya harap ia akan membantu semua orang!

Sila rujuk dokumentasi program mini terkini~:

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

Gunakan block semasa memaparkan senarai

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

Gunakan block

semasa memaparkan senarai

Ia sebenarnya tidak akan dipaparkan pada halaman Ia hanya akan digunakan sebagai elemen yang dibalut dan menerima atribut kawalan

• Tulis komponen tersuai

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

Komponen tersuai terbahagi kepada 4 bahagian

sifat Sifat yang diterima oleh komponen

• data Data komponen

kaedah Kaedah komponen, secara amnya kaedah dalaman bermula dengan _

Fungsi kitaran hayat komponen , secara amnya gunakan sedia, dan lengkapkan reka letak komponen Selepas pelaksanaan, maklumat nod boleh diperolehi pada masa ini (menggunakan

// 子组件
var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据
var myEventOption = {} // 触发事件的选项
this.triggerEvent('onclear', myEventDetail, myEventOption)

SelectorQuery

<!-- 父组件 -->
<searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar>
<!-- 像绑定 bindtap 一样绑定自定义函数 -->

)

// 父组件
onSearch(e){
  console.log(e.detail.value)
}

Panggil kaedah diluluskan oleh komponen induk

// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法
let searchBar = this.selectComponent('#search-bar');
searchBar.setData({ value: e.currentTarget.dataset.name })
searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});

// 获取屏幕宽度
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)
	})
})

Komponen induk secara langsung memanggil kaedah komponen anak

Dapatkan lebar dan tinggi dom daripada komponen anak

OnLoad tidak akan dipanggil apabila halaman kembali

Sebelum ini, saya menulis bahagian memanggil antara muka ke onLoad, masukkan halaman butiran daripada senarai artikel, dan kemudian daripada butiran Klik sudut kiri atas halaman untuk kembali ke halaman senarai halaman senarai harus dikemas kini, tetapi ia tidak dikemas kini kerana antara muka senarai artikel belum dilaraskan semula.

Jadi bahagian melaraskan antara muka senarai artikel ditulis dalam onShow.

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

Pengoptimuman bar tab tersuaireLaunch

Pengoptimuman pertama ialah menukar bar tab yang dikapsulkan oleh komponen ke dalam bentuk templat halaman

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

1. Sebelum ini ditulis dalam bentuk komponen, ia ditukar kepada templat; ikon pada bar tab ditukar kepada iconfont untuk menyelesaikan masalah flash ketika mengklik tabbar

• 2. Apabila mengklik bar tab, ia perlu dimusnahkan sebelum Halaman melompat ke halaman yang perlu dilompat, jadi komponen navigator menggunakan

untuk pengoptimuman kedua Semua halaman dengan bar tab dikapsulkan ke dalam komponen dan ditulis pada halaman. SetData dalam halaman Menukar tab

• Pengubahsuaian:

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

Halaman dengan bar tab ditulis semula sebagai komponen

• Kerana hanya terdapat kaedah sedia selepas pemasangan selesai dalam komponen, onShow, onReachBottom dan onPullDownRefresh dalam halaman sebelumnya semuanya diletakkan pada halaman induk untuk memanggil

• . Masalah yang disebabkan oleh:

Setiap bar tab akan mempunyai kesan muat semula tarik-turun, walaupun tiada muat semula tarik-turun diperlukan

Klik butang dari halaman lain untuk melompat terus ke tab pada Kad halaman utama, mungkin terdapat masalah

• Gunakan font ikon

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

• Log masuk ke iconfont.cn untuk memuat turun pakej zip

• dan nyahzipnya. Fail .ttf berada di

  transfonter.org/

  Tukar yang di atas ke dalam format base64

Tulis style.css ke dalam iconfont.wxss yang baru dibuat . Gantikan laluan fail fon di atas dengan base64 yang baru anda tukar

In app.wxss import iconfont.wxss

Nota: Gaya dalam komponen itu sendiri tidak terjejas oleh app.wxss Oleh itu, apabila iconfont perlu digunakan dalam komponen, Anda perlu mengimport app.wxss atau iconfont.wxss secara manual

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

Gelongsor kiri. kesan senarai

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

1 Ikat pada elemen induk senarai Acara

2. Ubah suai nilai kiri item senarai dengan. menilai jarak gelongsor [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Atas ialah kandungan terperinci Ringkaskan dan kongsi beberapa masalah yang dihadapi dalam pembangunan program kecil (untuk membantu mengelakkan perangkap). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!