简单-定义一个小程序组件

栏目: IOS · Android · 发布时间: 6年前

内容简介:当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。自定义的组成和小程序的一般页面的结构一样。由:js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。

当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。

2. 自定义组件组成

自定义的组成和小程序的一般页面的结构一样。由: js\json\wxml\wxss 四个文件构成,其中:

js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。

我将按照如下顺序,定义一个简单的组件。

1、编写组件的页面,仅仅显示一行文字,以演示建立和编写组件的文件。
2、引用上一步编写的组件,以演示如何引用自定义组件。
3、编写组件逻辑结构,实现组件数据由 js 逻辑控制,组件内部实现响应用于操作事件。
4、提供接口用于回调组件内部事件。
5、提供方法以便外部直接调用使用组件。
复制代码

二、实现自定义组件

1、新建组件

在定好的目录下右键新建一个 Component 目录,系统会自动帮助我们创建好自定义组件的四个必要文件,步骤与结果如图一、二所示。

简单-定义一个小程序组件
简单-定义一个小程序组件

下面我们来编写组件 wxml 文件内容。

// test-component.wxml 的内容
<text>这是自定义组件</text>
复制代码

组件 json 内容 如果是使用微信开发者 工具 建立的 component 文件,那么 ide 会帮助我们自动创建如下代码(手动的自己添加就好):

{
  "component": true,
  "usingComponents": {}
}
// component 表明组件的身份。
// usingComponents 组件引用的子组件(组件是可以使用别的自定义组件的,系统组件无需声明)
复制代码

组件 js 内容,ide 会自动创建如下代码:

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

  },

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

  },

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

  }
})

复制代码

组件的 wxss 我们可以暂时不用理会,就是一般的样式代码。

到这里我们的一个简单的自定义组件就已经完成,下面进行引用。

2、使用自定义组件

使用自定义组件只需要两步:

第一、在需要引用的页面 json 配置代码中添加如下配置:

"usingComponents": {
    "test-1": "/pages/component/test-component"
  }
  // usingComponents 为依赖组件的配置项
  // test-1 为依赖组件的别名(可以随意定),在使用页面的布局中使用此别名。
  // /pages/component/test-component 为依赖组件的路径(无序添加后缀)。
复制代码

第二、在对于布局页面中使用,和使用系统组件一样,上一步定的 「别名」作为标签名。

<!-- index.wxml 文件内容 -->
<view>
  <test></test>
</view>
复制代码

保存重新编译之后,页面就出现了我们自定义组件的内容。

简单-定义一个小程序组件

3、实现响应用户操作事件

这一步将实现用户的点击事件。在用户点击自定义组件之后,将改变自定义组件的文字内容。

第一、捕获自定义组件的点击事件。

自定义组件的事件处理和在一般页面一样, catchtap 对应的事件,然后在 js 文件中定义好对应的处理函数。代码如下:

<!-- test-component.wxml 的内容 -->
<text catchtap='onClick'>{{text}}</text>
复制代码
// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{ // 方法一定要放在这个里面
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
    }
  }
})

复制代码

效果如下

简单-定义一个小程序组件

4、在外部监听上一步的文字改变时间。

这一部分主要的代码还是位于自定义组件的 js 文件内。

第一、在自定义组件内部触发一个组件的自定义事件,代码如下:

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  }
})
复制代码

第二、在引用组件的页面(wxml)捕获这个事件

<!-- index.xml 文件内容 -->
<view>
  <test catch:onTextChange='onTextChange'></test>
</view>

复制代码

第三、在引用组件页面 js 逻辑内建立这个捕获事件

// index.js 页面内容
Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  }
})

复制代码

效果如下:

简单-定义一个小程序组件

5、自定义组件提供给外部调用的方法

第一步、编写对外提供的方法

这里给外部提供一个改变文字内容的方法,代码如下:

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法,和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  },
  // 这个方法是给外部调用,用来改变这个组件的文字内容
  setText: function (text) {
    this.setData({
      text: text
    });
  }
})

复制代码

第二步、通过 id 获取组件实例,使用组件实例直接调用组件方法

代码如下:

Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  },
  // 响应点击事件
  change:function(e){
    // 使用官方提供的 selectComponent 方法通过 id 获取组件实例
    var mComponent = this.selectComponent('#mComponent');
    // 通过实例,直接调用组件内部提供的方法
    mComponent.setText('外部调用了');
  }
})
复制代码
<!-- index.wxml 内容 -->
<view>
  <test catch:onTextChange='onTextChange' id='mComponent'></test>
  <button catch:tap='change'>点击改变文字内容</button>
</view>
复制代码

最终效果如下:

简单-定义一个小程序组件

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微机原理与接口技术

微机原理与接口技术

李文英、李勤、刘星、宋蕴新 / 清华大学出版社 / 2001-9 / 26.00元

《高等院校计算机应用技术规划教材•应用型教材系列•微机原理与接口技术》是“高职高专计算机系列教材”之一。全书包括微机原理、汇编语言、接口技术三部分内容。微机原理部分讲述了80x86的内部结构及工作原理、半导体存储器及其系统、微型机总线结构等。汇编语言部分讲述了指令系统、编程技巧。接口技术部分讲述了中断系统、中断控制器、并行接口、串行接口、DMA控制器、定时器,以及A/D、D/A转换器等常用芯片的硬......一起来看看 《微机原理与接口技术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试