微信小程序——自定义组件的使用

微信小程序——自定义组件

既然要使用自定义组件，首先我们要创建一个自定义组件包，那就先从创建开始
第一步：创建 右键新建 components(当然首字母大写也不是不可以的)

components为组件目录，pages为小程序的页面目录（这当然都是我们知道的）

组件中的内容

.wxml

<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000" bind:click="on_click">
  <view>
    <block wx:for="{{products}}">
      <swiper-item>
        <image 
          catchtap="on_click"
          data-id="{{item.id}}" 
          src="{{imgUrl}}{{item.image}}"
          class="slide-image" width="355" height="150" 
        />
      </swiper-item>
    </block>
  </view>
</swiper>

我这一块用的API接口，可以自己修改

.js（传入属性 在组件的 js 中定义你需要的属性名,类型及默认值，）代码如下：

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    products:{  //属性名
      type:Array,  //类型（必填)， 目前接受的类型包括：String,Number,Boolean,Object,Array,null(表示任意类型)
      value:[]
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    imgUrl:app.imgURL,

  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

.json（引用 在你需要引用的文件的 json 中定义）当然你可以放进app.json中

app.json

"usingComponents":{
    "Swiper":"./components/Swiper/index"
  },

.json（组件）

{
  "component": true,
  "usingComponents": {}
}

“component”: true (这里要重视一下，一般默认情况下都是true，如果不是true，一定记得改，不然容易出错)

最后，在主页的wxml中配置即可

<Swiper
  class="banner"
  products="{{banner}}"
  bind:click="on_product_click"
/>

警告：敲代码千千万万要细心哟（精细到每个字母），不然你会超级麻烦的！！！！！！！