微信小程序-自定义组件

2018-05-10 本文已影响0人鱼放放

在项目开发中，经常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”等，可能会在多个页面中用到，直接copy，paste可以在各个页面中实现，但相对麻烦，而且copy的时候容易漏，也容易出现各种各样的问题，比如变量名，参数什么的。在微信小程序中，小程序基础库提供了自定义组件的功能，开发者可以自己把类似的交互模块抽离成组件。

先看一波效果图（因为平时项目中搜索框应用的比较多，所以以搜索框的实现为例）

效果图

在实现自定义组件时我们要用到Component构造器详细使用方法请参考微信官方文档

实现步骤

步骤一

在项目的目录下创建Component（微信web开发工具中可以右键直接创建，创建后在相应的js文件中会有相应的代码实现）。

Component创建图示

创建后会自动生成js，wxml，wxss，json文件。

image.png

json 文件：用于放置一些最基本的组件配置

wxml 文件：组件模版

wxss 文件：组件的样式，只在组件内部节点上生效（这个文件是可选的）

js 文件：组件的 JS 代码，承载组件的主要逻辑

在创建好的js文件中会默认生成Componet构造器，具体代码和注释如下：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

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

具体的属性，数据，方法等可参照微信官方文档，一般情况下，默认创建的properties，data，methods可以满足实现需求，具体使用以实际情况为准。

步骤二

在wxml实现组件，具体实现布局样式及相关事件和监听同一般情况下的实现。

因在实现时考虑到输入框默认提示语placeHolder各个界面可能会不一样，所以将placeHolder的值定义成动态

搜索框实现的逻辑是当input内容为空时删除按钮隐藏，input内容不为空时删除按钮显示，点击删除按钮input内容置空，并删除按钮隐藏，因这些操作逻辑可以在组件内部实现，所以定义了相关属性便于监听和控制样式显示，如inputValue,hiddenClear。

组件实现示例：

<view class='searchview'>
  <icon class="iconStyle" type="search" size="25" />
  <input class='inputStyle' bindinput='inputEvent' placeholder='{{initHolder}}' value='{{inputValue}}'></input>
  <icon class="iconStyle" type="clear" size="25" hidden='{{hiddenClear}}' bindtap='clearEvent' />
</view>

.searchview{
  width: 90%;
  height: 50rpx;
  display: flex;
  flex-direction: row;
  align-content: center;
  border: 2rpx solid gainsboro;
  border-radius: 10rpx;
  margin: 12rpx;
  padding: 12rpx;
}
.iconStyle{
  color: gainsboro
}

.inputStyle{
  height: 50rpx;
  margin-left: 12rpx;
  flex-grow: 1;
}

步骤三

js文件的实现。
在自定义组件时，最大的实现区别就是JS文件的实现了。
创建Component时默认创建了properties，data，methods。因实现搜索框时暂未用到Component其他属性，所以暂不对其他属性做解释和示例。

properties
在Component构造器中properties主要是定义wxml内属性的类型（type），初始值（value），执行函数（observer）。
properties内的属性名是可以在外部界面引用组件时作为组件的属性直接引用的，而且属性值是可以动态传递更改的，属性值的类型即properties中定义的type类型
微信官方示例注释为：

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },

组件实现示例：

  properties: {
    //initHolder即在wxml布局文件中placeHolder的属性值名称  
    initHolder: {  
      type: String
    }
  },

data
data内容比较好理解，主要功能是提供数据进行模板渲染。使用方法与一般界面实现相同。

组件实现示例：

 data: {
    inputValue: "",
    hiddenClear:true   //默认隐藏删除按钮
  },

methods
methods中的方法可以用来包含组件的事件回调函数，回调函数中可以实现组件内部操作逻辑，也可以使用triggerEvent向页面发送事件，发送后在页面中使用bind、catch就能监听到。
组件实现示例：

 methods: {
   //对input组件输入内容进行监听
    inputEvent: function (e) {
     //内容不为空时显示删除图标
       if ( e.detail.value != "") {
        this.setData({
          hiddenClear: false
        })
      } else {
        this.setData({
          hiddenClear: true
        })
      }
     //使用triggerEvent向页面发送事件，事件回调的内容为e.detail
      this.triggerEvent("searchViewInputEvent", e.detail)     
    },
    //点击删除图标时的操作
    clearEvent: function () {
      this.setData({
        inputValue: "",
        hiddenClear: true
      })
     //发送事件，无内容回调时可发送{}
      this.triggerEvent("clearEvent",{})
    }
  }

triggerEvent方法中第一个参数定义的是回调属性名，在外部界面引用组件时只需要实现bind+属性名就可以对事件进行监听。如示例代码中 this.triggerEvent("searchViewInputEvent", e.detail) 在外部引用时引用属性bindsearchViewInputEvent或者bind:searchViewInputEvent即可，也可以使用catch实现

完整示例代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //initHolder即在wxml布局文件中placeHolder的属性值名称  
    initHolder: {  
      type: String
    }
  },

  /**
   * 组件的初始数据
   */
   data: {
    inputValue: "",
    hiddenClear:true   //默认隐藏删除按钮
  },

  /**
   * 组件的方法列表
   */
 methods: {
   //对input组件输入内容进行监听
    inputEvent: function (e) {
     //内容不为空时显示删除图标
       if ( e.detail.value != "") {
        this.setData({
          hiddenClear: false
        })
      } else {
        this.setData({
          hiddenClear: true
        })
      }
     //使用triggerEvent向页面发送事件，事件回调的内容为e.detail
      this.triggerEvent("searchViewInputEvent", e.detail)     
    },
    //点击删除图标时的操作
    clearEvent: function () {
      this.setData({
        inputValue: "",
        hiddenClear: true
      })
     //发送事件，无内容回调时可发送{}
      this.triggerEvent("clearEvent",{})
    }
  }
})

在微信web开发者工具中新建Component后生成的json文件中会默认添加"component": true，如果不是采用新增Component方式新建的json等文件，请注意在json文件中添加"component": true,，添加后组件才可被引用

步骤四

上述步骤实现完毕后，自定义组件可以在外部界面进行引用啦。

json文件配置。
1.添加usingComponents进行使用组件声明。
2.定义组件的标签名，类似于<button></button>中的button的名称定义，定义后可以对应的wxml中通过<标签名></标签名>进行组件的引用
3.关联自定义组件的项目路径
示例代码：

{
  "usingComponents":{
    "custom-searchview":"../../components/search/common-search"
  }
}

wxml组件的引用
示例代码：

<view>
  <custom-searchview bindsearchViewInputEvent="inputLintener" bindclearEvent="clearListener" initHolder="这是一个搜索框">
  </custom-searchview>
  <text>{{inputValue}}</text>  
</view>

标签<custom-searchview>中custom-searchview是在上述json文件中定义的标签名。

bindsearchViewInputEvent和bindclearEvent是在组件js文件实现时定义的事件名添加bind后组成的属性名，添加bind后即可进行绑定监听

initHolder是组件实现时在properties内定义为String类型的属性名

inputValue只是为了方便显示搜索框输入时监听的内容值

js文件的实现
因搜索框组件内部已经实现了简易的逻辑处理，如删除图标的显示和点击后清除数据。所以页面的js中只简单的实现了输入内容值的回调获取。
示例代码：

  Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputValue:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  inputLintener:function(e){
    console.log(e.detail.value)
    this.setData({
      inputValue: e.detail.value
    })
  },

  clearListener:function(){
    this.setData({
      inputValue: ""
    })
  }

inputLintener:function(e)中的e值是在使用triggerEvent向界面发送数据时回调的e.detail值内容，具体参照步骤三中的methods实现

哈哈哈，完成后运行即可看到上面的效果图啦~~~

佛祖保佑，永无BUG

微信小程序-自定义组件

实现步骤

步骤一

步骤二

步骤三

步骤四

猜你喜欢

热点阅读