微信小程序组件

微信小程序

1.目录结构
  app.js
│  app.json
│  app.wxss
│  project.config.json
│  sitemap.json
│
├─components
│  └─goods
│          goods.js
│          goods.json
│          goods.wxml
│          goods.wxss
│
└─pages
    └─index
            index.js
            index.json
            index.wxml
            index.wxss
			
注册组件index.json
{
  "usingComponents": {
    "goods": "/components/goods/goods"
  }
}
使用组件
<goods></goods>


// 数据渲染 index.wxml
<block wx:for="{{shopList}}" wx:key='id'>
	<goods itemModel="{{item}}"></goods>
</block>

// goods.js
properties: {
	itemModel: Object
}

// good.wxml
<view>
	{{itemModel.product_name}}
</view>