组件

• 目录结构
  

• 组件 self_item.js

  ...
  #item 定义主页面传值并定义该属性的类型
   properties: {
        item:Object
    }
  ...

• 组件 self_item.wxml

   <view class="item">
     <image wx:if="{{item.image}}" class="image" src="{{item.image}}" mode="aspectFill"></image>
     <text class="text">{{item.name}}</text>
  </view>

• 主页面注册组件 list.json

  {
  "usingComponents": {
    "list-item":"/components/list-item/list-item"
  }
  }

• 主页面数据初始化 list.js

  ...
   data: {
      listitem:[
            {
             id:"0",   
             image:"/assets/images/2.jpg", 
             title:"php-玩微信小程序系列",
             title1:"友儿",
             title2:"2300",
             isStart: true
            },
            {
             id:"1",   
             image:"/assets/images/2.jpg", 
             title:"java-玩微信小程序系列",
             title1:"笑话",
             title2:"800",
             isStart: false
            },
            {
             id:"2",   
             image:"/assets/images/2.jpg", 
             title:"python-玩微信小程序系列",
             title1:"晓明",
             title2:"8000",
             isStart: true
            }
        ]
  }
  ...

• 主页面 list.wxml 调用

   <block wx:for="{{listitem}}" wx:key="id">
    <list-item item="{{item}}"/>
  </block>