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

在写小程序代码的时候，我们发现经常有一段代码我们经常敲，经常使用某一自定义组件，例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码；微信小程序里的弹窗提示可以使用在多个地方…

小程序自定义组件

找到components目录，没有就新建

在compoents目录里新建一个用于存放代码的目录（下面用g-swiper表示）
在g-swiper目录里新建Compoent(名字自取)，新建后会和新建Page时一样自动生成四个页面文件（g-swiper.wxml g-swiper.wxss g-swiper.js g-swiper.json）

轮播图实例

<g-swiper list="{
   {imageList}}" g-class="swiper"/>

在index.wxml里只需要这简短一行代码就能实现一个轮播图组件

json声明

要想使用组件必先声明，在index.json里声明组件名称和地址

{
   
  "usingComponents": {
   
    "g-swiper":"/components/g-swiper/g-swiper"
  }
}

在组件的json也必须的声明，g-swiper.json（下面代码直接复制报错请将注释删掉）

{
   
  "component": true,        // 自定义组件声明
  "usingComponents": {
   }     // 可选项，用于引用别的组件
}

wxml和wxss

wxml和wxss里的代码跟普通页面里的代码没什么区别
g-swiper.wxml代码

<swiper class="g-class" circular autoplay interval='3000' duration='300' indicator-dots indicator-active-color='#fffff'>
  <block wx:for="{
   {list}}" wx:key="{
   {index}}">
    <swiper-item class="swiper-item">
      <image src="{
   {item}}"/>
    </swiper-item>
  </block>
</swiper>

g-swiper.wxss代码

.swiper-item image{
   
  width:100%;
  height:100%
}

js

js代码和普通页面js代码有所不同，这里是用Component包起来的而不是被Page包起来的
js代码

Component({
   
  externalClasses:["g-class"],
  properties: {
   
      list:{
   
        type:Array,
        value:[]
      }
  },
})

注意：这里的g-class样式和list数据我将它的定义权利交给引入它的一方，这里是index页面引入它

组件绑定外部方法

组件绑定外部方法的方式，以一自定义button为例
g-btn.wxml代码

<button bindtap="btnTest">g-btn</button>

g-btn.js代码

Component({
   
  methods: {
   
     /*
     * 公有方法
     */
    btnTest:function(){
   
      this.triggerEvent('action')
    }
  }
})

在index里引入并且展示出来<