小さなプログラムの開発で遭遇するいくつかの問題を要約して共有します (落とし穴を避けるために)

この記事は、以前に WeChat ミニ プログラムを開発するときに遭遇した問題のいくつかを要約し、その解決策を共有します。

最新のミニ プログラム ドキュメントを参照してください~:

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

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

#Get子コンポーネントからの 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で書かれています。

#カスタム タブバーの最適化

最初の最適化は、コンポーネントによってカプセル化されたタブバーをページのテンプレート フォームに変更することです 1. 以前はコンポーネント形式で記述していましたが、テンプレートに変更されました。タブバーをクリックすると点滅する問題を解決するために、タブバー上のアイコンは iconfont に変更されました。

<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. タブバーをクリックしたとき、ジャンプする必要があるページにジャンプする前に、前のページを破棄する必要があるため、

reLaunch

は 2 番目の最適化のナビゲーター コンポーネントとタブバーのあるページで使用されます。 setData でのタブの切り替え <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;homePage id=&quot;home-page&quot; wx:if=&quot;{{tabbarID == tabbarList.home}}&quot; bind:onclicktab=&quot;setTabbar&quot; &gt;&lt;/homePage&gt; &lt;articleLibraryPage id=&quot;article-page&quot; wx:if=&quot;{{tabbarID == tabbarList.article}}&quot;&gt;&lt;/articleLibraryPage&gt; &lt;doclistPage id=&quot;doctor-page&quot; wx:if=&quot;{{tabbarID == tabbarList.doctor}}&quot;&gt;&lt;/doclistPage&gt; &lt;mePage id=&quot;me-page&quot; wx:if=&quot;{{tabbarID == tabbarList.me}}&quot;&gt;&lt;/mePage&gt; &lt;tabbar id=&quot;tab-bar&quot; bind:onclick=&quot;onClickTabbar&quot; tabbarID=&quot;{{tabbarID}}&quot;&gt;&lt;/tabbar&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 変更点:

タブバーのあるページはコンポーネント形式に書き換えられます

• コンポーネントにはマウントが完了した後のreadyメソッドしかないため、前ページのonShow、onReachBottom、onPullDownRefreshをすべて親ページに配置して

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

  #を呼び出しました。 ##. 発生する問題:

プルダウンの更新が必要ない場合でも、各タブバーにはプルダウンの更新効果があります

• 他のページからボタンをクリックすると、ホームページのタブ カードに直接ジャンプします。問題が発生する可能性があります。

• アイコンフォントを使用してください

##https://www.jianshu.com/p/1cfc074eeb75iconfont.cn にログインし、zip パッケージをダウンロードします

• transfonter.org/

  で .ttf ファイルを解凍します。base64 形式に変換します。

• 新しく作成した iconfont.wxss に style.css を書き込みます。上記のフォント ファイル パスを置き換えます。変換したばかりの Base64 を使用して

iconfont.wxss を app.wxss にインポートします
注: コンポーネント自体のスタイルは、コンポーネント自体のスタイルには影響しません。 app.wxss. したがって、コンポーネント内で iconfont を使用する必要がある場合は、手動で行う必要があります。app.wxss または iconfont.wxss
の左スライド効果を参照してください。 list

1. リストの親要素にイベントをバインドします

<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. スライド距離を判断してリスト項目の左側の値を変更します

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

[関連する学習の推奨事項: 小さなプログラム開発チュートリアル

]

以上が小さなプログラムの開発で遭遇するいくつかの問題を要約して共有します (落とし穴を避けるために)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。