微信小程序组件化便捷开发

一、wxml文件

组件根据父组件传参来判定当前template name

<template name="goods-1">
  <view class="goods-1">
    <image class="goods-img" src="http://xxxxx.com/2020/04/16/f4e3ff0f-7fb8-4c16-8bca-a40b8331f475.jpg!260x260"></image>
    <view class="goods-info">
      <view class="goods-title">
        <!-- <image src=""></image> -->
        <text>小叮当吹风机小叮当吹风机</text>
      </view>
      <text class="desc">小叮当吹风机明星爆款学生官方旗点在小叮当吹风机明星爆款学生官方旗点在</text>

      <view>

      </view>
      <view>
      
      </view>
    </view>
  </view>
</template>


<template is="goods-1" data="{{...item}}" />

二、 css文件

@import './goods-1.wxss';

三、js文件

const computedBehavior = require('miniprogram-computed')


Component({
  behaviors: [computedBehavior],
  properties: {
    goodsImg: {
      type: String,
      value: '',
    },
    title: {// 标题
      type: String,
      value: ''
    },
    price: {// 价格
      type: Number,
      value: 0,
    },
    monthlySales: Number, // 月销量
    firstLevelRate: Number, // 返利比例
    parameters: {// 参数列表
      type: Array,
      value: []
    },
  },
  computed: {
    parametersString(data) {
      return (
        data.parameters &&
        data.parameters.length &&
        data.parameters
          .filter(v => v.paramValueName)
          .map(v => v.paramValueName)
          .join(" | ")
      );
    },
  },

  ready() {
    
  },
  methods: {
    goDetail(){
      this.triggerEvent("aaa");
    }
  }
})

四、 文件目录

五、引用

根据引用传参：如data={goods-1}

	<view class="label-goods__list">
		<block wx:for="{{labelGoods}}" wx:for-index="idx" wx:key="idx">
			<goods-item  ></goods-item>
		</block>
	</view>
	
	// josn文件配置 引用
	{
	  "navigationStyle": "custom",
	  "usingComponents": {
	    "goods-item": "/components/GoodsItem/index",
	  },
	  "onReachBottomDistance": 50
	}