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

作者：龙 时间：2018-07-24 浏览：

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

1. 自定义组件

在开发过程中，加入有这样一种场景，就是在开发的过程中，我们一直要使用一些相同或者类似的结构，我们就可以自定义模块，方便使用，以及后期的维护，了解vue的同学就知道，其中此方法类似vue中的插槽（slot）；

2.创建自定义组件的方法

类似页面一样，类似于页面，一个自定义组件由 json、 wxml 、wxss、 js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件），例如要自定义一个common组件，需要在common.json中配置如下字段：

{
  "component": true
}

而其样式也页面的结构也是在对应的文件中编写，

<!--wxml-->
<view class="innertxt" bindtap='customMethod'>
  {{innerText}}
</view>
<view>
  {{color}}
</view>
<slot></slot>


<!--wxss-->

.innertxt{
  width:750rpx;
  color:red;
  font-size:24px;
}

<!--其中需要注意的是：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。为什么？呵呵-->

与页面和组件不同的是：在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

//其中数据data和方法methods的使用方法和页面的一样
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'hello weichar',//默认的值，可以在使用时传入
    }
  },
  data: {
    // 这里是一些组件内部数据
   
    color:'red'
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {
       console.log('点击了我')
       this.setData({
         color:'blue'
       })
     }
  }
})

3.自定义组件的使用

例如在index页面中，我们要使用上边的common自定义组件时，需要在index.json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{
  "usingComponents": {
    "common": "../components/common"
  }
}

再index.wxml中使用

<!--index.wxml-->
<import  src='../template/banner.wxml'/>
<view class="container">
  <image class='part01' src='../img/bg-about01.jpg'></image>
</view>
<view class='num'> {{count}} </view>
<view class='txt'wx:if="{{show=='part01'}}">hello weichar</view>
<button bindtap="add">点击我</button>
<template is="friutsItem"  data='{{friuts}}'/>
<common inner-text='good morning'></common>
<common></common>

编译后就会发现了效果，回头想一想这样的模块化是不是在使用中很方便，而且在以后的维护中也很容易。。。