使用didimpx 開發一個小程序組件

前文
準備工具 webstorm ide
npm i @mpxjs/col
小程序中 組件和頁面分的很明確， mpx中一樣
createComponent 創建一個組件
createPage 創建一個頁面
下面是一個上圖下文的list組件

代碼塊

<template>
	<view class="grids">
		<view class="grids-item"
					wx:for="{{rData}}"
					wx:for-index="index"
					wx:for-item="item"
					wx:key="index"
					bind:tap="handleGridsItem">
			<view>
				<image class="grids-icon" src="{{item.icon}}"></image>
			</view>
			<view class="grids-text">
				{{item.name}}
			</view>
		</view>
	</view>
</template>
<script>
  import { createComponent } from '@mpxjs/core'
  
  createComponent({
    mixins : [],
    properties : {  //小程序中依靠properties來傳遞 父組件數據 如同 vue 中 props
      rData : {
        type : Array,
        default : () => []
      }
    },
    data : {},
    computed : {},
    ready () {},
    methods : {
      handleGridsItem ( evt ) {
         this.triggerEvent('click',{evt},{})  //組件事件觸發監聽
      }
    }
  })
</script>
<style lang="less">
	.grids {
		display: block;
		width: 100%;
		padding-top: 12px;
	}

	.grids-item {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 12px 0;
		margin-bottom: 8px;
	}

	.grids-icon {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.grids-text {
		margin-top: 5px;
		font-size: 14px;
		font-weight: 500;
	}
</style>

<script type="application/json">
	{}
</script>

• ps:有了這個組件就可以做一些事情了

效果圖

附父組件監聽調用

<_grids rData="{{rDataList1}}" col="{{col}}" bind:click="handleGridsItem"></_grids>
mthods:{
	 handleGridsItem(item){
        	console.log(item);
        }
}