小程序组件

小程序组件

1.当多个页面用到同样的东西时候使用组件。
2.组件的使用步骤：
（1）首先在根目录创建components文件夹，然后在components文件夹下新建一个组件文件夹，在组件文件夹下创建Component将会创建出4个文件（.wxml、.wxss、.js、.app）如下图所示创建结构

（2）对组件进行配置（以轮播图为例）

• 对组件wxml编写
  
• 对组件json进行配置
  
• 对组件js进行配置

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    banner:{
      type:Array,
      value:[]
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    imgUrl:app.imgURL,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    on_click(e){
      console.log(e)
      this.triggerEvent('click',{product_id:e.currentTarget.dataset.id});
    }
  },
  ready(){
    console.log(this.properties);
  }
})

（3）导入组件（以轮播图为例）

• 首先在app.json中导入组件
  
• 在pages文件夹的index来引用组件
  
• 在index.wxml进行配置(这里的banner要和组件中的一致)

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

• 在index.js进行配置(这里的banner要和组件中、wxml的一致)